2010年12月13日

【第4回】サイドバーの文字を小さくする

今回は、左サイドバーの本文文字の大きさを変えてみましょう。

現在、このブログの左サイドバーの本文文字は、デフォルト設定で記事本文の文字と大きさが同じになっています。

これはこれで良いのですが、個人的には、サイドバーは記事よりも幅も狭いですし、もう少し小さい文字の方がいいと感じています。

ということで、今回は左サイドバーの本文の文字を小さくしてみましょう。


さて、まずは第2回でご説明したCSS変更画面を開いて下さい。

このCSSの中で、左サイドバーの本文を規定しているセレクタのプロパティを変更することになります。
左サイドバーの本文を規定しているのは、.sideクラスです。

ところが、こねこ(左サイドバー)テンプレートでは、この.sideクラスの中に、フォントの大きさを指定するプロパティ(font-size)がありません。
つまり、左サイドバーの文字の大きさは定義されていないのです。

これはどういうことかというと、スタイルの継承にあたります。
個々のセレクタでプロパティが設定されていない場合、より上位のセレクタのプロパティが適用されるのです。
これをスタイルの継承と言います。

具体的に言うと、こねこ(左サイドバー)テンプレートの左サイドバーの文字の大きさは、より上位のbody要素のスタイルが継承され、適用されているのです。

こねこ(左サイドバー)テンプレートのbody要素の文字サイズプロパティの値設定は、以下の通りとなっています。

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

このfont-size:small;が、左サイドバーの本文文字にも適用されてしまっているのです。

ということは、このプロパティの値を変更すれば、左サイドバーの文字の大きさを変更することができるのですが・・・
このスタイルは、他の箇所にも継承されている可能性があるため、ここを修正してしまうとブログのデザインが大きく変わってしまう可能性があります。

ならばどうするかというと、スタイルの継承が左サイドバーに影響しないよう、左サイドバーで独自の文字サイズを定義してしまえばよいのです。
こうすれば、スタイルの継承は発生しません。


ということで前置きが長くなってしまいましたが、今回は以下のような修正を加えることにします。

★左サイドバーの文字サイズを小さくする方法★

.sideクラスに、プロパティfont-sizeを書き加える。

▼▼▼ 変更前 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
}

▼▼▼ 変更後 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
}

このように変更することによって、左サイドバーの表示が以下のように変わりました。

▼▼▼ 変更前 ▼▼▼
SD_004_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_004_02.JPG

今まで文字サイズが大きかったためにすぐ折り返されていた文字列が、少し見やすくなりました。

ここまでで、今回の左サイドバーの文字サイズを小さくする作業は終了です。


なお、今回はこねこ(左サイドバー)テンプレートをベースに説明したため、上記のような対応方法となっています。
他のテンプレートを使用していて、既に.sideクラスにfont-sizeプロパティが存在している方は、その数値を変更するだけでサイドバーの文字サイズを変更することができます。

以上、左サイドバーの文字サイズを小さくする方法でした。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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