Twenty Sixteen カスタマイズ 2-1 サイト基本情報「サイトアイコン」編

ごけたです。
サイトアイコンは別名ファビコン「favicon」。
「favorites icon (お気に入りアイコン)」の略だそうです。

はじめに

WordPress Twenty Sixteen カスタマイズ シリーズ その2-1
今回は「外観」→「カスタマイズ」→「サイト基本情報」の続き。
「サイトアイコン」についでです。


ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。

サイトアイコンとは


サイトアイコンは「サイト基本情報」の表示の説明にもあるように、
タブやブックマーク、Wordpress モバイルアイコンとして表示されます。

サイトアイコンを設定する前に、「Wordpress サイトアイコン」で検索しました。
「Wordpress Codex 日本語版」の「faviconの作成」を読みました。

その中の

「WordPress Version 4.3以降」に
faviconを使用する場合は以下のセクションでの説明ではなく、
サイトアイコン機能を使用してください。

favicon.ico ファイルを自分で作成したり、テンプレートを変更する必要はなく、
カスタマイザー画面から縦横512ピクセル以上の正方形の画像を指定すれば済みます。

と書かれています。

と、言うことはこれまでファビコン(サイトアイコン)の
「ico」の拡張子に変換するためのソフトやプラグインは無視して、
「GIF」や「PNG」ファイルの画像でOKと解釈しました。

でもページ一番下の「.pngや.gifよりも.icoを使用する利点」は
今回は無視して行います。

サイトアイコンを表示してみる

サイトアイコン設定はWordpressの管理画面左メニューの
「外観」から「カスタマイズ」をクリック。
「サイト基本情報」内にあります。

サイトアイコンは「サイト基本情報」の表示の説明にもあるように、
「512×512ピクセル以上」が推奨です。

ここでは既にサイトアイコンを作成済みとして進行します。
※サイトアイコンの保存拡張子は「png」にしています。

サイトアイコンの「画像を選択」をクリックします。
任意の場所にある「サイトアイコン」を選択します。



画像を選択すると「サイト基本情報」にタブでのプレビューが表示されます。

このサイトアイコンで決定なら、一番上の「公開」をクリック、
一番左上の「x(バツマーク)」をクリックして、カスタマイズ画面を閉じます。



アンドロイドの「ホーム画面に追加」を使用して、
サイトアイコンを実際に表示させた画像。

一番左が推奨の「512×512ピクセル」で正方形のアイコン。
真ん中が分かりずらいですが「512×512ピクセル」で角を丸にしたアイコン
一番右が「512×512ピクセル」背景に馴染むように、
文字以外は背景を「透明」指定で作成したアイコン。



今回サイトアイコンは全て「photoshop Elements 2018」で作成しました。
一番右の背景を「透明」指定で作成したアイコンは
新規作成画面で一番下の「カンパスカラー」を「透明」で指定してます。

どのサイトアイコンも保存時の拡張子は「png」です。

さいごに

「Wordpress Codex 日本語版」の「faviconの作成」の
最終更新日は「2016年5月22日 」です。
そこを踏まえて「.png」であれば、その前は「favicon」以外でもいいのかも知れません。

最後までお合い下さいまして有難うございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク