WordPress ファビコン

デザイン五輪書

WordPressにファビコンを設定する方法

読了までの目安時間:約 17分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

WordPressにfaviconを設定する方法

ファビコンを設定しておきましょう!

ファビコンとは?

今回はファビコン(favicon)を設定する方法についてご紹介します。

ファビコンとは、そのサイトを表すアイコンみたいなもので、タブやURL欄、ブックマークバーの目印として表示されたり、ショートカットアイコンとして使用されます。

ファビコン

ブックマークの数が膨大に増えると、目的のサイトを探す際に結構苦戦します。
ですが、ファビコンを設定していれば、割りと簡単に目的のサイトを探し出す事ができるのです。
逆に、ファビコンが白紙のままだと、全然目立ちません。

ブックマーク一覧

(※上記画像では、わざとファビコンを読み込まないように設定しています。)

このように、たかがファビコンではありますが、ユーザビリティの観点からすれば、結構疎かにはできないのがファビコンなのです。
と言う事で、あなたのサイトにもファビコンを設定しておきましょう。

▲もくじへ戻る

ファビコンの設置方法

下準備

ファビコン用の画像には、正方形のものを使用します。
「16×16」ピクセル、「32×32」ピクセル、「48×48」ピクセル、「64×64」ピクセル、「128×128」ピクセルのサイズが一般的なようです。
私は、「64×64」ピクセルのファビコンを多用します。

ファイル形式としては、「.ico」、「.gif」、「.png」を使用します。
「.jpg」は背景を透過できませんので、ファビコンには向いていません。

PhotoshopIllustratorGIMPInkscapePixlr Editorやペイントなど、画像を作成できるソフトでファビコンを作成して下さい。
保存する際のファイル名は「favicon」にします。

▲もくじへ戻る

作成したファビコンを表示する方法

作成した画像をファビコンとして使用する為には、いくつかの方法があります。

まずは、コーディング作業によってファビコンを適用する方法を二つご紹介します。
・・・私はこの方法をお勧めしませんので、この部分に関しては作業を行わず、説明を読むだけにしておいて下さい。

▲もくじへ戻る

HTMLでファビコンを設定

WordPressの「ツールバー」の中にある「新規追加」にマウスを合わせます。
表示された「メディア」をクリックします。

メディア

「メディアのアップロード」のページが開いたら、「ファイルを選択」をクリックします。

ファイルを選択

そして、作成したファビコンファイルを選択し、WordPressにアップロードします。

ファイルのアップロードが終わると、アップロードしたファイルが画面下部に一覧表示されます。
その中の「編集」をクリックします。

編集

「メディアを編集」ページが表示されます。
画面右側にある「保存」ボックスの中に、ファイルのURLが表示されています。
このファビコンのURLが必要になりますので、このページは閉じずにそのままにしておきます。

ファイルのURL

次は、「サイドバー」の「外観」の中にある「テーマ編集」をクリックします。

テーマ編集

「テーマの編集」ページが開いたら、画面右側のファイル一覧を確認します。
このリストは、現在使用中のテーマフォルダ内のファイルが一覧表示されています。

テーマフォルダ内のファイル一覧

この中から、「ヘッダー」を選択します。

ヘッダー

ヘッダーの編集画面が表示されたら、<head>タグと</head>タグの間にファビコンを指定するタグを記述します。

<head>
<link rel="shortcut icon" href="ファビコン画像のURL" />
</head>

使用テーマによっては既存のファビコン設定があります。
そう言う場合、ファビコンの設定が競合してしまいますので、そのファビコンの設定部分をコメントアウト(無効化)しておく必要があります。
コメントアウトの方法については、後述します。

▲もくじへ戻る

PHPでファビコンを設定

PHPでファビコンを設定する場合、FTPソフトを使用します。
ちなみに、私はDreamweaverを愛用しています。

FTPソフトを利用して、作成したファビコン画像をWordPressで使用中のテーマフォルダ内に保存します。
テーマフォルダは、「WordPress>wp-content>themes>使用中のテーマフォルダ」と言う具合にフォルダを展開していけば見付かります。

使用中のテーマフォルダの中へ、ファビコン画像をドラッグ&ドロップして下さい。

ファイルのアップロード

これで、ファビコン画像がWordPress内に保存されました。

「サイドバー」の「外観」の中にある「テーマ編集」をクリックします。

テーマ編集

「テーマの編集」ページが開いたら、画面右側のファイル一覧を確認します。

テーマフォルダ内のファイル一覧

ファイル一覧の中から、「ヘッダー」を選択します。

ヘッダー

ヘッダーの編集画面が表示されたら、<head>タグと</head>タグの間にファビコンを指定するタグとPHPを記述します。

<head>
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.png" />
</head>

上記のタグは、ファビコンファイルをPNG形式で保存した場合です。
あなたが保存したファビコンの拡張子に合わせて書き換えて下さい。

使用テーマによっては既存のファビコン設定があります。
そう言う場合、ファビコンの設定が競合してしまいますので、そのファビコンの設定部分をコメントアウト(無効化)しておく必要があります。
コメントアウトの方法については、後述します。

▲もくじへ戻る

All in one Faviconの導入!

上記方法はテーマ編集の中身に手を加える方法です。

この方法だと、使用テーマをアップデートしたり、使用テーマを変更した際、設定が全て消えてしまいます。
また一から設定をしなければならなくなりますので、私はお勧めしません。
・・・何年も同じテーマをアップデートなしで使用し続ける事など、現実的にあり得ませんから。

それよりも、ファビコンをWordPressに組み込んでくれるプラグインを導入しましょう。
この方法なら、使用テーマを変えようが、全く左右されません。

WordPressのサイドバーメニューの「プラグイン」の中から、「新規追加」をクリックします。

プラグインの新規追加

「プラグインのインストール」ページが開いたら、検索窓に「All in one Favicon」と入力し、「プラグインの検索」をクリックします。

プラグインの検索

検索結果の中から、「All in one Favicon」の下に表示されている「いますぐインストール」をクリックします。

All in one Faviconをインストール

「本当にこのプラグインをインストールしてもいいですか?」と表示されるので、「OK」をクリックします。

自動でAll in one Faviconのインストールが行われます。
インストールが完了したら、「プラグインを有効化」をクリックします。

プラグインを有効化

All in one Faviconが有効化されると、WordPressのサイドバーの「設定」の中に、「All in one Favicon」が追加されます。

All in one Favicon

「All in one Favicon」をクリックすると、「All in one Favicon Settings」のページが開きます。

画面上部の「Frontend Settings」では、あなたのサイトのファビコンの設定を行います。
あなたの準備したファビコンファイルの拡張子に合わせたアップローダーを利用します。

Frontend Settings

画面中央部の「Backend Settings」は、WordPressの管理画面内のファビコンの設定を行います。
ここに設定したファビコンは、基本的に、あなたしか見れません。

WordPressの管理画面とサイトのトップページ、両方をブックマークバーに登録している場合、クリック間違えがないように、それぞれ別々のファビコンを登録しておくと便利です。

▲もくじへ戻る

ファビコンが切り替わらない方へ

既存のファビコン設定との競合

当サイトで推奨している高性能WordPressテーマ「THE WORLD」では、最初からファビコンの設定がなされていて、サイトのデザインにマッチしたファビコンが表示されます。
ですので、「THE WORLD」ユーザーの方が今回の記事を読んで、そのまま実行したとしても、既存のファビコンの設定と競合し、作ったファビコンがきちんと表示されないと言うケースも多いと思います。

そこで、既存のファビコンの設定を、コメントアウトと言うテクニックを使って無効化する方法をご紹介します。
間違っても、既存のファビコンタグを選択して削除・・・などと言った乱暴な事はしないようにしましょう。

ソースコードの不要となった部分を削除する方法を乱用していると、WordPress内で不具合が起きた際に、二度と復旧できなくなります。
コメントアウトで無効化する習慣を身に付けましょう。

▲もくじへ戻る

コメントアウトとは?

コメントアウトとは、ブラウザに読み込ませたくない部分を指定する目的で使用する、コメントタグを使ったテクニックの事です。

ウェブ制作者が、ウェブサイトの製作過程でエラーが起こっている部分を特定する目的で使用するのが本来のコメントタグの使われ方ですが、コメントタグを使ってソースコード内に目印を入れたり、遊び心でソースコード内にアスキーアートを入れ込んだりと、様々な使われ方をしています。
今回のように、競合する部分をコメントアウトすると言うのもよくある使われ方の一つです。

コメントタグの代表的なものとしては、HTML用のものと、CSS、PHP、JavaScript用のものとがあります。

HTMLの場合、次のような形でコメントタグを使用します。

<!--
	この部分はブラウザに認識されません。
-->

CSSやPHP、JavaScriptの場合は、次のような形でコメントタグを使用します。

/*
	この部分はブラウザに認識されません。
*/

更に、PHPやJavaScriptの場合は、次のような形のコメントタグも使用できます。

//この部分はブラウザに認識されません。

今回は、ヘッダー部分のHTMLタグをコメントアウトしますので、最初のコメントタグを使用します。

▲もくじへ戻る

競合部分をコメントアウトする

「サイドバー」の「外観」の中にある「テーマ編集」をクリックします。

テーマ編集

「テーマの編集」ページが開いたら、画面右側のファイル一覧を確認します。

テーマフォルダ内のファイル一覧

ファイル一覧の中から、「ヘッダー」を選択します。

ヘッダー

ヘッダーの編集画面が表示されました。
既存のファビコンを指定している部分は、<title>タグの直前にあります。

キーボードの「Ctrl」と「F」を同時に入力して下さい。
ブラウザに検索窓が表示されます。

ブラウザ内検索

この検索窓に「<title>」と入力し、「Enter」を入力します。
該当した<title>タグが強調表示されます。

この直前のタグをコメントタグで囲みましょう。

<!--
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/img/<?php echo get_option('site_color')?><?php echo get_option('site_color')?>_favicon.ico" />
-->

これで、既存のファビコンの設定が無効化され、あなたが設定したファビコン画像が表示されるようになります。

ファビコン画像

このコメントアウトは、テーマを変更したり、テーマをアップデートした際には消えてしまいます。
その度に、該当部分にコメントアウトを追加して下さい。

▲もくじへ戻る

最後に

ICO形式について

以前までは、IE(インターネットエクスプローラー)は「.ico」形式のファビコンしか対応していませんでした。
ですので、例えば、「.png」形式でファビコンを作った場合、Google Chromeではマトモに表示されるにも関わらず、IEではファビコンが表示されませんでした。

以前のIE

ですので、ファビコンを「.ico」形式で保存する為、Photoshopに拡張機能をインストールし、保存形式を強化する必要がありました。
実は、今回ファビコンについての記事を書こうと思ったのも、この、Photoshopの機能を強化する方法をあなたにお伝えしたかったからです。

ですが、今回の記事を書く為にIE11からファビコンの表示を確認したところ、普通に「.png」形式で作ったファビコンが表示されていました。

IE11

そうなると、もはや、「.ico」形式の出る幕はありません。
今のブラウザは自動でバージョンアップして行きますので、古いブラウザに対する配慮は必要無くなりました。
近い将来、作成し辛い「.ico」形式には、誰も見向きしなくなるでしょう。

・・・と言う事で、Photoshopを使って「.ico」形式でファイルを書き出す方法については、今回、説明を割愛する事にしました。
手順が大変なのに使う機会がないと言うのでは、あまり意味がありませんしね。

▲もくじへ戻る

IT業界は変化が激しい!

先ほどご紹介した「.ico」形式の話も然り、IT業界は日々進化をしています。
私が当サイトでご紹介しているテクニックやノウハウも、数年後は通用するのかどうか、正直なところ、分かりません。

そこがこの業界の良いところでもあり、悪いところでもあります。
まぁ、情報を発信する側にしてみれば、ネタ切れはまずあり得ませんけど、その代わり、常に勉強し続ける必要があります。

記事を執筆する際は、きちんとノウハウが通用するのかどうか、まずは検証してから記事を執筆するようにしています。
ですが、日が経過したものは、きちんと通用するのかどうかについて保証できかねます。

ですので、できる限り、最新記事の情報を参考にして頂ければと思います。
今後、ノウハウが変更になったものは、随時、新しい記事にて情報を発信して行く予定です。

これからも当サイトを参考にして頂けると幸いです。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :           

ホームページ作成 WordPress   コメント:0

この記事に関連する記事一覧

TOPへ戻る