今回はファビコンではなくTwitterアイコンを表示します
先日、各ブログのファビコンを自動取得するWebサービスを利用してブログロール作成する方法をエントリーに書きました。
しかし、ファビコンが取得できず、初期画像である地球儀みたいなのが延々と表示される場合があり、いろいろ調べたものの原因は判りませんでした。
せっかく紹介させて頂いてるのに画像が出ないのは申し訳ないという気持ちになったので、今回オーソドックスにTwitter画像をお借りしてブログロールに表示させる方法で作り直してみました。今回はその方法を紹介します。
ファビコン表示ブログロールを作成済みの方は事前作業を
今回初めてブログロールを作成する方は、ココを飛ばして「手順1：」にお進み下さい。
以前に「ファビコン表示ブログロール」を作成済みの方は、ファビコンを自動取得する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コードを同じファイルに書いてる方は一緒に消さないよう注意して下さいね。
「せっかく作ったコードだし、憶えておきたいから取っておきたい」という方は、削除せずに「コメント化」することで処理させないようにすることも出来ます。
コメント化はカンタン。すべての行の先頭にスラッシュ2つ「//」を書いてあげるだけでOK。
//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"
// });
// });
//});
↑これで処理されなくなります。アップロードをお忘れなく。
手順1：表示させたい画像をサイズ縮小する
ブログロールに表示させたい画像を自分のPC環境に保存します。できれば正方形か、それに近い形の画像が後々ラクでいいと思います。
PCのどこかにテキトーなフォルダを作成し、そこに収集した画像をジャンジャン保存。それを一括してサイズ縮小させます。
私は「縮小専用AIR」というソフトを使用していつもサイズ縮小してます。WindowsにもMacにも対応しています。
他に何か画像圧縮ソフトをお使いの方は、それでも構いません。画像を「幅20px、高さ20px」に縮小します。今回は「縮小専用AIR」を使った方法で解説しますね。
↑画像サイズを「カスタム」、値を「幅20・高さ20」と入力し、あとは画像を全部まとめてドラッグ＆ドロップするだけ。これで縮小された画像の出来あがり。
手順2：画像をリネームする
縮小された画像をすべてリネームします。「画像の名前を変更」ですね。
「縮小専用AIR」を使った場合、縮小されたファイルの拡張子はすべて「.jpg」になってるはずです。他のソフトで圧縮した場合は、拡張子をすべて統一させておいた方が管理しやすくなります。イヤダって人はそのままでもいいです。
Twitterアイコンの場合、いろーんな画像名称になってるはずです。「Twitter.jpg」だったり「rikuma.jpg」だったり「onakasuita.jpg」だったり、保存した人によって異なります。
これを規則性のある名前に変更していきます。
私の場合は「01.jpg」「02.jpg」というように、2ケタの数値ですべてリネームしていきました。他にTwitterのIDを使ってもイイし、後で管理しやすい名前であればお好みで構いません。
↑私の場合はこんな風になりました。
手順3：画像をアップロードする
FTPソフトを使ってご自身のブログがあるサーバーに画像をすべてアップロードします。
私は「wp-content/uploads」というディレクトリの中に「blogroll_img」という新ディレクトリを作成し、その中に画像をアップロードさせました。
ここに保存しておくことで、仮に将来新しいテーマを使うことになった場合も設定を変えず指定することが出来るからです。
↑こんな感じ。
手順4：WordPress管理画面でリンク登録する
リンク情報を管理画面で登録します。以前にファビコンのブログロールを作成済みの方は「画像情報を追加する」だけでOKですが、初めて作成する人のために最初から解説します。
WordPress管理画面の「リンク」＞「新規追加」でリンクの作成画面に移動します。
↑ブログ名とトップページのURLを入力。
↑カテゴリー欄の「ブログロール」にチェックを入れます。
↑リンクターゲット欄はお好みで。クリックしたブログを別ウィンドウや別タブで表示させたい時は、一番上の「_blank」にチェックを入れて下さい。同じウィンドウやタブでいいや、って人は何も指定しなくてOK。
ここまではファビコン表示ブログロールの時と同じ。
↑ブログロールで画像を表示させる時は、詳細欄の「画像のアドレス」というところに、画像のアドレスを指定してあげる必要があります。
http://お使いのドメイン/wp-content/uploads/blogroll_img/画像ファイル名
「お使いのドメイン」はご自身のブログドメイン。私の場合は「rikumalog.com」です。画像ファイル名は「01.jpg」などの対応した画像ファイル名を指定します。
もしも画像を変更したい時などは、上記の設定にしておけば画像を差し替えるだけで済みます。（同じ画像名にする必要あり）
これで入力は完了。画面右上にある「リンクを更新」をクリックして情報を保存して下さい。
↑紹介したいブログをジャンジャン登録していきます。
手順5：ウィジェットの指定
リンク情報の登録が完了したら、次はウィジェットの指定です。
WordPress管理画面の「外観」＞「ウィジェット」でウィジェット登録画面に移動します。
↑「利用できるウィジェット」の中に「リンク」というウィジェットがありますので、それを表示させたい位置にドラッグ＆ドロップします。私の場合は「右サイドバー」。
ドロップするとウィジェットがポニョンと展開されます。下のような感じ。
↑「リンクカテゴリーの選択」は「ブログロール」になってることを確認。「リンクの画像を表示」と「リンクの名前を表示」にチェックを入れて下さい。
ファビコン表示ブログロールを作成済みの方は、「リンクの名前を表示」のみにチェックが入ってるかもしれません。「リンクの画像を表示」のチェックをお忘れなく。
設定が完了したら「保存」をクリック。
これでブログにはブログロールが表示されているはずですが、まだ表示がおかしいと思いますので、最後はCSSで微調整します。
手順6：CSSで表示を微調整する
WordPressの「style.css」で、ブログロールに関するスタイルシートを追加します。ファビコン表示ブログロールを作成済みの方は修正になりますね。
.blogroll {
font-size: 0.85em;
}
.blogroll a {
color: #333333;
}
.blogroll a:hover {
text-decoration: underline;
color: #0044cc;
}
.blogroll a img {
background: left center no-repeat;
background-size: 20px;
}
1～3行目は文字の大きさ指定。4～6行目は文字色の指定。8～11行目は文字をマウスオーバーした時の装飾指定。これらはお好みで変更して下さい。
12～15行目が画像に関する指定になります。ファビコン表示ブログロールの時はjQueryでスタイルシートを指定してましたが、今回はCSSで直接指定します。
これで作業は完了です
↑というわけで、こんな感じの新ブログロールが完成しました。
ファビコン表示ブログロールの時と違って、やっぱりコチラの方が「紹介できてるっ！」という感じがして私は気に入っています。