どうも。
北の方面が緊張感たっぷりですが、どうなるのでしょうか。
さて、我がBloggerのトップページにもう少し手を加えてみたいと思います。
タイトルが1行で収まる記事と一緒に表示されるとボックスの高さがバラバラになってしまいます。
閲覧してもらう為には、タイトルで魅力的な物を作る事も大事なので全て表示させる方が良いと思っていますが…
長いタイトルの記事を作る事もそれ程は無いのかと思い、ならば見栄え優先で3行固定にして記事ボックスの高さを統一します。
各詳細です。
line-height - font-size =font上下の行間
line-height : 24px - font-size:20px; で4pxが均等に上下間隔（上2px、下2px）として割当られます。
今回は3行分の高さをそのまま固定値としました。1行24px ☓ 3行 =72pxとなります。
保存してトップページを読み込むと、タイトルが3行で表示されます。
コレが一般的なのかわかりません…が、1行の記事と統一感はでました。
4行キッチリ表示させたいので、ハミ出し部分を表示しないように.snippetの最後にoverflow:hidden; を追加します。
ちなみにVaster2ではスニペットは4行に固定されています。
今回は変更するつもりはありませんが、変更が必要な場合は、.snippet内の-webkit-line-clamp: 4;の数値が行数になりますので、値を変えるだけになります。
コレでトップページ記事一覧についてはOKとしましょう。素人ながら良いのでは？
次は、サイドバーに表示されるガジェットの補正を別途やります。
北の方面が緊張感たっぷりですが、どうなるのでしょうか。
さて、我がBloggerのトップページにもう少し手を加えてみたいと思います。
記事一覧タイトルの行数を固定
トップページで表示される記事一覧のタイトルですが、長いタイトルを入れてしまうと全て表示されてしまい、記事一覧ボックスの高さが高くなってしまいます。タイトルが1行で収まる記事と一緒に表示されるとボックスの高さがバラバラになってしまいます。
 |
| 上が長めのタイトル 下が短めのタイトル |
長いタイトルの記事を作る事もそれ程は無いのかと思い、ならば見栄え優先で3行固定にして記事ボックスの高さを統一します。
.article-list-title h2の編集
cssを編集するので、Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.article-list-title h2を探してcolor:#666; 以下を変更、追加します。
.article-list-title h2{
color:#666;
font-size:20px;<====変更
line-height : 24px;<====追加
height : 72px;<====追加
overflow:hidden;<====追加
}
color:#666;
font-size:20px;<====変更
line-height : 24px;<====追加
height : 72px;<====追加
overflow:hidden;<====追加
}
各詳細です。
font-size:20px;
フォントサイズを少し小さくしました。line-height : 24px;
フォントに対して上下2px の間隔を付けた高さです。line-height - font-size =font上下の行間
line-height : 24px - font-size:20px; で4pxが均等に上下間隔（上2px、下2px）として割当られます。
height : 72px;
表示する高さの固定値です。今回は3行分の高さをそのまま固定値としました。1行24px ☓ 3行 =72pxとなります。
overflow:hidden;
上記の設定でははみ出す事は無いので必要無いですが、heiteを変えた場合等は行がはみ出て表示される可能性がありますので、一応付け足して起きます。保存してトップページを読み込むと、タイトルが3行で表示されます。
コレが一般的なのかわかりません…が、1行の記事と統一感はでました。
スニペットのハミ出しを補正
上の画像を見るとスニペットの4行目以降がハミ出しています。4行キッチリ表示させたいので、ハミ出し部分を表示しないように.snippetの最後にoverflow:hidden; を追加します。
.snippet{
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow:hidden; <====追加
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow:hidden; <====追加
}
保存してトップページを読み込むとハミ出していた部分が解消されます。
ちなみにVaster2ではスニペットは4行に固定されています。
今回は変更するつもりはありませんが、変更が必要な場合は、.snippet内の-webkit-line-clamp: 4;の数値が行数になりますので、値を変えるだけになります。
コレでトップページ記事一覧についてはOKとしましょう。素人ながら良いのでは？
次は、サイドバーに表示されるガジェットの補正を別途やります。
