Bloggerのカスタマイズ

Bloggerでブログを始めて１年が過ぎた。
このブログシステムの広告がない、シンプルなスタイルがいい。
それと簡単なカスタマイズや、CSSを使ったカスタマイズもできる。
このブログも少しカスタマイズをしている。

CSSを使わない簡単なカスタマイズは「幅の調整」「Navbarの非表示」「背景色の変更」などだが、
行間の変更はCSSを使っている。
一つは本文の行間である。
初期設定では記事の本文の行間が詰まり過ぎて読みにくいので、もう少し行間を広げてみた。
これは「line-height」を使えばできる。
テンプレート デザイナーでCSSを使って「line-height」を追加してみる。

テンプレート デザイナーの カスタムCSS

Bloggerのダッシュボードから「テンプレート」→「上級者向け」→「CSSを追加」と開くと、
上の画像のようにCSSの追加ボックスが現れる。
ここに

.post-body {
 line-height: 1.7;
}

と追加すればいい。

このブログは「1.7」を指定しているが、このバランスが良さそうである。

この数字を大きくすれば行間が広がる。

もう一つは、ラベルなどのウジェットの行間が空きすぎていることである。
「最近の記事」の行間がそれである。
このブログでは「ラベル」にラベルウジェットを使っているが、項目も増えてきて、
初期設定の広い行間では間延びするので、もう少し行間を詰めたい。
けれど、このウジェットはリスト形式なので「line-height」では行間を変えられない。
リスト形式の行間を変えるには「margin-bottom」を使う。

同じく「CSSを追加」を開いて

#Label2 li {
margin-bottom: -12px;
}

と追加すればいい。

このブログは「-12px」を指定しているが、このように行間を狭める場合はマイナス値で指定すればいい。

HTMLの編集

「Label2」というのが「ラベル」のIDだが、
これは「テンプレート」→「HTMLの編集」→「ウジェットへの移動」を選ぶとウジェットの一覧が表示されるので、
そこから名前を知ることができる。
例えばラベルウジェットの場合は「Label1」「Label2」と表示されている。

このように、CSSの追加を使えば元へ戻すことも簡単なので、HTMLを直接修正するよりも安全で便利ある。