記事本文の行間

こんにちは。
アメブロ簡単カスタマイズの松田です。

前回、前々回の記事で記事エリアの文字の大きさとテキストカラーについて書きました。
続いては記事本文の行間設定です。

行間設定は記事エリアのみならずサイドバーにも応用が効きますので、例えば読者一覧やお気に入りブログ一覧などに行間設定を施すとリストがすっきり見やすくなります。

行間はCSSの「line-height」という要素で設定します。
以下の3つサンプルを見比べてみてください。

■　line-height:1.0の場合

昔々あるところにおじいさんとおばあさんが住んでいました。
ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。
おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。

おばあさんはその桃を拾い上げ、家に持って帰りました。
おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。
「よし、この子は桃から生まれたから桃太郎と名付けよう」

■　line-height:1.5の場合（標準仕様）

昔々あるところにおじいさんとおばあさんが住んでいました。
ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。
おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。

おばあさんはその桃を拾い上げ、家に持って帰りました。
おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。
「よし、この子は桃から生まれたから桃太郎と名付けよう」

■　line-height:2.0の場合

昔々あるところにおじいさんとおばあさんが住んでいました。
ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。
おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。

おばあさんはその桃を拾い上げ、家に持って帰りました。
おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。
「よし、この子は桃から生まれたから桃太郎と名付けよう」

どうでしょうか。
見比べてみると標準仕様の「line-height:1.5」でも少し行間が詰まって見えると思います。
ちなみにこのブログは1.8に設定しています。

前回記事の文字の大きさを設定するCSSと組み合わせて以下のソースをCSSに追加すると行間設定ができます。

.articleText,.subContents {
font-size:14px;
line-height:1.8;
}