2011年01月24日

【第43回】ブログ全体の文字サイズを変更する

前回、ブログの文字のサイズは、定義の方法によってはブラウザの表示設定次第で大きさが変わるというお話をしました。

そこで今回からは、ブラウザの表示設定に依存しない文字サイズの設定を行っていきたいとおもいます。

今回は、ブログ全体の文字サイズの変更を行ってみましょう。

ブログ全体というのは、ここでは個別に文字サイズの定義がされていない箇所全体のことを指します。
テンプレートによってその範囲は異なってきますが、このブログで使用しているこねこ(左サイドバー)テンプレートを前提とします。

CSSの変更箇所と、その影響範囲の参考にして下さい。

★ブログ全体の文字サイズを変更する方法★

body要素のfont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
body {font-family:"MS Pゴシック";font-size:small;}

▼▼▼ 変更後 ▼▼▼
body {font-family:"MS Pゴシック";font-size:13px;}

bodyというのはHTMLのbody要素のことを指し、要するにブログの表示部分全体のことです。

このbodyのfont-sizeを変更することによって、個別にfont-sizeが定義されている箇所以外はすべて文字サイズが変更されます。

▼▼▼ 変更前 ▼▼▼
SD_043_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_043_02.jpg

ご覧のように、今回の修正で変更された箇所は以下の通りです。

  ●ブログのタイトル説明文
  ●ブログ記事の遷移リンク
  ●サイドバーのタイトル
  ●記事本文
  ●コメント欄

逆に言うと、これらの箇所の文字サイズは全てbody要素のfont-sizeで定義されているため、例えばコメント欄の文字のみを小さくする場合には、別途新たな定義付けが必要となります。

その新たな定義付けについては機会があればご紹介するとして、今回の修正は以上になります。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。