ファンブログ カスタマイズ　ぽあろの休日

　普段は、あまり気にしないフォントサイズ。
　しかし、読み手はかなり気にするのではないでしょうか？
　何事も第一印象が大事ですから、ブログを開いた時の
　イメージを大切にしたいものです。

　今回は、そんなフォントサイズ関連のカスタマイズです。

１．フォントサイズ・行間が与える影響

　ブログをパッと開いたとき、どちらのブログを読んでみようと思いますか？



　




　私なら、左を読みます。理由は右より読みやすそうだからです。
　内容により、読みやすさは違ってくるかもしれません。
　しかし、導入部における訴求力は明らかに左の方が強いです。

　以前、「人は見た目が9割」という本が話題になったように、ブログも見た目、
　第一印象で読む・読まないを決めてしまうことがよくあるのではないでしょうか？
　（この本、未読なので、ここで引用するのは間違ってるかもしれませんが）






　実は私が始めにカスタマイズしたのは、タイトルロゴではなく
　この文字のフォントサイズでした。
　このブログを始める以前にも、多くのブログを見て回っていたのですが、
　ファンブログは明らかにデフォルトの文字サイズがちょっと小さいです。

　文字が小さいことは、１行・１ページに多くの情報を詰め込むことができますが、
　それを読むのは訪問してくれる方です。
　多くの人にブログを読んでもらいたいと意図する場合、その読み手に対して、
　読みやすい環境を提供する必要があります。
　いくらタイトルで検索結果から誘導しても、これでは意味がありません。


　【関連リンク】 タイトル設定を変更して、もっと記事をアピールしよう 　


　以上の点を考慮すると、このフォントサイズの変更は、一孝に値するカスタマイズだと
　私は感じます。
　今回は、フォントサイズと合わせて、行と行の幅である行間も設定して、
　更なる読みやすさを追求してみましょう。

２．フォントサイズ・行間のサンプル

　ここでは、実際にフォントサイズと行間の設定サンプルを紹介します。
　フォントサイズ（font-size)はpx指定です。
　行間はline-heightで設定しています

フォントサイズ／ 行間	サンプル例	備考
10px／1.0	ファンブログ　カスタマイズ ぽあろの休日
12px／1.2	ファンブログ　カスタマイズ ぽあろの休日	多分、ファンブログのデフォルト設定
13px／1.4	ファンブログ　カスタマイズ ぽあろの休日	本ブログの設定です
14px／1.6	ファンブログ　カスタマイズ ぽあろの休日

　どうでしょう？　結構印象が違いますよね。
　これ以外にも、色々設定を変更してみて、自分のブログに合った設定を
　見つけてみてください。

３．フォントサイズを変えてみよう

　では、実際に設定を反映させてみましょう。
　今回は、文字装飾に関係するカスタマイズなので、スタイルシートを修正します。
　が、まずはじめにどのCSSを修正したら良いのかを調べなければいけません。


　１） 変更したいテンプレートから、該当箇所を見つける
　　いきなりちょっと難しいかもしれませんが、以前紹介したファンブログの
　　オリジナルタグを調べると、解りやすいと思います。


　　【関連記事】 ファンブログで使えるタグを確認しよう


　　これは、使用しているスキンによって違うかもしれないので、一概には言えないのですが、
　　例えば、日付のフォントサイズを変えたいとします。
　　オリジナルタグを見てみると、日付のタグは{$BlogEntryDate$}というタグです。
　　そのタグでテンプレートを検索してみてください。
　　すると以下のようなコードが見つかると思います。

 
	

		
{$BlogEntryDateformat="%Y年%m月0日" language="jp"$}
		
{$BlogEntryTitle$}
	

　　これを見ると、divタグに書かれている、entryDateというCSSが設定されていることが
　　解ります。（CSSの設定は、class = "" もしくは、id =　""となっています）

　　ちなみにその下のentryTitleは記事タイトルの設定ですね。


　２） 使用されているCSSを把握・修正する
　　次にスタイルシート上で、そのCSSが設定されているところを見てみましょう。
　　１）の日付の場合はここですね。（コメントは私が入れたものです）

 
/* 記事の日付 */
#entries .entryDate {
	font-size:13px;			/* フォントサイズ */
	color: #333;			/* 色　*/
	font-weight: bold;		/* 太字　*/
}

/* 記事タイトル部分 */
#entries h2.entryTitle {
	font-size:18px;
}

　　このfont-sizeの13pxを変えれば、日付のフォントサイズが変わります。
　　もうお気付きとは思いますが、色や太字の設定もここでしてますね。
　　色々試してみてください。

　　後、本文のフォントサイズについては、どこにも設定されていないかもしれません。
　　私の場合は、bodyに以下のように設定しています。

 
body {
	background: #423e30;
	font-size: 13px;				/* フォントサイズ */
	color:#444;
	margin:0;
	padding:0;
}

４．行間を変えてみよう

　次に記事本文の行間の設定を変えてみます。
　これも、現状設定されていないかもしれないので、ここでは私の修正内容を紹介します。

　こんな感じでスタイルシートを設定してます。

 
#entries .entryBody {
	line-height: 1.4;		/* 行間の設定 */
	color: #333;
	margin: 25px 25px 10px 25px;
}

５．フォントサイズを変えるデメリット

　最後にフォントサイズを変更するデメリットについて、簡単に説明しておきます。

　一文を改行することなく、ブログにより自動改行をさせている場合は、
　そんなに影響はありません。

　しかし、私のように文言、読点毎に自分で改行をうっている場合は、ちょっと大変です。
　フォントサイズを変更することによって、本文の改行位置がずれてしまうからです。



　



　記事本数が少ない場合はまだ良いのですが、これが百本単位で記事がある場合、
　修正するだけでも一苦労です。

　フォントサイズを変えたいと思っている方は、なるべく早く実行することをお勧めします。


以上、フォントサイズ・行間の変更についての解説でした。
もし、スタイルシートのどこを変更して良いか解らない、という方は、
気軽にコメントしてくださいね。





【スポンサード リンク】