Banguardサイト

「ビジネスマンを応援するブログ」をテーマに、ビジネスに役立つ記事を書いています。

はてなブログでRSSアイコンを設置する方法



f:id:banguard9383:20120219002358j:plain:leftブログをはじめてからずっとわからなかったのが、RSSフィードのアイコンを設置する方法です。
過去に読んできたブログはどれもRSSフィードのアイコンが設置してあり、すぐに登録画面へと進むことができました。このブログでも実装したいなぁと思いながら、いつまでも方法がわかりませんでした。
ところが先日、ようやくその方法が分かったのです。


RSSアイコン設置方法

このブログの右上には、RSSマークのアイコンが設置させれています。クリックしていただくと、RSSフィードの画面へと移ります。そこから、任意のRSSフィードの登録サービス(Google リーダーとか)へ簡単に登録できます。

f:id:banguard9383:20120218234224j:plain


RSS登録のためのアイコン設置方法は、IT女子のお気に入りフォルダさんのブログ記事がとても分かりやすかったので、これからRSSアイコンを設置したい方は一度見てみてください。
 ・ブログ初心者は必見!ブログにRSSを設置する方法|IT女子のお気に入りフォルダ


紹介されているGoogleGoogle FeedBurnerは、設定が簡単なのでおすすめです。すぐにRSSフィードのURLをつくることができます。
何はともあれ、まずはRSSフィードのためのURLをつくっておくことが大事です。

自分の好きなアイコンを設置したい!

ところがここで問題が起きます。
先のブログで紹介されているGoogle FeedBurnerから設定を進めると、自分の好きなRSSイコン画像は使えないのです。せっかくなら自分の気に入ったアイコンを使いたいですよね。

ここでも数日Google先生に聞きまくる日々を過ごしたのですが、わかりやすくRSSアイコンを設定する方法を書いていただいている記事がありました。
 ・フィードボタンの設置方法|にしろぐ


曰く、下記コードを書くことによりRSSアイコンを設置できるとのこと。

<a href="RSSフィードのURL"><img src="画像のURL" 
alt="RSS" width="横幅" height="縦幅" /></a>



少し書かれている内容を補足します。

RSSフィードのURL

本記事のはじめの方で書いた、RSSフィードのURL(Google FeedBurnerの登録を進めると発行してくれます)です。

画像のURL

設置したいRSSアイコンの画像のURLです。RSSアイコンは検索するといろいろ無料で見つかります。参考までに、僕がアイコンを使わせていただいた時に見たまとめサイトをご紹介します。
 ・見ているだけでも楽しくなる、ソーシャルメディア用のフリーのアイコンのまとめ|coliss

ちなみにPCのローカルに保存されている画像は、一度Webにアップロードする必要があります。僕はサーバーとかよくわからないので、とりあえずDropboxにアップロードした画像のURLを使いました。
はてなブログでの画像のアップロード先は、基本的には「はてなフォトライフ」にすることをおすすめします。
 ・RSSアイコンが表示されないので、画像のアップロード先を「はてなフォトライフ」にしたら解決しました

横幅と縦幅

アイコンの大きさをピクセルで指定します。僕は48×48にしています。

アイコンの設置は、はてなブログ管理画面の「デザイン」から

コードの書き方が分かったら、後ははてなブログへ設置して完了です。
設置ははてなブログ管理画面の「デザイン」の項目から設定できます。はてなブログ開発スタッフさんのブログで方法が分かりやすく書いてあります。
 ・「サイドバー編集機能」を追加しました|はてなブログ開発ブログ

応用すると、各ソーシャルメディアのアイコンを設置できます

今回ご紹介したRSSアイコン設置のコードを応用すると、TwitterやFacebookなど各ソーシャルメディアのアイコンなんかも設置できます。
「RSSフィードのURL」に、飛ばしたいページのURLを記載すれば自由自在にアイコンの設定ができますよ。

アイコンを平行して設置する場合は、続けてコードを書けばOKです。

サイドバーを上手く活用して、より見やすくて分かりやすいサイトにしていきたいですね。