[Blogger]Vaster2のサイドバーに新しい記事（最新の記事）を設置しましたver.2

目次

• 新しい記事を表示するガジェットを変えました
• コピペでOK
  • 変更した箇所
• スニペット（要約）はいらない
• 最後に

新しい記事を表示するガジェットを変えました

以前のガジェットは記事に画像がない場合、画像を表示しない（空白のまま？）という仕様のようでした。

できれば画像がない場合でも画像（NO-Imageなど）を表示したいと思っていたので、新しいガジェットに変更しました。

コピペでOK

このサイトの 2. Recent Post Widget with Thumbnailのコードをもとにしました

設置方法はレイアウト==>saidbar-sectionにHTML/Javascriptのガジェットを追加して、上記のコードをコピペ。 表示したい数をvar numfeed = “5”の数字の部分で設定

http://blogornate.blogspot.com/の部分を自分のブログのアドレスに変更（.comでも.jpでも動きました）

これで表示自体はされますが、少しレイアウトが崩れたのでコードを少し変更しました。

変更した箇所

.recentposareaのなかのheightの数値を79から88に、新規にoverflow:hidden;を追加しました

.recentposarea{display:block;background:#fff;height:88px;border:1px solid #ddd;margin:5px 0;padding:10px; overflow: hidden;}

実際にブログを表示したところ、記事のスニペット（要約)がはみ出したので 、overflow:hidden;を追加しました。

height（高さ）の数値は、なんとなく収まりがいいような数値にしました。

スニペット（要約）はいらない

また、.recentposarea p にdisplay:none;を追加で記述すれば、スニペット（要約）が表示されなくなります。

.recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal; display:none;}

.recentposarea pの部分を丸ごと削除してもいいかもしれません。

最後に

設置自体はほぼコピペでOKでした。

参考サイトには、このようなwidgetのほかにもさまざまあり、アイデアが刺激されます。