コメントの行間やフォントサイズを変更する方法： CSS

ファンブログカスタマイズ：フォント編投稿日：2009年07月03日 00:50

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

記事の行間を広くしたり、フォントサイズを大きくして入力に慣れてきますと、コメントの行間やフォントサイズがとても気になるようになります。

そこで、今回はスタイルシートでコメントも記事と同じ設定にする方法を説明します。

この設定は「スタイルシート」に行間設定やフォントサイズの指定タグを追記します。作業をする前に「スタイルシート」のバックアップをとっておいてくださいね。

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

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

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

この項目の下の方にあります、.comment_layer { という項目を探してください。そこに設定タグである
font-size: 15px; と line-height: 1.6; を追記してください。

.comment_layer {
　　　　　　　　font-size: 15px;
　　　　　　　　line-height: 1.6;
}

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

※コメントの画面は「プレビュー（P）」では確認できませんので、記述に間違いがないかよく確認して「保存(S)」を押してください。「自分のブログを確認する」を押して、書き込みがあるコメント画面を開いてください。コメントが指定どおり変更されていれば成功です。

フォントサイズは変更しないで、行間だけ広げたい方は line-height: 1.6; のみ追記してください。
調整方法は前回と同じなので、わからない方は記事の行間、フォントサイズの指定の記事をご覧ください。

いかがでしたでしょうか？記事と同じ設定にすれば見た目もよくなりますし、コメントを書き込みする方も気持ちよく入力できます。こだわり派の方は試してみる価値はあると思いますよ。