ブログロールを作ってみました
Zelda & Link by Gage Skidmore
ファミコンのディスクシステム欲しかった。りく（@Rikuma_）です。
今年の1月にブログを開設して以降、いろんなブロガーさんとTwitterやFacebook、そしてブログ同士で交流する機会が増えました。
中にはブログ開設する前からイチ読者として知っていたブロガーさんもいれば、WordPressを勉強する際に大変参考にさせてもらった方々もいます。そんな方々とお話する機会が増えたり、実際にお会いすることも出来たり。嬉しい限りです。
そこで、お世話になってる方々、仲良くさせてもらってる方々のブログを紹介させて頂くべく、当ブログにもブログロールを設置してみました。「リンク集」ですね。
ブログロールに画像を使ってみたかった
最初、各ブロガーさんがTwitterで使用しているアイコンをブログロールに使えないかな～、と考えてました。
自動取得できる方法はないものかといろいろネットで探していたところ、それよりも前に「ファビコンをブログロールに使用する方法」を発見することが出来ました。
うむうむ、ファビコンでもいいな。おもしろそう！
ファビコンとは、「ファビリー・コンピュータ」の略、
ではなく、
↑PCのブラウザでブログなどを見ると、上の画像の赤い枠のように画像が表示される時がありますよね。その画像をファビコンと言います。
このファビコンを自動取得してブログロールに表示させる方法を紹介します。
まずはWordPress管理画面でリンクを保存しまくる
ブログロールの基本的なデータは、WordPressの管理画面で入力していきます。
管理画面メニューの「リンク」→「新規追加」で、リンク情報を入力する画面が表示されます。
↑「名前」欄にブログ名称、「ウェブアドレス」欄にURLを、それぞれ入力します。
↑さらに下、「カテゴリー」欄は「ブログロール」にチェックを入れましょう。リンクターゲット欄は、私の場合「リンクをクリックすると別タブに表示させる」方式にしたかったので、「_blank」を選択しています。
以上4つを設定し、「リンク追加」をクリックすると保存されます。これを延々と繰り返してブログロールに表示させたいブログを登録していきます。
ブログロールのウィジェットを追加する
登録が終わったら、次はサイドバーなどの表示させたい場所にブログロールのウィジェットを追加します。
管理画面メニューの「外観」→「ウィジェット」で、利用できるウィジェットに「リンク」というのがあると思いますので、それを表示させたい場所（私の場合だと右サイドバー）にドラッグ。
↑ドラッグが完了するとウィジェットが展開され、設定画面が表示されます。「リンクカテゴリーの選択」は、さっきチェックを入れた「ブログロール」を選択。
「並び順」はお好みで設定して下さい。私はアルファベット＆五十音順で固定させたいので「リンクタイトル」にしています。あとは「リンクの名前を表示」にチェックが入っていることを確認し、保存。
これでWordPress管理画面での登録処理は終了です。ブログロールが上手く表示されているか、ブログを確認してみてください。ただし、まだブログタイトルの文字だけしか表示されていないはずです。
jQueryを使ってファビコン画像を取得・表示させる
次にjQueryのコードを追加します。
jQuery(function() {
jQuery(".blogroll a[href^='http']").each(function() {
jQuery(this).css({
background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
"padding-left": "30px",
"background-size": "20px"
});
});
});
通常であればjQueryは先頭に「＄」が付きますが、WordPressはそれだとエラーになってしまうので、代替文字として「jQuery」を先頭に付けています。
簡単に説明すると、このコードはCSSを自動生成する内容で、ブログロールに登録したURLのファビコンを自動取得し、それを各ブログ名の左側に背景としてセットしなさい、という命令を追加している感じです。
キモは4行目。ブログURLの先頭に「http://g.etfv.co/」を追加する、たったこれだけでファビコンを自動取得できちゃうんです。便利ですよね！
最後はCSSファイルを整える
最後にブログロール全体の見栄えを、自分のCSSファイルを変更することで整えます。
参考までに今回私が設定した内容は、以下の通り。
.blogroll {
font-size: 0.85em;
}
.blogroll a {
color: #333333;
}
.blogroll a:hover {
text-decoration: underline;
color: #0044cc;
}
文字の大きさを他のウィジェットと一緒にして、文字の色とリンク色も統一。これだけ。
ちなみにWordPress管理画面で登録する時、最初からある「ブログロール」にチェックを入れて登録すると、上で指定しているように「blogroll」というHTMLクラスで作成されます。
文字の大きさや色などのデザインも、ご自身のブログに合わせて下さいね。
完成品は、こうなりました
↑というわけでブログロールの完成。この記事を書いている時点では上のようになっています。レスポンシブデザインをまだ勉強してないので、スマホから見られないのが心苦しい。
ブログにファビコンを設定されている方のブログは、左側にオリジナル画像が自動取得され表示されています。ファビコンを設定されていないブログは地球儀のような初期画像が表示されるようです。
ここで一つ、興味深い現象に気付きました。
あかめちゃん（@mk_mizuho）の箇所を見て、オヤ？ と。
↑ご覧の通り、あかめちゃんのブログはキチンとファビコンを設定されてます。にもかかわらず私のブログロールで画像を自動取得できていない。ナゼだろう。
で、調べてみたところ、なんとなくですが原因分かりました。
ファビコンは「favicon.ico」というファイル名の画像で作ることが多く、最後の拡張子は「ico」になってます。私のブログもicoファイルで作成しました。
ちなみにファビコン画像はコチラのサイトなどで簡単に無料作成できます。私は「48×48」のサイズで作成しました。
あかめちゃんのブログでソースを調べさせてもらったところ、ファビコン画像の拡張子が「jpg」になっていました。
このことから想像するに、上の仕組みで自動取得する対象は「拡張子ico」で、jpgファイルは対象になってないのかもしれないですね。なのでブログロールにあかめちゃんのファビコンが表示されてないのかなと。
今回参考にさせて頂いたブログ
ファビコンを自動取得する方法は、セナさん（@onepercentdsgn）のブログで紹介されていました。
大変参考になりました。ありがとうございました。