Blogger 最近の記事表示について

う～ん…当ブログはGoogleのBloggerを利用して始めたんですけど最近気になっていたこがありました。

基本的にこのBlogger「最近の記事」表示において、レイアウト＞ページ要素＞ガジェット追加＞フィードに当ブログのAtomを入力して５件までしか表示されないんです。

そこで調べたら、５件以上表示できるちょっと便利なものがあったので紹介します。



FeedBurnerのバズ・ブーストなんですが、このバズブーストはフィードを汎用性のあるHTML形式に変換し、最新記事を１～１５件または全て表示してくれます。

しかもCSSでカスタムも可能と言うことでコレに決めました。（ただ、私はCSSの知識はほとんどありませんけどね）


FeedBurnerとはRSSを作ってくれるサイトですごく便利なサービスがてんこ盛りです。（Bloggerの解説やカスタムで有名なクリボウさんのサイトでも紹介されてます。）


まず、バズ・ブーストを利用するにはFeedBurnerに登録して下さいね。（登録方法については割愛させていただきますね）

そして登録が終わったら、登録したフィードタイトルをクリックして下さい。

そうすると以下のようなメニューがあろと思います。

集客支援をクリックします。


次にサービスの「バズ・ブースト」をクリックして下さい。

さて、続いて設定になります。お好きなように設定してみて下さい。
ちなみにファビコンとはウェブサイトやウェブページに関連付けられたアイコンのことです。ようは、アドレスバーのhttp://の前に表示されるアイコンのことです。


はい、設定終わりましたら一番下の有効ボタンを押してください。
そうしますとコードが表示されますので、それをご自身のブログなりに貼り付ければOKなわけです。



Blogger利用者は

「ウィジェットを使用する」欄に「Blogger」→登録

で一発でページ要素にウィジェットとして追加表示できます。（私の環境では何故かエラーが出て出来なかったのでウィジェット（ガジェット）追加からHTML/Java Scriptにコードをコピペしました。）

はいこれでおしまい。


あと私の場合、バズブーストのコードにCSSを追加してちょっと表示を変えてます。
バズブーストカスタムについては→バズ・ブーストをカスタマイズする方法


私の環境下ではコードの前に<style> ～</style>を追加することで適用出来ました。
まずFeedBurnerのロゴが左寄りだったので上記のリンクを参照したところロゴについては

<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
<img src="http://www.feedburner.com/fb/images/buzzboost-pwrd.gif"alt="Headlines by FeedBurner" /></a></div>

FeedBurnerへリンクされた小さな画像は、各バズブーストの下部に挿入されます。この画像は、 divの中に表示されます。その為、この画像の位置やサイズを自由に変更することが出来ます。

とあるので以下で右寄りに

#creditfooter { float: right; }



そして、シンプルに見せるため改行を禁止してそれ以降を「…」表示にしたいので

<li><span class="headline"><a href="#">First item headline here</a></span><p class="date">Jan 22, 2005</p>

liは、最初のフィード記事を表します。この記事のヘッドラインと日時は、スタイルシートへの情報として伝える為のクラスとして表示されています。ここでもまた、衝突を避ける為に、CSSで”descendant selectors”を利用してください。日時はセットアップ時のあなたの設定により決定されます。

なのですが、先に述べたとおり私はCSS音痴ためとりあえず<li>の部分かなと言うことで

li {
width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

を追加したら意外とうまくいきました。
ただ、上記のwidthに関しては自身のブログのサイドバーサイズなどに調整して下さい。

他にも、カスタム方法は沢山あるので気に入った方は適当にちょしてみてはいかが？