WordPress、サイトのアイコン表示は標準機能だけで設定できるのね…小さな画像でも大丈夫。

公開日:  最終更新日:2017/03/14

SiSO-LAB☆WordPressでサイトアイコンを設定する方法。 
今更話ですいません。WordPressでサイト名の横にアイコン表示させる設定ですが、いつの間にか標準機能でサポートされていました。以前はFavicon.icoファイルが必要でしたが、WordPress 4.3以降では簡単に設定することができます。

WordPress 4.3以降はサイトアイコン設定簡単

超今更な話ですいません。WordPressでサイトアイコン(ブラウザのサイト名の横に表示されているアイコン)の話です。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

ちょっと別のことを試していてやり方を調べていたら、あら、いつの間にかサイトアイコンの機能が標準機能として実装されていました。

以前は「Favicon.ico」というアイコンファイルを作ってブログのサイトアイコンを設定していましたが、WordPress 4.3以降ではWordPressのサイト事本情報からサイトアイコンを設定できるようになっていました。

WordPressの管理画面から「外観」→「カスタマイズ」と進みます。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

「サイト基本情報」を選択します。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

「サイトのタイトル」、「キャッチフレーズ」に加えて、「サイトアイコン」が設定できるようになっています。ここから画面の指示に従って操作していくことでサイトアイコンを設定することができます。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

512x512pxより小さな画像ファイルでも登録できる?

WordPressのサイトアイコン設定の説明を読むと、

サイトアイコン サイトアイコンはサイトのアプリとブラウザーのアイコンとして使用されます。アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要があります。

と書かれています。

うーん、以前、Favicon.icoを作ったときは一番大きなサイズでも48 x 48pxまでしか作っていません.改めて大きなサイズの画像を作った方がいいんでしょうか…いやまあ、端末側でのアイコンとしても使われるので、ちゃんと大きい画像を作った方がよいには違いありません。

ところが「画像を選択」まで操作を進めると「推奨画像サイズ:512 x 512」という、ちょっとやわらかい表記に変わります。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

もしかしたら小さな画像サイズでも登録できるかも、ということで以前「Favicon.ico」用に作成した画像ファイルを登録してみることにします。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

画像ファイルを選択すると「画像切り抜き」になります。WordPressはWEBアプリですが、こういう機能も実現できちゃうって、よくよく考えるとすごい話だな、と感心します。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

まあ、切り抜くどころか満たないサイズだったりするので、そのまま設定完了です。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

もともとこのサイトには「Favicon.ico」を設定しているので、通常のブログ記事表示画面では変化はありません。しかし、管理画面の方でもサイトアイコンが表示されるようになりましたよ。

こちらはサイトアイコン設定前です。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

サイトアイコンを設定すると、このようにサイト名の前にアイコンが表示されるようになります。
SiSO-LAB☆WordPressでサイトアイコンを設定する方法。

「管理画面のタブはサイトアイコン無し、プレビュー表示しているタブにはサイトアイコンあり」なんてのが頭になじんじゃっているので、慣れるまでちょっと時間がかかりそうです。

 

今日の一言二言三言

 

これからは ちゃんと読むぞ リリースノート

 

WordPress 4.3ということで、それはそれはかなり以前の話で…。「お、無事更新されたよ!」と喜んでいるだけでなく、リリースノートも読まないとですね。

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

関連前後記事

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑