RSSアイコン(Feedアイコン)を表示する方法 [ホームページ作成] All About

RSSフィードの存在を示す2つの方法

RSSフィードを公開していることを示す「RSSアイコン」（Feedアイコン）には、大きく分けて次の2種類があります。

１．ページ内に掲載したRSSアイコン画像（例：，，）
２．ブラウザのアドレス欄などに表示されるRSSアイコン（例：）

▲ページ内のRSSアイコン

▲アドレス欄のRSSアイコン

前者は、自分でRSSアイコン（画像）を用意してページ内の任意の位置に掲載し、RSSフィードにリンクさせます。何でも自由な画像を使って構いませんし、テキストだけで掲載しても構いません。主に、ページ閲覧者に対して「RSSを公開している」事実を伝えます。

後者は、RSSの存在をブラウザ側が自動的に認識した場合に、アドレス欄の端やツールバー上などに表示されます。アイコンは自分で用意する必要はなく、RSSフィードを示す共通のアイコン（など）が表示されます。クリックすると、フィードが表示されたり、内蔵のRSSリーダ機能などに登録されたりします。

RSSを公開しているなら、できるだけたくさんの人々に気付いてもらえるよう、両方掲載しておくことをお勧めします。

１．ページ内に掲載したRSSアイコン画像

ページ内にRSSアイコン（画像）を表示するには、RSSを示す適当な画像を用意してリンクを作り、リンク先にRSSフィードのURLを指定するだけです。通常の画像リンクとして作れば問題ありません。例えば、以下のように記述します。

<a href="RSSフィードのURL"><img src="アイコンのURL" width="xxx" height="xxx" alt="RSS"></a>

例えば、「」のような画像（横36px×縦14px）を用意し、 RSSフィード「http://allabout.co.jp/gm/gf/1053/library/」へリンクするなら、

<a href="http://allabout.co.jp/gm/gf/1053/library/"><img src="rss.gif" width="36" height="14" alt="RSS" border="0"></a>

……のように記述します。
RSSフィードのURLは、必ずしも「http://」から記述する必要はなく、相対パスなどで記述しても構いません。
上記のソースを表示させると、以下のように見えます。

上記のアイコンは、RSSフィードにリンクしています。

なお、RSSフィードを示すアイコン画像は、様々なウェブサイトで公開されているフリーの画像を使うと良いでしょう。もちろん自分で作成しても構いません。また、この記事で使った「」画像をコピーしてお使い頂いても構いません。

標準的なRSSアイコンは「Feed Icons」で配布されています。また、RSSアイコン画像を簡単に作成できるサービスとして、「RSSアイコン - 無料RSS画像・RSS作成サービス」などのサイトがあります。このような作成サービスを利用すると、好きなデザインで簡単にオリジナルのアイコン画像を作れます。

２．ブラウザのアドレス欄などに表示されるRSSアイコン

最近のブラウザであれば、RSSの存在を自動的に認識して、アドレス欄の端やツールバー上などにRSSフィードの存在を示すアイコン（など）を表示します。

このようにブラウザに自動認識させるには、「RSS Auto-Discovery」という記述をHTMLに加えます。具体的には、HTMLのhead要素内に、以下のように記述します。

<link rel="alternate" type="application/rss+xml" title="(タイトル)" href="(RSSのURL)">

title属性値には、RSSフィードの内容などを簡単に記述しておけば良いでしょう。例えば、タイトルを「新着記事RSS」とし、RSSフィードが「http://allabout.co.jp/gm/gf/1053/library/」で公開されているなら、

<link rel="alternate" type="application/rss+xml" title="新着記事RSS" href="http://allabout.co.jp/gm/gf/1053/library/">

……のように記述します。

なお、複数のRSSフィードを公開している場合は、必要なだけいくらでも列挙できます。

<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="(RSS1.0のURL)">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="(RSS2.0のURL)">
<link rel="alternate" type="application/atom+xml" title="Atom" href="(AtomのURL)">

※RSSフィードではなくAtomフィードの場合は、type属性の値を「application/atom+xml」にします。

各ブラウザで実際に表示させると、以下のような感じになります。