【Blogger/QooQ】トップページの一覧に表示される記事のタイトルの長さを固定値とする

どうも。
前回はQooQの記事一覧表示時にサムネイルが無い記事に"no image"等の固定サムネイルを表示させる対応をしてみました。

今回もトップページの些細なカスタマイズです。

記事一覧タイトルの行数を固定

トップページ等に表示される記事タイトルが、長いタイトルの記事の場合、タイトルが複数行に折り返してしまいボックスが下に伸びてしまいます。
短いタイトルの記事（1行で収まる長さ）と列んで表示されるとボックスの高さ不揃いになってしまい、統一感が悪くなります。

cssを編集してタイトル表示を３行分固定した高さに変更して表示される高さを統一します。

css ".list-item-title"の編集
*テーマを変更します。必ずバックアップを取りましょう。
変更は自己責任で行なって下さい。

Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.list-item-titleを探して以下の青字を追加します。

.list-item-title{
 margin-top: .5em;
 font-weight: bold;
 line-height : 20px;<====追加
 height : 60px;<====追加
 overflow:hidden;<====追加
}

保存してトップページを読み込むと、タイトルが3行で表示されています。

各詳細です。

line-height : 20px

フォントサイズ16pxに対して、上下2px の間隔を付けた高さです。
line-height  -  font-size  =font上下の行間
line-height : 20px  -  font-size:16px;  で4pxが均等に上下間隔（上2px、下2px）として割当られます。

height: 60px

表示する高さの固定値です。
今回は3行分の高さをそのまま固定値としました。1行20px　☓　3行 =60pxとなります。

overflow: hidden

上記の設定でタイトルがはみ出す事は無いので必要無いとは思っていますが、一応付けておきます。
はみ出てしまう部分は表示されません。

以上