ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲで、ファビコン設定やったら簡単過ぎて感動した
2020/04/01
このブログのテーマ(テンプレート)は、「ＳＴＩＮＧＥＲ７」というのを使ってるんですが、その設定項目のひとつに「アイコン・ファビコン設定」というのを見つけました。
ファビコンっていうのは、ブラウザでサイト開くと、タブの左端なんかに小さく表示されるマークのことでして。
サイトをお気に入りに登録したときも、サイト名の左に表示されますが。
これがあると何だかサイトに本物感が出るといいますか、とにかくカッコ良いんで早速設定してみることにしましたよ。
ファビコン用の画像を用意する
まずはファビコン用の画像を用意するところから始めるんですが、あんまり面倒な作業は御免こうむりたいなと。
改めて絵を描いたりするのも無理だし、シンプルなものが良いなと思いまして、漢字一文字で「楽」という画像を作ることにしました。
Ｗｉｎｄｏｗｓ標準のＰａｉｎｔｅｒなんかのような“お絵かきソフト”を使ってもいいんですが、今回は「フリーフォントで簡単ロゴ作成」という便利サイトを利用させて頂くことにして。
こちらのサイトは、実に多くのフリーフォントを使ってロゴ画像を無料で作成できる秀逸サイトでして。
あまりにフォントの種類が多くて逆に選ぶのに時間がかかるといいますか、アレコレいろんなフォントを見てると楽しくて時間が過ぎてしまうというのが玉にキズというくらい。
とにかく有難く利用させて頂いて、ここで１５２×１５２ｐｘのＰＮＧ画像を作りましたよ。
ＰＮＧ画像をファビコン用の画像に変換する
上で作成したＰＮＧ画像をファビコン用の画像に変換するんですが、これにもネット上の便利サイトを使わせて頂きまして、「様々なファビコンを一括作成。ｆａｖｉｃｏｎ ｇｅｎｅｒａｔｏｒ」というサイトなんですが。
これは１枚の画像から、様々なサイズのファビコン用画像を一度に生成してくれるという神サイトでして。
ここに先程のＰＮＧ画像をアップロードしまして、生成された画像が一まとめになったＺＩＰ圧縮ファイルをダウンロードします。
中にはたくさんのサイズの画像が入ってるんですが、今回利用するのは以下の２枚だけ。
・ｆａｖｉｃｏｎ．ｉｃｏ
・ａｐｐｌｅ－ｔｏｕｃｈ－ｉｃｏｎ－１５２ｘ１５２－ｐｒｅｃｏｍｐｏｓｅｄ．ｐｎｇ
これらをＺＩＰファイルを解凍して、取り出します。
前者は、１６×１６・３２×３２・４８×４８ｐｘの３つのサイズの画像を含むマルチアイコンのファイルです。
後者は、ｉＰｈｏｎｅなんかで利用される画像ファイルです。
ファビコン用画像を設定する
さて最後は、「ＳＴＩＮＧＥＲ」の設定です。
まずは用意した２枚のファビコン用画像をサーバへアップロードするんですが、どこでもかまわないのでアップしたら、それらがブラウザで画像が表示されるかＵＲＬを打ち込んで確認しておきましょう。
私は、ブログのルートにアップロードしてみました。
続いてＷｏｒｄＰｒｅｓｓの管理画面に「ＳＴＩＮＧＥＲ管理」というメニューがありますから、そこで「アイコン・ファビコン設定」という項目を見つけます。
そこに「ファビコン用のＵＲＬ」を記入するフィールドがありますから、そこに上で確認した「ｆａｖｉｃｏｎ．ｉｃｏ」のＵＲＬを入力します。
その下にある「ａｐｐｌｅ－ｔｏｕｃｈ－ｉｃｏｎ画像のＵＲＬ」のほうには、「ａｐｐｌｅ－ｔｏｕｃｈ－ｉｃｏｎ－１５２ｘ１５２－ｐｒｅｃｏｍｐｏｓｅｄ．ｐｎｇ」の画像のＵＲＬを入力しましょう。
記入が終わったら、一番下にある「ｓａｖｅ」ボタンを忘れずにクリック。
これで改めてブログを確認してやると、見事ファビコンが表示されてます！
私はｉＰｈｏｎｅとか持ってないんですが、持ってる方はそちらでも確認してみると良いですね。
