タグ別アーカイブ: favicon

wordpressのTwentyfourteenテーマのブログサイトにファビコンを設定する方法

こんにちは。nekonomoridesignのYoshyです。
今日は、wordpressのカスタマイズ2個目。
Twentyfourteenのテーマを使っているサイトに「fabiconの設定をしよう!」です。

fabicon(ファビコン)って何?

百聞は一見にしかずです。コレです。↓↓

fabiconの説明図 タグバナー
ファビコンとは何でしょうか

よく、サイト名の横に付いたり、ブックマークをしたときに並んでいるアイコンみたいなやつです。
これを、ファビコンfabiconといいます。
コレを設定しておくと、ブックマークやお気に入りに煎れてもらった時に、マークが出てきて、覚えてもらいやすかったりします。
ブログサイトだし・・・とか、一般企業のサイトだから・・・何て考えず、会社・個人名・ブログ名を印象付けるため、しっかりと細部まで作りこんだサイトと思ってもらえるためにも、私はファビコンの設置を奨めたいと思います。

っということで、私も作ったのですが、猫の杜デザイン、なので、「猫のあしあと」をモチーフにしたファビコンにしました。

・・・で。そのファビコンって、どうやって作るのかを今日は書きたいと思います。
私は、フォトショップで作りましたので、その手順と、登録方法です。

フォトショップでのファビコンの作り方

fabi-1

まず、新規作成から、48×48ピクセル、背景透明で作成開始。

fabi-2

レイヤーを1枚新しく追加します。

fabi-3

ファビコンは小さい画像なので、例では、簡単なハートマークで作っています。実際にファビコンを作る時も、単純なものにしたほうがいいと思います。複雑なものは見づらいかもしれません。

fabi-4

画像を作ったら、「web用に保存」します。

fabi-5

保存形式を選びます。
fabi-6

設定は、「PNG-8」で保存しましょう。背景を透明にする必要があります。48×48ピクセルが作れたら、今度は、32×32ピクセル、16×16ピクセルも同様の方法でつくって保存しておきましょう。
保存できたら、次は、「ico」形式を作ってくれるサイトさんにアクセスします。

PNG形式のファイルを、.ico形式で保存しなおす方法

 

私がお世話になっているのは、ファビコン favicon.icoを作ろう!さんです。
fabi-7

このサイトさんは、各大きさの画像をまとめて「ico」形式に変換してくれるという素晴らしいサイトさんです。本当に役立たせて頂いています。ありがとうございます。

fabi-8

画面の指示通り、3種類の画像をそれぞれアップロードしていきます。

fabi-9

3つの大きさ全てをアップロードしたら「favicon.icoを作成」のボタンをクリックします。

fabi-11
fabi-10

クリックしたら、画像が出来上がりました。プレビューもしてくれます。とっても親切なサイト様です。

画像に問題が無ければ、「ダウンロード」ボタンをクリックし、任意の場所に保存してください。

fabi-12

WordPressにファビコンを設置する方法

保存したら、Wordpressの管理画面を立ち上げて、「メディア」から「ファイルをアップロード」をクリックします。

fabi-13

先ほど任意の場所に保存した、「.ico」形式のファイルを指定してアップロードします。

fabi-14

アップロードした画像をクリックすると、詳細が見られるので、右のほうにある画像URLをコピーしてメモ帳などに貼り付けておきます。

メモに保存したら、次に「外観」から、「テーマの編集」をクリックし、右側の種類から「ヘッダー(header.php)」を選びます。
fabi-15

この画面の、からの間の任意の場所に、このような文字を打ちます。
出来れば、と記載されている下の段とかが最適かとおもいます。

—————-↓以下————————————-

<link rel=”shortcut icon” href=”※ココに先ほどコピーした画像のURLを記載”>

—————-↑ここまで———————————
※メモ帳に貼り付けたURLの例。
http://xxxxxxx.ico ←こんな画像URLを、href=”” の “” の間に入れます。

コレをいれたら、「ファイルを更新」をします。

これで、ファビコンが設定されるようになります。反映されるまで、もしかしたら少し時間がかかるかもしれませんが、1日経っても代わりが無い場合は、タグが間違っているかもしれませんので、再度、header.phpを編集してみてくださいね。

ファビコンで、自分のサイトを認識してもらう可能性を高めましょう♪

それではまた!