Bloggerの人気の投稿ガジェットで記事をきれいに並べる方法

  • 投稿 : 2013-02-24
  • 更新 : 2013-05-13

記事一覧表示されますが、各記事の高さが一定でないと、(日本人の感覚では?)きれいに見えないなと思ってました。

#PopularPosts1 .item-content{
 height:79px;
 overflow:hidden;
}
CSSに上記の様なものを追加すれば、高さが79pxに統一され、はみ出た部分は見えなく(hidden)してくれます。

あと、サムネイルがつかない記事にもダミーのサムネイルを付ける方法もあります。それは以下の記事を参考にしてください。
参考記事:Bloggerの人気の投稿ガジェットでサムネイルがつかない問題の解決方法


きれいにそろわない理由は
1.サムネイルがある記事とない記事がある
2.記事タイトルの長さが記事によって違う
3.抜粋も文字数は同じだと思われるが、英数字などの半角が混ざると長さが変わる
4.サムネイルと文字の部分のバランスが悪い
このあたりだと思います。

高さを一定にして、はみ出た部分を隠せばよいというのが思いつかずに悩んでいただけというお話です。このテクニックは、よくつかわれるみたいです。


参考になる記事

[Blogger]標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法! - Sunabox
[Blogger]人気の投稿ガジェットのスタイルを変更する!・・・その2。サムネイル画像だけの表示にする編。 - Sunabox

スポンサーリンク