(仮)WEB活用クリエイティブ -3ページ目

アメブロのフォントを大きくして読みやすくしよう!

20110704

記事も書かずにカスタマイズを重ねちゃっているのでそろそろ記事化していきます。

今回は、ウェブで文章を書くときに注意するべきフォントサイズのお話です。

アメブロはデフォルトのフォントが12pxだったかな?

なんせ読むには少し小さいんですね。


このブログの文字サイズは既に少し大きくして14pxに変更しています。

そうなると、12pxは本当に小さかったのか!?と気になります。

そこでサンプルを作ってみました。


02



では早速、文字サイズの変更方法を見ていきましょう。



管理画面から[ブログを書く]のタブを押す。
[デザインの変更]を押して、[CSSの編集]を押す。

そして「/*■■■基本設定 - ブログデザイン基本設定*/」を見つけてください。
その後、"font-size:○○px"の○○部分を変更します。


/*■■■基本設定 - ブログデザイン基本設定*/
/*■タグ初期化 - 基本設定 - ブログデザイン基本設定*/
html {
font-size:14px !important; /*文字サイズを14pxに指定*/
*font-size:75% !important;/*forIE6IE7*/
}


この変更は html タグ全てに適用されるので、期待していない部分のフォントも大きくなる場合があります。

このブログではフッター部分(ブログ下部)の広告文字まで大きくなってしまったので、追加で広告部分の文字サイズは小さくします。



#ameblo {
font-size:10px;/*文字サイズを10pxに指定*/
}


さらに、サイドバー部分の文字も大きくなってしまったので、追加でサイドバー部の文字サイズを小さくします。
まず「/*■■■■■■■■■■■ カラムタイプ ■■■■■■■■■■*/」を見つけてください。



#sub_a{
font-size:10px;/* サイドバーのフォントサイズを指定 */
}


今回は「10px」に指定しています。

記事部分の文字サイズだけを小さくする方法があればそちらのほうが変更箇所が少なくて簡単かもしれませんね。
本ブログは現状この設定です。また変更したらお知らせします!!

記事担当:み