なにわっち's Weblog

『週刊エフ』の公式サイトでの公開期間は約１ヶ月間です。毎週火曜日発行といっても、ついうっかり拾い忘れることがよくあります。

「『週刊エフ』のバックナンバーを保管して補完するサイト」があるとはいえ、サーバーのキャパシティを考えますと、最新号はなるべく公式サイトから拾ってほしいのが本音だったりします。そこで、拾い忘れ抑止のために拙作のRSSフィードを発行しているのですが、非ブロガーのRSSリーダーの普及率は決して高くありませんし、RSSリーダーのチェックを忘れてしまっては元も子もないわけでございまして、ホームページやブログ上に更新情報を表示する方法を用意してみました。

拙作RSSを配信しているFeedBurnerにはバズブーストという機能があって、RSSファイルの内容をHTMLに書き出して表示させることができます。せっかくの機能なので、これを誰でも使えるように、以下に簡単なマニュアルを記しておきます。

右のサンプルは、「『週刊エフ』のバックナンバーを保管して補完するサイト」にも掲載されているサンプルコードを、そのまま貼り付けたものです。

▼サンプルコード

とりあえず、このサンプルコードをコピーして、（ブログテンプレートなどの）表示させたい部分に貼り付けると、『週刊エフ』の更新情報を表示させることができます。

ただ、それでは味気ないので、カスタマイズをしましょう。

サイズや配色はCSSを使って変更することができます。コードの冒頭の <div> タグ内にスタイルを設定するだけです。よく分からない人は、widthとheightの数値を変えるだけでも十分に使えます。

サンプルでは、標準準拠モードで、横180px、縦360px、枠幅1px、枠色#666666、前面色#000000、背景色#fcfcfcとなるように最適化しています。

貼り付けるページのデザインにあわせて、スタイルを添削して下さい。サイドメニューとしてのみではなく、横長のバナーにして貼り付けることも可能です。

ソースをお好みのデザインに最適化できましたら、それを（ブログのテンプレートなどの）表示させたい部分に貼り付けましょう（一部、HTMLソースの編集や<script>タグの挿入ができないブログサービスでは、お使い頂けない場合があります）。

作業終了後は、狙い通りにちゃんと表示されているか、確認しましょう。

ここからは、もっと細かく弄りたい人向けの情報です。

以下に、プットアウトされるHTMLコードの構造を示しますので、ここから該当するidおよびclassを見つけ出して、外部スタイルシートにプロパティを加筆すれば、さらに細かくセットアップすることができます。

外部スタイルシートを使うことで、題字を強調したり、フォントのサイズを変えたり、画像を消したり、設定次第で様々なデザインが実現できるはずです。

右のサンプルは、idとclassを用いたカスタマイズの例です。１つ目のサンプルと同じく標準準拠モードで幅180pxになるように最適化しています。

▼サンプルコード2 （HTML）

▼サンプルコード2 （CSS）

縦長で表示するには、このように <ul> <li> の見映えを整理しておいた方が見やすくなりますね。

• 『週刊エフ』のバックナンバーを保管して補完するサイト ［FEED］