記事のフォントサイズを大きくする方法： CSS

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

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

今回は、前回の記事の行間を広くする方法で行間設定をした後に、フォントサイズを大きくしてさらに読みやすくする方法です。通常フォントサイズを大きくする場合、ファンブログ付属の <大> を使って文字を大きくしますが、投稿のたびに <大> で囲むのも面倒です。

このようなことをしなくても、スタイルシートでフォントサイズの指定をしますと、普通に入力するだけで指定したフォントサイズで記事が書けるようになります。ただし、この方法で指定しますと、過去の記事にも全て反映されますので、フォントサイズが大きくなることで過去記事のレイアウトが崩れる場合があります。

ファンブログ付属の <大> で文章を囲むと元のフォントサイズの1.25倍になります。ファンブログの元のフォントサイズは 12px なので、 15px のフォントサイズに拡大されていることになります。今回の方法でフォントサイズを 15px に変更した場合、過去記事でこの <大> で囲まれているフォントサイズは、15px の1.25倍で、約 19px の大きさに拡大されてしまうことになりますので、ご注意ください。

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

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

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

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

この項目の下の方にあります、#entries .entryBody { という項目を探してください。ここにフォントサイズを指定するタグである font-size: 15px; を追記してください。

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

※ line-height: 1.6; は前回の行間設定で追記したものです、通常は記載されておりません。

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

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

追記した指定方法は「%」でなく「px」指定です。記事のフォントサイズなんかは、この「px」の前の数字を調整した方がわかりやすいので、こちらの指定方法にしました。
フォントサイズはこの数字を調整すれば変更できますので、いろいろ試してみてください。
※元のフォントサイズは「12px」です。12pxを指定しますと追記する前と同じサイズになってしまいます。

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