![BASIC認証を掛けたディレクトリ内ファイルがSSIで読込できない場合の対処法](../images/htaccess_basic_ssi_img1.png)
BASIC認証を掛けたディレクトリ内にあるファイルは外からSSIで読み込む事ができずにエラーとなります。この場合SSI対象の読込ファイルをBASIC認証の外に出してやれば読み込みできます。認証エリアから外のファイル、或いは同じエリア内のファイルを読み込む事はできます。
![InstagramをWEBページに埋め込む方法・APIツールの注意点](../images/instagram_embed_img1.png)
Instagramには投稿を埋め込むコードはPCブラウザでのみ表示されます。埋め込みコードはその投稿のみに固定され、更新はされません。APIツールを埋め込めば情報が自動で更新されます。提供サービスは有料が多いです。
![ユーザーエージェントとは。文字列の確認方法や利用方法、固定化される件](../images/user_agent_img1.png)
ユーザーエージェントとは、WEBサーバーへのリクエストの際に明かす自身側の端末情報を示す文字列の事です。文字列にはOSやブラウザなどの閲覧側のプライバシー情報が明記されています。このユーザーエージェント情報は簡単に偽装できるので、固定化・凍結される方針です。
![Googleフォト、Gmail、Googleドライブデータが2年間未使用や容量超過だと削除されます(サービスポリシー変更)](../images/google_strage_delete_img1.png)
Googleフォト、Gmail、Googleドライブデータのポリシー変更により、2年経過後全て未使用の場合は全データ削除、部分使用の場合は未使用サービス内データのみ削除、容量超過のままの場合は使用サービスに関わらず全データ削除されます。
![WEBサイトにおける税込表記は2021年3月末までに済ませましょう(総額表示義務)](../images/website_total_amount_display_img1.png)
2021年4月から料金表示は税込の総額表示方式が必須となります。あらゆる媒体でそれが義務付けられますのでWEBサイトの料金も当然更新する必要があります。クライアントに早めに提案をして準備するようにしましょう。
![2021年に掲げる3つの目標](../images/2021_goal_img1.png)
2021年の目標は、親に感謝し続ける事ができる様に日々の仕事を頑張る事。無償で辛抱できる様に心・精神を鍛える事。自分の身近な人に思いをつないでいくぐ事。以上3つです。
![javascriptでテキストアニメーションを掛ける方法](../images/javascript_autowrite_img1.png)
テキストを1文字ずつ表示したり特殊なアニメーション演出で表示(消去・ループ)させるとカッコいいですよね。ページ上部のタイトルテキストなどに適用すればデザイン性が上がります。タイプライター的な演出や、消去する文字の操作、HTMLソースの挿入などができます。
![サクラエディタを暗転させる方法(背景色を黒・文字を白にする)](../images/sakuraedit_bgblack_img1.png)
サクラエディタで背景を黒、文字を白に反転させる方法をご紹介します。こうしておくと、通常の状態より目が疲れにくくなるのでお勧めです。色を反転できる箇所とできない箇所とありますので注意しましょう。
![SVG画像が映らない場合の対処法](../images/svg_display_img1.png)
サーバー移転時にWEBサイト上のsvg画像が表示されなくなる場合があります。それはWEBサーバーのContent-typeが未定義であるためです。.htaccessに定義する事で表示されます。AddType image/svg+xml .svg .svgzと追記して下さい。
![SEOキーワードの競合(バッティング)とは?複数ページでの同一キーワード設定を防ぐ](../images/seo_keyword_conflict_img1.png)
SEOキーワードの競合(バッティング)とは、同じキーワードやタイトルを複数ページに設定する事です。身内ページ同士でランキング評価を奪い合い・分散させているので、評価は高くなりません。キーワードの競合をなくし、本当に担当すべきページにのみ設定する事でSEO効果が出ます。
![ローカルSEOに取り組む前に必要な9つの準備(初心者向け)](../images/localseo_ready_img1.png)
ローカルSEOに挑むには大手サイトに登録するだけでなく自身のWEBサイトとコンテンツが必要です。WEBサイトでどれだけ地域に貢献・密着をしているかをアピールする必要があります。地域限定イベントやFAQ、オリジナルの完全ガイドの様なコンテンツを作る事でローカルSEOの評価が上がります。
![Googleカレンダーをiphoneでも共有・同期して使う方法](../images/iphone_googlecalendar_img1.png)
GoogleカレンダーをiPhoneなど別のデバイスで同期する方法をご紹介します。iPhone純正カレンダーアプリか、GoogleカレンダーアプリならGoogleアカウントを使って同期ができます。ToDoリストは純正カレンダーアプリでは同期できないので、GoogleカレンダーアプリかToDoリストアプリで同期します。
![CSSの属性セレクタ属性値にスタイル設定する(id・class属性に頼らない方法)](../images/css_selector_img1.png)
タグの各属性や属性値に対して、idやclass属性を付けずにCSSでスタイル設定をする事ができます。属性値の条件指定や複数属性スタックの機能もあり、コード量の節約・管理のしやすさにつながります。様々な属性に適用でき、HTML上のインラインスタイルを上書きする事もできます。サイトの検証にも利用できます。
![PHP7版へsql文の修正を伴うサーバー移転(Xserver)](../images/server_moving_mysqli_img1.png)
PHP7の環境に旧バージョンのシステムを移設した際に様々なエラーが出る場合があります。PHP7では「mysql_関数」系が使えない事がメインのエラー要因です。今回はPHPの標準モジュールである「MySQLi関数」に各箇所を置き換えて対処しています。
![iPhoneのマークアップ機能を使いこなす(画像を自由に装飾しよう)](../images/iphone_markup_img1.png)
iPhoneのマークアップ機能は、画像の上に手書き文字や図形・テキストなどを乗せて装飾する事ができる機能です。画像は装飾された状態で保存できますし、オリジナルの画像にいつでも戻せます。装飾は一つずつ選択・削除ができるので何度もやり直し可能です。
![SXO対策とは?ユーザー検索体験を満足させる新しいSEO対策](../images/sxo_img1.png)
SXOとは検索エンジンに対してではなく、ユーザーの検索体験に対して最適化をおこなうSEO対策です。検索エンジンのランキング評価だけではユーザーを100%満足させていないため、そのズレを修正する事が目的です。ユーザーの真のニーズを掴むのはもちろん、WEBサイト自体の快適さ・使いやすさもランキング要素になります。
![Wordpressの編集画面でpタグの自動挿入を解除する方法](../images/wpautop_img1.png)
Wordpressの投稿・固定ページの画面における小技です。基本仕様となるpタグの自動挿入機能が邪魔になる場合に、その機能を停止する方法です。・固定ページのみ・投稿ページのみ・固定ページのテンプレート別・複数の投稿タイプなどの指定ができます。
![bootstrapで固定サイドバーを付ける方法(affix、sticky、flexbox)](../images/sticky-sidebar_img1.png)
affix、sticky、flexboxで固定サイドバーを実装したサンプルをご紹介しています。基本的にはposition:stickyを使うのが無難でしょう。bootstrap4には固定を指定できるユーティリティが用意されています。いずれもPC版専用であり、スマホ版では機能を解除していますので固定はされません。
![CLSは画像サイズ指定で本当に改善されるのか(コアウェブバイタルSEO検証)](../images/cls_imgsize_img1.png)
CLSはSEOコアウェブバイタル指標の一つで、画像読込などによるレイアウトのずれの度合いを数値化したものです。結論、imgタグに幅と高さの指定をすればCLS数値は少なくなる事が検証できました。あらかじめサイズ指定をしておけば、その表示スペースが最初から確保されるのでレイアウトがずれないためです。
![CSSのattr関数を使ったデザイン実装サンプル](../images/css_attr_img1.png)
CSSのattr関数を使うと、本来CSSのcontent:で記述する文字情報をHTMLの中から読み込む事ができます。attr関数を使う事でCSSの本文であるデザインと構造の分離が守れます。HTMLソースを計量化でき、修正などもHTML側だけで済み、CSS管理もしやすくなるメリットがあります。
![お問い合わせメールの件名が文字化けする(Wordpressバージョンアップの後)](../images/subject_character_corruption_img1.png)
Wordpress5.5へのバージョンUP後にお問い合わせメールの件名が文字化けする現象を確認。これは「WP Multibyte Patch」日本語プラグインが影響しています。プラグイン内の日本語版設定ファイルを別位置にUPして上書きすれば、プラグイン自体をOFFにする事なく解決します。
![Google Search Consoleインデックス登録リクエストが使えない件(代替方法を紹介)](../images/gsc_request_img1.png)
Google Search Consoleのインデックス登録リクエストが使えない状態が10月14日から続いています。更新したページの再インデックスには最終更新日を付けたサイトマップを送信するだけで反映します。ですのでインデックス登録リクエストの申請が使えなくても問題はありません。
![CSSのみで背景パターンを実現する方法(7種類サンプル)](../images/css_bg_pattern_img1.png)
画像を使わずにCSSのみで背景パターンを構成する方法を7つのサンプルを使って紹介しています。ポイントはrepeating-linear-gradient()やlinear-gradient()を複数重ねる事です。その際重ねる位置をずらしたりtransparentで背景を透明にする事で、様々な模様が構成できます。
![Googlemapで自転車によるルート経路を調べる方法(9月18日より実装)](../images/googlemap_bicycle_img1.png)
2020年9月18日より日本のグーグルマップに「自転車ルート」による経路機能が追加されました。東京、神奈川、大阪、愛知、埼玉、千葉、兵庫、北海道、福岡、静岡の10都道府県で利用可能になっています。便利にはなりましたが自転車に乗りながらGooglemapを見ない様、スマホは固定するか「ナビ機能」を利用しましょう。
![トグルボタンによるラジアルメニュー表示をCSSで実装する方法](../images/css_radialmenu_img1.png)
CSSとjavascriptを使ってインタラクティブなラジアルトグルメニューを作ります。scale(0)とscale(3)を行き来して円形メニューを拡大・縮小し、rotate(45deg)とrotate(0)を行き来してプラスマークを回転させます。メニューとなるアイコンや画像はscale(3)の時に原寸になる様、元設定では3分の1でサイズ設定をしましょう。
![Googlemapsが表示されない場合の解決方法(APIキーによるグーグルマップの再設定)](../images/googlemaps_api_img1.png)
グーグルマップが表示されないのはAPIキーが設定されていないからである事が多いです。Google Cloud PlatformでAPIキーを発行する事ができますが、無料ではなく一定表示数以上は課金されます。APIキーには利用ウェブサイトやAPIの制限を掛けるべきです。
![ネットオウルからドメインキングへのWordpress移転について](../images/server_moving_virus_img1.png)
ネットオウルからドメインキングへのサーバー移転案件を請け負いしました。しかし実際はドメインやデータの移設は完了しており、ウイルス感染が原因で表示されていない状況です。結果移設作業をせずウイルス感染場所を修正する事で表示されるようになりました。
![CSSのみでグローバルナビゲーションメニューバーを実装する方法](../images/css_navimenu_img1.png)
CSSのみで作るレスポンシブル固定ヘッダーメニューの作り方をご紹介しています。基本はスマホ版から作り、min-width: 680pxでPC版・タブレット版の設定を後から掛けています。メニューのスライドは画面端から真正面へ移動する動きをCSSで滑らかにしているだけ、PCやタブレット版のメニュー配置はgrid-areaを利用しています。
![「Emotet」と呼ばれるウイルスへの感染を狙うメールについて](../images/emotet_img1.png)
Emotetは知人とのメールのやり取りの返信という形を装って添付ファイルを送ってきます。メールの宛先や過去のメール履歴なども模倣してくるので、一見見分けがつかない特徴があります。メール内容をまずは確認する事、そして添付の文書ファイルの「コンテンツの有効化」ボタンは押さないようにしましょう。
![モンティホール問題の条件付確率についてわかりやすく説明してみた](../images/monty_hall_problem_img1.png)
モンティホール問題は勘違いが起きやすい条件付き確率の代表例です。確率は半々ではなく、箱をチェンジした方がチェンジしない場合よりも当たる確率が2倍高くなります。どんなに母体数が多くてもハズレが除外され当たりとハズレの箱が1対1になるところが重要です。