Scroll RSS Icon - スクロールに連動するRSSアイコンの作り方

2007年6月29日(金) 09:15

Scroll RSS Icon
RSSフィードを訴求することで、リピートユーザーの確保につながります。ブラウザでもRSSリンクの認識をしてくれますが、さらにコンテンツにアイコンなどを設置すると効果的です。RSSアイコンをブラウザのスクロールに連動するようにして、訴求効果を高めてみます。

スクロール部分のJavaScriptにはwrapScroll.jsを利用します。HTMLの構成はサイトによって異なるので、解説だけではわからない部分などwrapScrollのドキュメントを参考にしてください。

アイコンとHTML記述
アイコン画像を用意できたら、アイコンを表示するHTML記述をします。

<div id="rss_icon">
<a href="/index.xml" title="RSS"><img src="/images/rss_icon.png" /></a>
</div>

JavaScriptの記述
HTMLヘッダでwrapscroll.jsを読み込むようにします。次に、前述した<div id="rss_icon">がスクロールに連動して移動する際の設定を行います。

<script type="text/javascript" src="/scripts/wrapscroll.js"></script>
<script type="text/javascript">
   var rss_icon = new wrapScroll('rss_icon','wrap','static');
   rss_icon.marginTop = 10;
</script>

rss_icon.marginTop=10;と記述すると、上部にマージンを10px指定することが出来ます。スクロールされた場合にもウインドウの上部から10pxマージンが確保されます。

RSSアイコンの例として紹介しましたが、その他のコンテンツでも同様に利用することができます。動作するコンテンツはユーザの目に止まりやすくなるので、ナビゲーションなどに利用するとユーザビリティ向上が見込めます。

さくらインターネット