楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

WordPressのテーマSTINGERで、ファビコン設定やったら簡単過ぎて感動した

2016/11/27

160425a

このブログのテーマ(テンプレート)は、「STINGER7」というのを使ってるんですが、その設定項目のひとつに「アイコン・ファビコン設定」というのを見つけました。

ファビコンっていうのは、ブラウザでサイト開くと、タブの左端なんかに小さく表示されるマークのことでして。

サイトをお気に入りに登録したときも、サイト名の左に表示されますが。

これがあると何だかサイトに本物感が出るといいますか、とにかくカッコ良いんで早速設定してみることにしましたよ。

ファビコン用の画像を用意する

まずはファビコン用の画像を用意するところから始めるんですが、あんまり面倒な作業は御免こうむりたいなと。

改めて絵を描いたりするのも無理だし、シンプルなものが良いなと思いまして、漢字一文字で「楽」という画像を作ることにしました。

Windows標準のPainterなんかのような“お絵かきソフト”を使ってもいいんですが、今回は「フリーフォントで簡単ロゴ作成」という便利サイトを利用させて頂くことにして。

フリーフォントで簡単ロゴ作成

こちらのサイトは、実に多くのフリーフォントを使ってロゴ画像を無料で作成できる秀逸サイトでして。

あまりにフォントの種類が多くて逆に選ぶのに時間がかかるといいますか、アレコレいろんなフォントを見てると楽しくて時間が過ぎてしまうというのが玉にキズというくらい。

とにかく有難く利用させて頂いて、ここで152×152pxのPNG画像を作りましたよ。

PNG画像をファビコン用の画像に変換する

上で作成したPNG画像をファビコン用の画像に変換するんですが、これにもネット上の便利サイトを使わせて頂きまして、「様々なファビコンを一括作成。favicon generator」というサイトなんですが。

様々なファビコンを一括作成。favicon generator

これは1枚の画像から、様々なサイズのファビコン用画像を一度に生成してくれるという神サイトでして。

ここに先程のPNG画像をアップロードしまして、生成された画像が一まとめになったZIP圧縮ファイルをダウンロードします。

中にはたくさんのサイズの画像が入ってるんですが、今回利用するのは以下の2枚だけ。

・favicon.ico

・apple-touch-icon-152x152-precomposed.png

これらをZIPファイルを解凍して、取り出します。

前者は、16×16・32×32・48×48pxの3つのサイズの画像を含むマルチアイコンのファイルです。

後者は、iPhoneなんかで利用される画像ファイルです。

スポンサーリンク

ファビコン用画像を設定する

さて最後は、「STINGER」の設定です。

まずは用意した2枚のファビコン用画像をサーバへアップロードするんですが、どこでもかまわないのでアップしたら、それらがブラウザで画像が表示されるかURLを打ち込んで確認しておきましょう。

私は、ブログのルートにアップロードしてみました。

続いてWordPressの管理画面に「STINGER管理」というメニューがありますから、そこで「アイコン・ファビコン設定」という項目を見つけます。

そこに「ファビコン用のURL」を記入するフィールドがありますから、そこに上で確認した「favicon.ico」のURLを入力します。

その下にある「apple-touch-icon画像のURL」のほうには、「apple-touch-icon-152x152-precomposed.png」の画像のURLを入力しましょう。

記入が終わったら、一番下にある「save」ボタンを忘れずにクリック。

これで改めてブログを確認してやると、見事ファビコンが表示されてます!

私はiPhoneとか持ってないんですが、持ってる方はそちらでも確認してみると良いですね。

記事下アフィリウィジェット


こちらは、WordPressの基礎を勉強したい人におすすめの書籍です。

WordPressレッスンブック HTML5&CSS準拠

著者:エビスコム

amazon

楽天で探す

いちばんやさしいWordPressの教本

人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応

amazon

楽天で探す

スポンサーリンク

楽天モーションウィジェット(600×200)スマホ非表示

-ブログの話
-,