記事の行間を広くする方法： CSS

ファンブログカスタマイズ：フォント編投稿日：2009年06月30日 15:35

ファンブログ　カスタマイズシンプル系スキン限定

ファンブログはデフォルトの行間設定が狭いので、長文を書きますと非常に読みづらくなります。回避策としまして１行ごとに改行する方法もありますが、記事の修正に伴い改行する位置も変更しなければならないので面倒です。

このようなことをしなくても、スタイルシートで行間設定をしますと、普通に入力するだけで行間隔が空けられるようになります。ただし、この方法で設定しますと、過去の記事にも全て反映されますので、上記のような方法で記事を入力していた場合は、少し間が抜けた感じになってしまいますので、ご注意ください。

記事の行間設定は「スタイルシート」に行の高さを指定する line-height プロパティを追記します。作業をする前に「スタイルシート」のバックアップをとっておいてくださいね。

CSSやHTMLファイルのバックアップの方法

▼　この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼

スタイルシートを開いたら、 /* 記事表示部分 */ という記述を探してください。この項目は最後の方にありますので、後ろから戻ってスクロールすればすぐ見つかります。

この項目の下の方にあります、 #entries .entryBody { という項目を探してください。ここに行の高さを指定するプロパティと値、 line-height: 1.6; を追記してください。

#entries .entryBody {
line-height: 1.6;
　　　　　　　　color: #333;
　　　　　　　　padding: 10px 5px;
}

ただ改行キーで行を空けて追記しますと、行の最初に追記されてしまいます。追記するコツとしましては追記する上の行の最後にカーソルを置いて「改行」し、「Tab」キーを押しますと、きれいに追記ができます。

追記ができましたら、「プレビュー(P)」で確認してください。記事の行間が広くなっていれば成功なので「保存(S)」を押して終了です。

追記した指定値は１番読みやすいといわれています行の高さ「1.6」です。この「1.6」というのはカンタンに説明しますと、文字サイズの60%くらいの行間になるってことです。行間を調整したい場合はこの数字（値）を調整することで変更できますので、いろいろ試してみてくださいね。
※ 記事やコメント欄のデフォルトの行の高さの値は「1.2」です。サイドバーには「1.6」が指定されています。

いかがでしたでしょうか？これだけの作業で記事が読みやすくなりますんで、私のように長文を書かれる方は、試してみる価値はあると思いますよ。

※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

｜　次の記事を読む　≫