Bloggerデザイン：インデックスページで複数の記事の本文の高さを揃える。そして本文はスクロールによって見る

イントロダクション

Blogger のインデックスページ（トップページ、年アーカイブページ、検索ページ、ラベルページ）で複数の記事を表示した時に、各記事の長さが異なることで、極端にページが長くなったり、極端にページが短くなったりすることがあります。

そこで今回は、インデックスページで複数の記事の本文の高さを揃えてみようと思います。記事の高さを揃えた時に、表示できない部分はスクロールによって表示させます。

コード

以下のコードを Blogger のテンプレートの HTML の編集より、</head> の前に貼り付けます。

<b:if cond='data:blog.pageType == "index"'>
<!-- トップ・年アーカイブ・検索・ラベル ページに適用 -->
<!-- 投稿の高さを制限し、スクロールで後の部分を表示させる -->
    <style type="text/css">
div.post-body {
height: 300px;
overflow-y: scroll;
overflow-x: visible;
}
 </style>
</b:if>

インデックスページを表示した場合に、投稿の本文に対してスタイルシートを適用しています。


このコードにより、トップページ、年アーカイブページ、検索ページ、ラベルページでは、投稿の本文の高さが制限され、本文が制限よりも長い場合には、スクロールにより本文を見るようになります。

なお、月アーカイブページでは、上記のスタイルは適用されません。
月アーカイブページでも上記のスタイルを適用したい場合には、b:if タグを改良する必要があります。

結果

以下のように、インデックスページにて記事の本文の高さを固定とし、表示できない部分はスクロールで表示するようにしています。

インデックスページで本文の高さを固定

投稿単体のページでは、記事の本文の高さは制限されていないため、詳しく本文を読もうと思った場合には、インデックスページから記事単体のページへジャンプしてもらいます。


もしかしたらそのうちデザインを変えるかもしれないので、デザインが変わっているかもしれませんが、このデザインの Blogger のブログは、

Dr.ウーパの日常2

http://upa-life.blogspot.com/

にて、公開中です。