エントリーを書くのが遅くなりました。ごめんなさい
0713 09 videoGames by cloneofsnake
ファミコンで初めて買ったソフトは「ベースボール」。りく（@Rikuma_）です。
先日、ファビコン画像を自動取得するブログロールの作り方をエントリーで書きました。
アップ後、いろいろと質問やお問い合わせなどを頂きました。中には「参考にして作ってみました」という方もおられまして、とても光栄でした。ありがとうございます。
質問に答えるべく、いろいろと調査をしてきました。
「調査結果をまとめてエントリーをアップしますね」と数名の方に約束してたのですが、いろんなイベントが続いてそちらのエントリーを優先させたり、仕事が多忙になって作業が停滞したりと、いろいろあって当エントリーのアップが大変遅れてしまいました。申し訳ありません。
ファビコン画像が私のブログで表示されない件
質問で最も多かったのは、「ファビコンを設置したんだけど、りくまさんのブログロールに表示されないよ～」というものでした。
ファビコンは設置しても反映されるまで長い時で数日ほどかかる、と解説してるサイトがあったので、しばらく様子を見ていたのですが、確かに何日経っても反映されない。
PCブラウザで見るとキチンとファビコンが表示されてるのに。ナゼだろう…。
今回のブログロール作成で利用しているWebサービスがどういう仕組みでファビコンを自動取得しているのか、いろいろ調べたのですが、細かいところは分かりませんでした。
ひとまず私が一部の方に協力をお願いしたのは、「2箇所にファビコンをアップロードしてもらえますか」ということ。
「2箇所」というのは、ルートフォルダと、テーマフォルダ。
この表現で分からない人もいらっしゃると思うので、図にしてみました。
まずルートフォルダというのは、WordPressをインストールしている一番上の階層ディレクトリです。ルート・ディレクトリと言った方がいいのかな？
↑一番上の階層ディレクトリには「wp-admin」「wp-content」などのフォルダ、そして「.htaccess」「welcome.html」などのファイルがあると思うのですが（他にもいろいろあります）、それらと同じ階層にファビコン（favicon.ico）をアップロードします。
↑もう1個、テーマフォルダ（テーマ・ディレクトリ）は、現在使ってるテーマが入ってるフォルダのこと。「index.php」や「header.php」などのテンプレートファイルがある場所と同じ階層にファビコンをアップロードします。
私は上記の通り「2箇所にファビコン保存」の方法をブログ開設時に勉強して設置し、ブラウザにもRSSリーダーにも、そして今回作ったブログロールにもファビコン画像が問題なく表示されました。
その「ブログ開設時に勉強した」のが、どこかのブログ記事だったのか、それとも購入した書籍だったのかを忘れてしまい、今回いろいろ調べたのですがネタ元を発見できませんでした。
ファビコン画像の指定方法（WordPressの場合）
ルートフォルダとテーマフォルダの2箇所にファビコンを設置したら、今度はブログを表示しているテンプレートにファビコンの場所を記述する必要があります。
ファビコンの場所は、HTMLのヘッダー部分に記述するのが一般的。WordPressのテンプレートだと「header.php」というファイルに記述していると思います。
「header.php」にファビコン場所を指定する方法ですが、まずルートフォルダの指定は、
<link rel="shortcut icon" href="<?php echo home_url(); ?>/favicon.ico" />
↑これでルートフォルダのファビコンは指定できます。（上のサンプルは2行ですが、実際は1行で書いてます）
「echo home_url()」とテンプレート関数で記述しておけば、もし将来ドメインを変更した時もPHPコードを修正する必要がありません。
次にテーマフォルダの指定は、
<link rel="shortcut icon"
href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
↑こうなります。（これも実際は1行で書いてます）。「bloginfo(‘template_directory’)」というテンプレート関数は「現在使用中のテーマフォルダ」という指定。
テーマを変更した時も、上のように記述しておけばわざわざテーマごとにURLを修正しなくても済みます。（ただし、ファビコン画像そのものは変更したテーマフォルダ内にアップロードしておかねばなりません）
で、2箇所に画像を置いているのだから、2箇所とも「header.php」に記述しておかねばならないかというと、そういう訳でもなく、むしろテーマフォルダの指定1つだけ記述しておけば正常に動くようです。
実際、当ブログは「bloginfo(‘template_directory’)」の1つしか指定していませんが、問題なく表示されています。ルートフォルダのファビコンはあくまで「画像のみ保存」で、HTML指定はテーマフォルダの1つのみでイイと思います。
ファビコンのファイル名をどうすればいいか
次にファビコンのファイル名について。
一般的には「favicon.ico」というのがファビコン画像だという認識になるみたいですが、そうではないネーミングの画像ファイルでもブラウザでは正常に表示されるケースが多々ありました。
また、ファイルの拡張子が「ico」ではなく、「jpg」だったり「png」だったりしても正常に表示されてるブログもあります。
ブラウザやRSSリーダーでは問題なく表示されているファビコンも、私が今回採用したWebサービスによるブログロールでは表示されない、というケースがあり、原因を探りましたが、これも不明。
Webサービスでは単純に「favicon.ico」というネーミングの画像ファイルを自動取得するような仕組みになってるのかもしれません。これはあくまで推測ですので、真実がどうなのかは分からない。
ファビコン指定がないのにファビコンが表示されてるブログも…
上でサンプルを書きましたが、ファビコンを指定するHTMLの記述は、
<link rel="shortcut icon" href="●●●" />
という風に、linkタグというもので指定します。
しかし、このlinkタグがどこにも書かれてないにもかかわらず、ファビコンが正常に表示されているブログもありました。
聞いたところによればWordPressに「All in one Favicon」というプラグインがあるらしいですね。そのプラグインを使用すれば「header.php」にファビコンの記述を書かなくてもイイらしいです。
ただ、そのプラグインを使って設定しているにしても、HTMLソースに何かしらのファビコンに関する記述が出力されないと表示されないんじゃないかなー、と思いつつ調査しましたが、どういう仕組みで表示されてるのか分からない。
調べている過程で「おや？」と思ったのが、OGPでした。
OGPに設定している画像をファビコンとして利用できる？
OGPというのは「Open Graph Protocol」のことで、簡単に言うとFacebookやmixiなどでリンクをシェアしたり「いいね！」をした時に、そのブログの正確な情報を認識してもらうための仕組み。
OGP情報を正しく設定していないと、ブログをFacebookで「いいね！」してもらった時に、ブログの説明だとか画像とかが正確に反映されなくなってしまいます。
WordPressでは、このOGP情報をとても簡単に生成・出力してくれる「Open Graph Pro」というプラグインがあります。私もこのプラグインでOGP情報を出力しています。
「Open Graph Pro」の設定方法などは、ちょっと前に書いたエントリーでチラッと紹介してます。（文章長いので読みづらいですゴメンナサイ）
もしかしたら、このOGP情報で設定している画像（og:imageというパラメータで指定している画像）がファビコンとして認識され、正常に表示されているのかもしれません。これも私の推測です。
余談：OGP情報を重複して出力している場合がある
これはファビコンの話と直接関係ないのかもしれませんが、余談として。
ブログロールで紹介させてもらってる仲間の一人、ゆーいちさん（@flavour47）のファビコンが私のブログロールに表示されず、ファビコンをどう設置すればいいか二人でいろいろやり取りをしてました。
その過程で上にも書いた「OGP情報とファビコンが関係あるのかな」と閃き、ゆーいちさんのブログのOGP情報がどうなってるかをチェックしてみました。
OGP情報のチェックは、以下のサイトで誰でも簡単に実行することが出来ます。
↑上記サイトの入力欄にチェックしたいブログのドメインを入力し、「デバッグ」をクリックするとチェック処理が実行されます。私の場合は「https://rikumalog.com」と入力して実行。
↑私のブログは上のように表示されます。ひとまず正常。
↑ゆーいちさんのブログをチェックすると、上のようなエラーメッセージが表示されました。一部パラメーターが重複して出力されているという警告のようです。画像の情報も重複して出力されているらしく、2つの画像が表示されています。
※ゆーいちさん本人の許可を得てチェック結果を掲載しています。
私も以前、全く同じ現象で重複エラーになり、Facebookとの連携が上手くいかなくて悩んだのですが、原因はプラグイン「Open Graph Pro」と、もう1つのプラグイン「Wordbooker」で二重にOGP情報を出力しているせいだと判明。
「Wordbooker」でOGP情報を出力しないよう設定を変更したら、重複エラーは解消されました。
ゆーいちさんのブログでどういったプラグイン設定になってるかは確認できていないのですが、私と同じように複数のプラグインか何かでOGP情報を二重出力している可能性も考えられます。
もしかしたらファビコンが表示されない原因ってコレかな～、と思っていたのですが、
↑数日後、ブログロールに表示されてました。サッパリ分からないｗ
キャッシュの問題だったのかもしれないですね。何日間かチェックしたら、F5を押す度に「表示される」「表示されない」がくり返されるという奇妙な現象もあったのですが、現在は常に表示されるようになりました。
当ブログのブログロールについて
ファビコン調査に関しては以上なのですが、結局のところ、このWebサービスを利用して全員のファビコンをキチンと表示させるにはどうすればいいかは、残念ながら分かりませんでした。
せっかくブログロールに出るのだからファビコン設置してみよう、と作業されたのに今も当ブログのブログルールにファビコンが表示されない方もおられます。それがスゴク申し訳ない。
ということで、ブログロールを作り直します。やっぱり全員のアイコンをキチンと表示しないと失礼だし。アイコンはファビコンの自動取得ではなく、Twitterのアイコンをお借りして表示させるようにします。
そちらの作り方も完成したらエントリーで紹介します。今回採用したファビコン自動取得の仕組みは使わなくなりますが、「こういう仕組みもあります」ということで了承して頂ければ幸いです。（このWebサービスはダメ！という訳ではございませんので）