[`yahoo` not found]
Pocket

bandicam 2016-09-02 17-28-51-060

ファビコンとは


あなたは、ウェブサイトのURLの左側に画像が表示されているサイトを見たことはありませんか?

その画像付きURLをブックマークしたり、デスクトップ上にそのサイトのURLをマウスで移動してショートカットを作ると画像付きのアイコンになります。

この画像を「ファビコン」と言います。

bandicam 2016-09-02 16-40-49-080

フェアビコンは、元々最初からあるものではありません。
何もしないと、アイコンは画像無しの白い状態だったり、
インターネットエクスプローラーのアイコンで表示されたりします。

このアイコンに独自画像を設定することが出来ます。

今回はワードプレスでのファビコンの設定方法を説明します。

ファビコンの作成方法


このアイコンはファビコンの設定をする前のものです。
これだと何のサイトか分かりにくく、ブックマークしても目立たないですよね?

bandicam 2016-09-02 09-21-30-389
そこでファビコンを作成し、設定し独自色のあるアイコンにしていきます。

ファビコンは32×32(ピクセル)のサイズですから、相当小さい画像になります。
ファビコン用の画像をアップロードすれば、
32×32に縮小してくれるサイトを紹介します。

ファビコン favicon.icoを作ろう!

画像はフリー素材サイトからダウンロードしてもいいですし、
また、ご自身で作成されたものでも構いません。

今回はフリー素材サイトから取り寄せた画像をアップロードして
作成していきます。

今回は下記の画像を使用します。
9c43ddf0f7c93d6bfa0eef39cc2806be_s
サイトを開いたら、「32×32用画像ファイル」を選択をクリックします。

bandicam 2016-09-02 10-04-29-114 アップロードするファイルの選択をして、「開く」をクリックします。

bandicam 2016-09-02 10-03-08-364
アップロードするとこのように表示されます。

bandicam 2016-09-02 10-04-08-429
「favicon.ico作成」ボタンをクリックします。

bandicam 2016-09-02 10-15-38-430
赤枠の部分にアップロードされた画像のデーターが表示されているのを
確認し、「ダウンロード」をクリックします。

bandicam 2016-09-02 10-03-22-995
ファビコン画像が出来ました。
かなり小さいことが分かりますね。

bandicam 2016-09-02 10-26-02-330

ワードプレスでのファビコン設定方法


ワードプレスでのファビコンの設定方法は、いくつかあります。
大きく分けると、ワードプレスにアップロードし、
header.phpにコードで指定する方法と、
プラグインを使用する方法に分かれます。

画像をアップしheader.phpにコードで指定する方法


ダッシュボードのメニューから、「メディア」⇒「新規追加」
と進みます。

メディアファイルのアップロードのページが表示されたら、
「ファイルを選択」して下さい。

bandicam 2016-09-02 10-44-41-778
上記の画面下部に赤枠で囲ったfaviconと表示された画像があります。
これがアップロードされたファビコン画像です。

画面右下にある「編集」をクリックします。

bandicam 2016-09-02 10-53-46-190

「メディアを編集画面」が表示されたら、
画面右にあるファビコンのURLをコピーします。
このURLをheader.phpに書き込んでいきます。

bandicam 2016-09-02 10-56-08-828

ダッシュボードのメニューから、
「外観」⇒「テーマ編集」⇒「ヘッダー(header.php)」のページに行きます。

bandicam 2016-09-02 14-38-07-622

赤枠の箇所の</head>を探し、
<link rel=”SHORTCUT ICON” href=”http://ドメイン名/wp-content/ファビコン名.ico” />
を書き込みます。

「ファイルを更新」ボタンをクリックすると、反映されます。

※賢威などのテンプレートを使っている場合、
ヘッダー(header.php)画面のプログラムが画像のものと異なるために、
このやり方が使えない場合があります。

プラグイン「Favicon Rotator」を使う方法


ダッシュボードのメニューから、「プラグイン」⇒「新規追加」
プラグインの追加のページが表示されたら、検索窓に
「Favicon Rotator」と入力、検索して下さい。

bandicam 2016-09-02 15-49-09-090

Favicon Rotatorが表示されたら、「今すぐインストール」ボタンを
クリックし、有効化して下さい。

ダッシュボードのメニューから「外観」⇒「Favicon」にページ移動します。

bandicam 2016-09-02 15-57-58-002

赤枠の「Add Icon」をクリックし、faviconに設定する画像を選択します。

bandicam 2016-09-02 16-05-12-587

Favicon Rotatorを使うと、
ファイルの形式や画像の大きさは自動調整されます。
ファイル変換や画像の大きさ調節は不要になります。

画像をアップロードしたら、
画面下にある「Add Browser Icon」をクリックします。

bandicam 2016-09-02 16-15-29-722

これでしばらくすると反映します。

※権威などの独自のファビコンを持っているテンプレートでは
反映されません。

[`yahoo` not found]
Pocket