ローカル環境のワードプレスの初期設定を終え、そろそろ記事を書こうと！
記事を作成中に「プレビュー」ボタンをクリックして見ると、Cocoon テーマのサイトアイコンが表示されるのが気になったので、自分なりの サイトアイコン を作って見ることにしました。
↓↓↓
現状・条件
この記事の目標
オリジナルのサイトアイコンを制作して、ブラウザーのタブで表示させます。
リサーチして見た
知っている事より、知らないことが多い！！ 調べて見ることに。。
・記事に直接属するマークアップされた画像のみを指定する必要があります。
Google：AMP ページの必須プロパティから抜粋
・画像の幅は 1,200 ピクセル以上にする必要があります。
・すべてのページに画像を少なくとも 1 つ含める必要があります（マークアップを含めるかどうかは問わない）。Google は、アスペクト比と解像度に基づいて、検索結果に表示する最適な画像を選択します。
・画像の URL は、クロールやインデックス登録に対応できる必要があります。
・画像はマークアップされたコンテンツを表している必要があります。
・.jpg、.png、.gif のいずれかの形式の画像を指定する必要があります。
・適切な画像が選択されるようにするために、アスペクト比が 16×9、4×3、1×1 の高解像度画像（800,000 ピクセル以上の画像）を複数指定してください。
サイトアイコンはブラウザーのタブやブックマークバー、WordPress モバイルアプリで表示されます。ぜひアップロードしましょう。
ワードプレス ADMIN ページ：「外観 → カスタマイズ → サイト基本情報」の説明文より
サイトアイコンは 512 × 512 ピクセル以上 の正方形にしてください。
サイトアイコンは 512 x 512 の 正方形 が要るのに、Google さんからは画像の幅を 1200px 以上にしなさい！と。。素人には難しい！
また、調べたら下記のように「サイドパネル」を応用すれば良いと思いつきました。
映像技術におけるレターボックス（英語：Letter box）とは、映像メディアの表示画面において他の画面サイズ規格でつぶれて表示されないよう、表示互換性をとるために、本来および横長比率の映像の撮影された映像部分の上限部に黒帯を追加した状態のものを呼ぶ。略称で「レタボ」「LB」として表示される場合も多い。
・ピラーボックス・逆レターボックス・サイドパネル：
スタンダードサイズの映像をそれ以外のサイズ（主にビスタサイズ）向けに表示したときに左右に黒枠・任意の画像等が付いたもの↓↓レターボックス (映像技術) の内容を抜粋・編集
やることがわかったので、早速やって行きましょう！
512 x 512 ピクセルのサイトアイコンを作成
PhotoScape X を起動して「写真編集」メニューをクリックします。
画面右側の中央部分にある画像をドロップ「新規」リンクをクリックして幅 512、高さ 512 を入力してください。
のところをクリックして「背景」を選択してください。
選択した「背景」色 があっているか確認の上、「OK」ボタンをクリックしてください。
画面右上の「挿入」メニューをクリックして、
「テキスト」メニューをクリックします。
❶ テキスト「J」を入力します。
❷ フォント と サイズ を選択・設定します。
❸ テキストの色 を選びます。
左側のテキストを動かしながら上下左右をセンターに合わせてください。
微調整を終えたら、画面右下の「保存」ボタンをクリックして下さい。
「別名で保存」をクリックして好きな場所に保存して下さい。
これで、サイトアイコンが完成されました！
次は、画像の幅を1200 px 以上にする条件に対処します。
サイドパネルを追加
また、PhotoScape X を起動して「写真編集」メニューをクリックします。
画面右側の中央部分にある画像をドロップ「新規」リンクをクリックして今回は 幅 1280、高さ 512 を入力して、「背景」は 白 を選択して下さい。
「OK」ボタンをクリックして下さい。
画面右上の「挿入 → イメージ」をクリックして、制作済みのサイトアイコンを持って来て下さい。
( 画面左側で「フォルダー」を探して下に表示される画像を ドラッグ＆ドロップも可能です )
下記のように表示されるはずです。
サイトアイコンの高さを白いサイドパネルの高さにぴったりと合わせて下さい。
サイトアイコンを動かしながら上下左右をセンターに合わせてください。
微調整が済んだら、先ほどと同じく識別しやすいファイル名にして「別名で保存」して下さい。
完成版は下記のように見れます。
残るはこのサイトパネル付きのサイトアイコンをワードプレスで設定することですね。
サイトアイコンを表示させる
あなたの WordPress 管理画面にログインして下さい。
下記のようにサイトアイコンをアップロードして下さい。
WordPress 管理画面から、
・押下：「外観 → カスタマイズ → サイト基本情報→ サイトアイコンを選択」
ファイルをアップロードする か メディアライブラリ からサイトアイコン画像を選択して下さい。
下記のようにサイトアイコン部分だけを切り抜いて完成です。
画面右側のプレビューのように表示されます。
「公開」ボタンをクリックして、ブラウザで確認して見て下さい。
画像の幅を 1200 ピクセル以上にしなかったら？
WordPress 管理画面から、「Cocoon設定 → AMP タブ → AMPの有効化」で「AMP機能を有効化する」にチェックを入れたあるのが条件です。
・「推奨サイズより大きい画像を指定してください」という Google Search Console にエラーが出でしまいます。広告の審査に合格する為には、Search Console のエラーをゼロにする必要があります。
Google のガイド「AMP が検索結果にどのように表示されるかを理解する」のように AMP機能を有効化 した方が、検索のランキングに良い影響を与えるはずです。
Google 検索では、AMP ページをインデックスに登録することによって、信頼性に優れた高速なウェブ エクスペリエンスを実現しています。AMP ページを使えるようにすると、モバイル検索で注目を集めやすいリッチリザルトやカルーセルの一部として表示できるようになります。AMP であるかどうかが直接 Google 検索のランキングに影響することはありませんが、スピードはランキングに影響します。
AMP が検索結果にどのように表示されるかを理解する
AMP 機能を有効化するには「Cocoon設定 → AMP タブ → AMPの有効化」で「AMP機能を有効化する」にチェックを入れて下さい。
AMP 機能を有効にしてしばらく経つと、Google Search Console に「AMP」メニューが表示されます。
コメント