ファビコンの設定の仕方は、「@Gyuuuuuuuu」
で書かれている通りなのですが、僕なりに記事を作っていきたいと思います。
photo credit: Pensiero via photopin cc
ファビコンってなに？
そのサイトの顔と言ってもいいでしょう。（ただしパソコンのみです。）
ブラウザでサイトを開くと、当サイトならブラウザ上部に
このような感じに出てくると思います。
このタイトルの左側のアイコンが”ファビコン”なんです。
ね？サイトの顔でしょ？
ちなみに第２の顔もあります。それはこちら
今回はこのアイコンを設定したいと思います。
ファビコンを設定する手順
ファビコンを設定する手順は
- 画像の用意
- ファビコンを作成
- 画像をアップロード
- header.phpを編集
という流れです。
画像の用意
僕は絵がとんでもなく苦手なので、知り合いの方に書いていただきました。
こんな感じです。
サイズは16×16 or 32×32 or 48×48のどれかで作成してください。
絵の保存形式は、PNG , GIF , JPG(JPEG)のどれかでお願いします。
ファビコンを作成
こちらに先ほど作った画像をアップロードします。
そして”下部のfavicon.icoを作成”をクリックすると、右上に作成されます。
それを任意の場所に保存します。
拡張子は変えず、”.ico”で保存してください。
画像をアップロード
ウェブクリップ設定でも記載したとおり、アップロードの仕方は２通りあります。
それぞれの場合でお話します。
imageフォルダに入れる場合
ご自身のサーバー上にあるwp-content→themes→stinger2かstinger3→imagesと進んでファイルをアップロードしてください。
もともとStinger2,3には"rogo.ico"のファイルがありますが、同じ名前に設定しなくても大丈夫です。
少しでも容量が気になるなら、rogo.icoを消去してください。←自己責任でお願いします。
メディアに入れる場合
WordPressダッシュボードのメディアから画像をアップロードしてください。
その後、「編集」をクリックして、右側に表示される画像のURLをすべてコピーしておきます。
ここまで来たら折り返し地点です♪
頑張りましょう♪
Stinger2,3のheader.phpを編集する
ウェブクリップ同様、ファビコンはどのテーマでもhtmlのheader部分に記述します。
WordPressの場合はheader.phpに記述します。
使っているブラウザでCtrl+Fで検索できるので
shortcut icon
と入力してください。
検索ができたら、記述を少し変えていきます。
imagesに入れた場合
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/rogo.ico" />
下線部を先ほどアップロードした時の名前にして終わりです。
favicon.icoで作成した場合は、favicon.icoに変更します。
”ファイル更新”を押して編集を終了してください。
メディアに入れた場合
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/rogo.ico" />
下線部をコピーしたURLに変更して終わりです。
”ファイル更新”を押して、編集を終了してください。
いずれの方法で編集が終了したら、自身のブログを更新してみてください。
もし変わらない場合は、ミスなどを探さずにお使いのブラウザのキャッシュを消去してから、もう一度ページを開いてみてください。
変更されてない場合はファイルの指定が間違っていないかチェックしてください。
（※注意※ブックマークのファビコンは自動で変更されないので、一度消去してからブックマークしなおしてください。）
以上で終わりになります。お疲れ様でした。
WordPressのカスタマイズに役立つ本
初心者の方はレッスンブックを読んでから購入した方がよさそうです。
ある程度知識がある方なら購入するとあらゆる面で役に立ちます。
Stingerを使用していても、ここを変更したい時に、どのようにカスタマイズすればいいのかわかるので、１冊持っておくといいです。