賢威(ワードプレス)でファビコンを設置する方法。

ファビコンって知ってます?

Favorite iconで、faviconです。

サイトをお気に入りに追加した時に表示されるやつね。

 

私はChromeのブックマークバーは、

ファビコンのみでお気に入りサイトを表示しています。

こんな感じ

ブックマークバー

なので、私のサイトもファビコン設定しないと困るのです。

 

今の時代、

ほとんどのサイトで、ファビコン設定してありますよね?

サイトの信頼性と、

また覚えてもらう為にも、

画像イメージが表示された方がありがたい。

というわけで、ファビコン設定も必須です。

 

ファビコンの作り方。icoファイルを用意する。

当サイトでも早速作ってみました。

画像編集ソフトで、適当に作って下さい。

サイズは 24×24、48×48、64×64、128×128・・・とか?正方形で適当に。

 

こんな感じにしました。( 128×128サイズ)

アフィリ保育園ファビコンのコピー

※イケてるかイケてないかは、問題ではありません。

 

で、一般的な画像ファイル(JPEGやGIFやPNG)では、ファビコンに設定できません。

ファビコンはICOファイルに変更する必要があります。

無料で、簡単に変更できれます。

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

FavIcon from Pics — free, instant favicon for your site

※フォトショップを持っている方は、そのままICOファイル形式で保存できます。(下の方参照)

 

ICO形式の画像を用意したら、あとはサイトに設置するのみです。

続いて、ワードプレスの設定です。

WordPressにファビコン画像をアップロード。

まず、ファビコン画像をワードプレスにアップロードします。

ダッシュボードの「メディア」→「新規追加」より、

先ほど作ったICO形式のファビコン画像をアップロードします。

ファビコンアップロード

 

無事アップロードできたら、画像のURLを確認します。

「メディア」→「ライブラリ」より、

アップロードしたファイルをクリックするとURLが確認できます。

右の方に「ファイルのURL」ってあります。

WS000236

このURLをコピーしておきましょう。

 

あとは、header.phpファイルにこのURLを書き込みして終了です↓

WordPressの「header.php」を編集する。

ダッシュボードの「外観」→「テーマ編集」より、

右側部分の、「ヘッダー(header.php)」を選択します。

ヘッダー編集

コードが出てきてワケプーですが・・・

 

表示されたコード内の<head>~</head>間に、下記ソースを挿入すればOK。

<LINK REL=”SHORTCUT ICON” HREF=”先ほどのファビコン画像ファイルのURL” />

※敢えての大文字にしましたが、小文字でも可

※「”」はコピペすると、「”」になってしまう臭い・・・手打ちにて入力し直しましょう。

 

というわけで、私は</head>の直前に設置しました。

faviconタグ

 

更新で終了です。

 

どうでしょう?簡単ですか?

英文のコードが出てきて、途中恐ろしいと感じる方。

プラグインでも簡単に設定できます。

 

ファビコン設置のプラグインは、「Favicon Rotator」

 「ヘッダー(header.php)」コードを、いじるのが恐ろしい方。

プラグインでファビコン設定してしまいまっしょい。

Favicon Rotatorです。

☆5つだし、高評価のプラグインですね。

WS000244

 

インスコして、有効化すると、

「外観」に「Favicon」が追加されます!!

WS000245

 

 

あとは、Add Iconで、作ったファビコンを選択するだけです。

WS000246

 

プラグインで、一瞬で設定できましたね。

 

それでもファビコンが表示されない場合

こちらも、参考下さい→賢威(ワードプレス)でファビコンが表示されない。

 

P.S.

「All in one Favicon」ていうプラグインもありました。

PNG、GIF画像も使えて、

管理者画面もファビコン設定できるので、こっちの方が良いかも・・・

 

 

フォトショップでICOファイル作成する。

おまけです。

フォトショップで、ファビコンを作る際はプラグインが必要でした。

下記リンクよりプラグインをダウンロード。

Telegraphics – Free plugins for Photoshop & Illustrator…and other software

 

ダウンロードしたファイル(ZIP)の中の、

「ICOFormat」をPhotoshopフォルダの「ファイル形式」フォルダに移動するだけです。

私の場合(Windows)は、

Program Files / Adobe / Adobe Photoshop CS / プラグイン / ファイル形式

って感じでした。

 

無事icoファイルで保存できる様になりました。

フォトショップでファビコン

 

フォトショップは、あった方が良いです。

高いですが・・・情報商材買うよりは、間違いなく良いです。


Adobe Photoshop CS6 Windows版

 

フォトショップは高すぎる・・・

そんな方は、Photoshop Elementsがオススメです。


Adobe Photoshop Elements 12 Windows/Macintosh版

 

アフィリエイトサイト運営くらいなら、

Photoshop Elementsで、全然問題無いですから。

Pocket
LINEで送る


コメントを残す