突然ですが、ファビコンって知ってますか？お恥ずかしながら私は最近知りました。知っちゃうとあれ？このブログはStingerのままだ～と気付いちゃったので設定してみました。
今日はそんなお話です。
ファビコンとは？
ファビコンは、ブラウザのタブとかに出てくるあれです。小さいバナー画像です。サイズは16×16らしいです。
ホームページを開いた時に出てくるので、オリジナルのファビコンがあった方が良いですね。
ファビコン設定までの流れ
- ファビコン画像を探す
- ファビコンをダウンロードする
- ファビコンをアップロードする
- header.phpをちょっといじる
では。
1.ファビコン画像を探す
まず画像を用意するのですが、センスがないのでフリーでFaviconを配布しているサイトから調達することにします。
使わせていただいたのは、freefaviconさまです。ありがとうございます。
下にスクロールして、アルファベットの部分をクリックすると色々とファビコン画像が出てて来ます。
2.ファビコンをダウンロードする
freefaviconから気に入った画像をダウンロードします。
Zipファイルを解凍すると、「.ico」というファイルがあるのでテスクトップに保存。
私は、hat_grayを選択。
3.ファビコンをアップロードする
WordPressのメディアの追加から先程のファビコン画像をアップロードします。
画像がアップロードされたら編集をクリックします。
右の方のファイルのURLをコピーしておきます。
4.header.phpをちょっといじる
header.phpのコードをちょっといじる
そして、WordPress初心者はちょっと難関のコードをいじります。
私は前回子テーマを作ったので、子テーマのheader.phpをいじりたいと思います。私はちょっと慣れてきました。
WordPressの管理画面の「外観」→「テーマ編集」→「ヘッダー」をクリックします。
え～と、下にスクロールして、ファビコンのコードを探します。
</title>のちょっと下あたりです。
※「Ctrl」＋Fを押すとサイト内検索ができます。「shortcut icon」で検索してみつけてください。
この赤字部分のコードを先程のコピペした画像のURLに変えます。
最下部の「ファイル更新」で終了です。
よし、ブラウザでホームページを表示してみます。
キャッシュをクリア（F5を押す）してと。
これでOK！
いい感じですね。まだファビコンを設定していない方は意外と簡単ですので、お試しください。
今日はここまでです。
チャオ！
