Sponsored Link

こんにちは、静かな法律家のブログにようこそ。
今回は、ファビコンの変更方法について解説していきます。


Sponsored Link

ファビコンを変更する理由

そもそもファビコンとは、

fabicon

 

 

↑の青い丸で囲んだ部分(タブの左に表示される画像)のことです。

タブアイコン等とも呼ばれます。

WordPressの場合、デフォルトでファビコンが設定されていますが、

デフォルト

 

 

ちょっとパッとしません(笑)

ファビコンを自分の好きな画像に変更することで、
見栄えを良くすることができます。

見栄えを良くすることで、あなたのサイトに対する
ユーザーの好感度を上げることができます。

ユーザーがあなたのサイトをお気に入りに登録してくれた場合、
ファビコンはユーザーのお気に入りにも表示されますので、
あなたのサイトをより強く、ユーザーに印象づける効果も
あります。

 

ファビコンの変更方法

プラグインを使います。
テンプレートに賢威を使っている人は、この方法にプラスして、
以下で述べるようにFTPソフトの操作も必要になります。

1.プラグインのインストール

まず、Wordpressの管理画面左メニューから、
プラグイン→新規追加で、Favicon Rotatorを
検索、インストール、有効化します。

 

2.画像のアップロード

次に、ファビコンに設定したい画像を作成し、アップロードします。
作成、といっても、ネット上にはフリーのアイコン素材がたくさんあるので、
ネットで自分の気に入った画像を探してくるだけでOKです。

画像の探し方がわからないよ!という方はお問い合わせください。

画像がある人は、以下の手順で編集していきます。

1.Photoscapeをインストール

2.Photoscapeを起動→「画像編集」をクリック

photoscape

 

 

 

 

 

3.下の「ホーム」タブにある「リサイズ」をクリック。幅を114pxにします。理想は114px×114pxの正方形です。

4.必要に応じて「トリミング」タブからトリミングをします。

5.右下の保存ボタンをクリックし、「名前を付けて保存」で好きな場所に保存します。

Photoscape

 

 

 

3.プラグインの設定

管理画面の左メニューから「外観」→「Favicon」をクリック。

Brouser Icon とTouch Iconがありますが、

Brouser Iconは、ユーザーがPC上であなたのサイトを

見たときに表示されるファビコンで、

Touch Iconは、ユーザーがAndroid, iPhone, iPad, iPod Touch等の

スマホやタブレットであなたのサイトを見たときに

表示されるファビコンです。

念のため両方設定しておきましょう。

両方、Add Iconボタンをクリックし、さっき保存した画像をアップロード

して、変更を保存すれば完了です。

 

4.FTPソフトを使う(上記のみで表示されない場合)

ここまで終えてもファビコンが表示されない方は、
上記3ステップに加えて、FTPソフトの操作も必要になります。

テンプレートを賢威にしていると、Favicon Rotatorで
ファビコンを
変更するだけでは表示されないのです。

なのでFTPソフトを使うのですが、
注意していただきたいのは、

FTPソフトの操作は、Favicon Rotatorのプラグインに加えて必要だ

ということです。

FTPソフトの操作だけやって、プラグインを入れていなければ
ファビコンは変更できませんので、注意してください。

 

私はFTPソフトはFFFTPを使っているので、このソフトをベースに解説します。
(賢威6.1をベースに解説します。)

1. FFFTPを起動。

2. ファビコンを設定したいドメインをクリック。

3.以下の順にクリック

public_htmlフォルダ→wp-contentフォルダ→themesフォルダ→自分の使っているテンプレートのフォルダ→imagesフォルダ

4. 画像をドラッグ&ドロップ

FFFTP

 

 

 

 

※フォルダにかからないところであればどこでもいいです。

5. 画面に出てきた画像URLをコピー

画像のファイルが、上の表示窓に現れるので、
そのファイルを右クリックし、「URLをクリップボードへコピー」を選択して
コピーします。

6. テーマ編集

管理画面に戻って、「外観」→「テーマ編集」→「header.php」に移動。
以下の部分を探します。

キャプチャ

 

 

 

 

上から3段落目くらいにある、黄色い部分を思い切って削除。
(テーマ編集って緊張しますよね)

そこに、先ほどコピーしたURLを貼りつけます。
Ctrl+vでさくっと貼りつけましょう。

キャプチャ

 

 

 

 

以上で完成です!

サイトを開いてみると感動しますよ^^