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