Simplicityサイトにファビコン設定の備忘録。

fav_1気づいてくれた方がいらっしゃるととても嬉しいのですが、ファビコンを設定してみました。

出来れば、ヘッダーにも設定してある「虹」が良かったのですが、生憎巡り合わず…
でも、とても素敵な素材を見つける事が出来たので、素材をお借りしてファビコンを設定する事が出来ました。

数年前に、別サイトでファビコンを設定した事はありますが、すっかり手順を忘れていました。
その備忘録を書き留めて行きたいと思います。

スポンサーリンク

Simplicityサイトにファビコン設定の備忘録

まずは予備知識から…。

ファビコンってなに?

自分のサイトを飾る、最小にして最強なアイテムと言ったら、大袈裟かなぁ?

それは、相手に主張するのもあるのですが、結構自己満足に浸れます(笑)マルチサイトを運営されている方も多いと思うのですが、やっぱり特徴的なファビコンを付けていると見分けも付きやすく便利だと思います。

先ほど、最小にして最強なアイテムと書きましたが、↑の通りとても小さな画像です。頭の中でいつしか 16px×16pxのワンサイズと記憶していましたが、一般的には32pxも用意すると良いようです。

16px → IE
32px → GoogleChrome、Firefox、Safari等

各ブラウザで設定サイズが違うわけですね。
ちなみに、このサイトのファビコンは16pxです。

私が使用しているブラウザは主にChromeですが、特に劣化も見られず満足しているので、32pxは暇でやることない時に作ってみようと思います(…というやつは、作る気が無いという事ですね(笑)( `ー´)ノ)

ただ、もっと大きなサイズ 512pxであれば、wordpress(4.3以降)の標準機能が追加されて、一枚の画像が複数のサイトアイコンへリサイズされて表示されるそうです。
こちらはちょっとやる価値がありそうですね。時間を見つけて設定してみたいと思っています。

1.ファビコン用の素材を用意する。

今回、私はこちらのhare’sさんの素材をお借りしました。

上にも書いているのですが、虹を探していたのが、こちらの素材をお借りする事にしました。とても素敵で(笑)自サイトを眺めてうっとり出来るのって嬉しいですよね~(笑)

hare’sさんのサイトにもファビコンの設定方法は分かりやすく書いてあるので、今回は私が行った作業だけ、書き留めたいと思います。
また、ファビコン素材がすでにある方は、このまま 3.自サイトへアップロードする。へお飛び下さい。

1-1 2枚の素材を気に入ってしまった~

fav_7

hare’sさんのサイトで最初に見つけた素材はこのカラフルなドット絵でした。淡い色合いがとても素敵で一目惚れ(笑)
そして、他の素材も見ていた時に目に留まったのが、アルファベット…。

規約をチェック~。加工等OKと表記されていたので、さっそく2種をダウンロードさせて頂きました。
(#^^#)本当に素敵な素材を有難うございました(#^^#)

ファビコン素材は、ほぼ背景が透明で作られていると思います(これは製作者さんの御意向でも違うのかもしれませんが、通常であれば…)

なので、2種を重ねても、大丈夫なんですよね~。

1-2 カラフルな輪の中に、アルファベットを縮小して重ねてみた

Kyo-no-iroの頭文字の「K」と虹色ドットを見つけた私、有頂天でした(笑)( *´艸`)

これをさっそくGimp(画像ソフト)で加工します。
2枚を単純に重ねたら、少し違和感。「K」を少し縮小して、ドットの中へすっぽり入れてみました。

fav_8

ここで、とりあえずpng(透過)もしくはjpeg/jpg形式で保存します。理由の一つとして、Simplicityのアップローダーは.icoはアップロードできないからです。

2.自サイトへアップロードする。

2-1 メディアライブラリーへ画像を登録する。

他の画像と同じ手順で、メディアライブラリーに画像を登録する。

2-2 カスタマイズ ー その他からファビコンの設定を行う。

fav_9

□ピンクの四角内のボタンから、登録した画像を選択する。

2-3 用意したファビコンが既に.icoだった場合は…

そのままテーマファイルへ入れ込めば設定も可能ですが、wordpressが入っている階層、またはfunction.phpと同じ階層へ入れる方法が検索で出てきました。

残念ながら、私は一つのwordpressをマルチサイト化して使っていますので、その階層へは入れ込みたくありません。私のようにマルチサイト化されている方は、上記のやり方で各サイトに違う画像を設定する方法が簡単だと思いますし、各サイトへ登録が可能になります。

ですので、なんとなくもったいない気はしますが、私ならば「.icoからpngへ変換してアップロード」という選択をすると思います。

そう言った場合、PNG ICO 変換。オンライン フリーのようなサイトで、PNG ←→ .ico の相互変換が可能です。お試し下さい。

という事で、一昔前には.icoのみだったファビコン設定も、PNGで賄える時代になったという事です。

そんなに年月は経っていないんですけどね~。進化のスピード、ハンパないです(笑)( ;∀;)

励みになります
ランキングに参加しました。
「ダウンロードしたよ。」の
応援クリック頂けると嬉しいです(#^^#)
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村


スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする