ノンアフィ2chまとめブログヘッドラインを表示しよう！

コピペブログや、ノンアフィ2chまとめブログの総合リストをブログに表示する方法について。アフィブログでよく見るあれです。
元となるRSSフィードのリンクはこれ
http://pipes.yahoo.com/pipes/pipe.run?_id=f008b4b1e75cab40cf0709d5cb9524f5&_render=rss
これはYahoo! Pipesというもので10個ほどのブログのフィードを1つにまとめまたものです。
ソース：Pipes: ノンアフィ2chまとめブログヘッドライン。

フィードの中身をサイトに表示する方法はいろいろあるようですが、Feed2JSを使いました。 そして少しコードを追加し、xhtml用に&を&に置換したものがこちら

<div class="matomeheadline">
<h2>ノンアフィ2chまとめブログヘッドライン</h2>
<script charset="UTF-8" language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fpipes.yahoo.com%2Fpipes%2Fpipe.run%3F_id%3Df008b4b1e75cab40cf0709d5cb9524f5%26_render%3Drss&amp;num=25&amp;tz=+9&amp;utf=y&amp;css=feed2js&amp;html=p" type="text/javascript"></script>
<noscript>
<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fpipes.yahoo.com%2Fpipes%2Fpipe.run%3F_id%3Df008b4b1e75cab40cf0709d5cb9524f5%26_render%3Drss&amp;num=25&amp;tz=+9&amp;utf=y&amp;css=feed2js&amp;html=y">View RSS feed</a>
</noscript>
</div>

これをそのまま貼り付けてCSSで整えれば出来上がり…と言いたいところですが、blogger では少し面倒でした。ページ上部はメニュー専用になっているようで、直接テンプレートを編集する必要があります。
管理画面からデザイン→HTMLの編集を選び<div class='main-outer'>の上にこれを挿入してください。するとずらっとリストが表示されると思います。これをCSSで整えます。
デザイン→テンプレートデザイナー→アドバンス→CSSを追加からCSSを追加できます。このサイトの場合はこんな感じ。

div.matomeheadline * {
margin: 0px; 
padding: 0px;
}

div.matomeheadline {
border: 3px solid #B0E0E6;
margin:0 auto;
font-size: 115%;
height: 200px;
width: 900px;
overflow: auto;
text-align: left;
}

div.matomeheadline h2 {
font-size: 100%;
background-color: #B0E0E6;
}

div.matomeheadline li {
list-style-type: none;
padding-top: 4px;
}

div.matomeheadline a:link { color: #0000ff; }
div.matomeheadline a:visited { color: #000080; }
div.matomeheadline a:hover { color: #ff0000; }
div.matomeheadline a:active { color: #ff8000; }

div.matomeheadline a:link以下はリンクの色を変えているだけなので普通は必要ありません。
●変更する場合のポイント
div.matomeheadline {
border: 3px solid #B0E0E6;
　囲む枠の太さと色が変更できます。CSS色見本というサイトがあったので参考に。
font-size: 115%;
height: 200px;
width: 900px;
　文字のサイズと枠の大きさです。サイトごとに適当な数値に変更してください。

div.matomeheadline h2 {
font-size: 100%;
background-color: #B0E0E6;
　見出し（ノンアフィ2chまとめブログヘッドライン）の大きさと、その背景色の設定です。背景色はdiv.matomeheadlineのborderと同じものが良いでしょう。
div.matomeheadline li {
padding-top: 4px;
　リストの間隔を変更できます。文字の大きさによって見やすくなるように設定してください。

ちなみに実際に表示されるリストの部分のソースは、以下のようになっているようです。

<div class="rss-box-feed2js">
 <ul class="rss-items">
 <li class="rss-item"><a href="http://example.com/" class="rss-item">タイトル</a></li>
 </ul>
</div>