こんにちは。nekonomoridesignのYoshyです。
今日は、wordpressのカスタマイズ2個目。
Twentyfourteenのテーマを使っているサイトに「fabiconの設定をしよう!」です。
fabicon(ファビコン)って何?
百聞は一見にしかずです。コレです。↓↓
よく、サイト名の横に付いたり、ブックマークをしたときに並んでいるアイコンみたいなやつです。
これを、ファビコンfabiconといいます。
コレを設定しておくと、ブックマークやお気に入りに煎れてもらった時に、マークが出てきて、覚えてもらいやすかったりします。
ブログサイトだし・・・とか、一般企業のサイトだから・・・何て考えず、会社・個人名・ブログ名を印象付けるため、しっかりと細部まで作りこんだサイトと思ってもらえるためにも、私はファビコンの設置を奨めたいと思います。
っということで、私も作ったのですが、猫の杜デザイン、なので、「猫のあしあと」をモチーフにしたファビコンにしました。
・・・で。そのファビコンって、どうやって作るのかを今日は書きたいと思います。
私は、フォトショップで作りましたので、その手順と、登録方法です。
フォトショップでのファビコンの作り方
まず、新規作成から、48×48ピクセル、背景透明で作成開始。
レイヤーを1枚新しく追加します。
ファビコンは小さい画像なので、例では、簡単なハートマークで作っています。実際にファビコンを作る時も、単純なものにしたほうがいいと思います。複雑なものは見づらいかもしれません。
画像を作ったら、「web用に保存」します。
保存形式を選びます。
設定は、「PNG-8」で保存しましょう。背景を透明にする必要があります。48×48ピクセルが作れたら、今度は、32×32ピクセル、16×16ピクセルも同様の方法でつくって保存しておきましょう。
保存できたら、次は、「ico」形式を作ってくれるサイトさんにアクセスします。
PNG形式のファイルを、.ico形式で保存しなおす方法
私がお世話になっているのは、ファビコン favicon.icoを作ろう!さんです。
このサイトさんは、各大きさの画像をまとめて「ico」形式に変換してくれるという素晴らしいサイトさんです。本当に役立たせて頂いています。ありがとうございます。
画面の指示通り、3種類の画像をそれぞれアップロードしていきます。
3つの大きさ全てをアップロードしたら「favicon.icoを作成」のボタンをクリックします。
クリックしたら、画像が出来上がりました。プレビューもしてくれます。とっても親切なサイト様です。
画像に問題が無ければ、「ダウンロード」ボタンをクリックし、任意の場所に保存してください。
WordPressにファビコンを設置する方法
保存したら、Wordpressの管理画面を立ち上げて、「メディア」から「ファイルをアップロード」をクリックします。
先ほど任意の場所に保存した、「.ico」形式のファイルを指定してアップロードします。
アップロードした画像をクリックすると、詳細が見られるので、右のほうにある画像URLをコピーしてメモ帳などに貼り付けておきます。
メモに保存したら、次に「外観」から、「テーマの編集」をクリックし、右側の種類から「ヘッダー(header.php)」を選びます。
この画面の、からの間の任意の場所に、このような文字を打ちます。
出来れば、と記載されている下の段とかが最適かとおもいます。
—————-↓以下————————————-
<link rel=”shortcut icon” href=”※ココに先ほどコピーした画像のURLを記載”>
—————-↑ここまで———————————
※メモ帳に貼り付けたURLの例。
http://xxxxxxx.ico ←こんな画像URLを、href=”” の “” の間に入れます。
コレをいれたら、「ファイルを更新」をします。
これで、ファビコンが設定されるようになります。反映されるまで、もしかしたら少し時間がかかるかもしれませんが、1日経っても代わりが無い場合は、タグが間違っているかもしれませんので、再度、header.phpを編集してみてくださいね。
ファビコンで、自分のサイトを認識してもらう可能性を高めましょう♪
それではまた!