賢威にファビコンを設定してみた
ファビコン用の3つの 画像はできましたか？
つづいて、作成した３つの画像をマルチアイコンにしていきます。
WEBツールで変換する
ファビコン作成サイト にアクセスします。
画像をダウンロードする
変換された画像を、以下の赤枠内ボタン「ダウンロード」でダウンロードします。
ファビコンのWordpressへの設定方法
ファビコン画像が完成したので、Wordpressへ設定していきましょう。
WordPressサイトへのファビコン設定方法には
直接画像をWordpressにアップロードして
header.phpにコードで指定する方法と
プラグインを利用する方法があります。
それぞれ解説していきますね。
画像をwordpressにアップロードして header.phpにコードで指定する方法
WordPressにファビコン画像をアップロードします。ダッシュボード「メディア」→「新規追加」→「ファイルを追加」より
ファビコン画像をアップロードします。
上の画像下部分の緑枠内がアップロードされたファビコン画像です。
ファビコン画像の横の編集をクリックします。
アップロードしたファビコン画像のメディア詳細より
下の緑枠部分のURLをコピペで記録しておきます。
このURLをheader.phpより指定していきます。
Wordpressダッシュボード「外観」→「テーマ編集」→「ヘッダー（header.php）」を開きます。
（header.php)内の31列目辺りに
グリーンで囲んだ部分がありますので
以下の記述に書き換えます。<link rel=”shortcut icon” href=”あなたのファビコン画像のURL”>
これで更新すれば完了です。
書き換えるのは分かったけど、小さな字がいっぱいで、どこに有るのか分からないよぅ！！というときは、ファビコンの文字列がどこに設定されているかチェックしてみましょう。
ファビコンは、ヘッダーファイル（header.php）内に
記述されていますのでそこからブラウザの
「検索（Ctrl＋F）」を行います。
★（Ctrl＋F）で右上に検索窓が開きます。
検索するキーワードは「.ico」です。
これで「.ico」にヒットすれば、そこにファビコンに関する記述がされています。
一番簡単な方法は、そこに記述されてあるファイルを
<link rel=”shortcut icon” href=”あなたのファビコン画像のURL”>
に差し替えることです。
この部分を
こんな感じに差し替えました。
これで更新すれば完了です。
こんな感じにできました！
WordPressプラグイン「Favicon Rotator」を利用する
ここからは、WordPressプラグインFavicon Rotatorを利用する方法です。
Favicon Rotatorをインストールする
Wordpressプラグイン→新規追加→「プラグインの検索」より
Favicon Rotator を検索します。
Favicon Rotatorが表示されたらインストールします。
プラグインを有効化します。
ファビコン画像をアップロードします。
プラグインが自動調整してくれるため、アップロードする画像はファビコンサイズでなくても大丈夫です。
「外観」→「Favicon」よりファビコンにしたい画像をアップロードします。
これで設定完了です。
ワードプレスプラグインを利用でも簡単に設定できますが
今回はサイトが重くなるのを避けて、header.phpに記述する方法で作りました。
ファビコンを設定すると目立つので
ブックマークされた状態で
サイトを見つけてもらいやすい効果がありますね。
そして、なんといっても、
自分が作業するときに便利ですよ！
簡単な設定なので、まだの方はぜひこの方法で独自ファビコンを設定してみて下さいね。
最後までお読みいただきありがとうございました！
ランキングにも参加しています。
応援していただけると今まで以上に頑張れます＾＾
コメント・質問
どんな小さなことでも遠慮なくお問い合わせくださいね！
