こんにちは、ほくほくです。
今回もブログデザインのお話。
前回はブログのページ全体の幅を広げたので、今度は右サイドバーの幅を広げてみましょう。
前回の作業（関連記事）の結果、ブログのデザインは現在こうなっています。
この、ページに対して左側に寄ってしまっているコンテンツの幅を変え、ページ全体の整合性を取っていきましょう。
ランキングクリック＆応援、よろしくお願いします
さて、今回は右サイドバーです。
サイドバーを広げるためには、前回のcontainerと同じく、サイドバーのプロパティを定義している要素を探し、その中のwidthプロパティの値を変えればよいわけです。
今回編集するのは、右サイドバーを定義している“links”です。
CSSの編集画面で“#links”と書かれている部分を探して下さい。
見つけたら、その中の“width:190px;”を“width:250px;”に変えてみましょう。
「プレビュー」ボタンを押すとこうなります。
右サイドバーの幅が広くなったの、わかりますか？
このようにCSSでは、ページ上のその部分を定義している要素、クラス、IDのプロパティを変更することにより、表示を変えることができます。
今回編集したのは、body要素の“links”IDのwidthプロパティでした。
前回は、同じくbody要素の“container”IDのwidthプロパティです。
メインコンテンツと左サイドバーは、次回やりましょう。
さて、今回編集した右サイドバー。
幅をなぜ250pxにしたかというと、それなりの理由があります。
アフィリエイトのバナーを表示するためです。
アフィリエイトのバナーには様々なサイズのものがありますが、一応いくつかの規格サイズがあるようです。
ほくほくのページでは、横幅が234pxのものを表示できるようにしたいと思いました。
それともう一つ、120pxのバナーを２つ並べて表示できるようにするのも目的の一つでした。
このブログの右サイドバーを見ると分かると思いますが、上図のように表示されているバナー、上段は234pxのもの、下段は120pxを２つ並べたものです。
サイドバーの幅を決める時、何か目的があるのであれば、それにあわせたサイズにするのが良いかもしれません。
（以下、次回です）
＜CSS編集関連記事＞
◆CSSでブログのデザインを変えてみよう！
◆①CSS編集の基本
◆②ページ全体の幅を広げる
◆③右サイドバーの幅を広げる
◆④左サイドバーとメインの幅を広げる
◆⑤背景画像を変更する
◆⑥記事コンテンツに枠線をつける
◆⑦サイドコンテンツに枠線をつける
＜参考書＞
◆スタイルシート辞典
◆HTMLタグ+スタイルシート辞典ちび
▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
◆投資資金の稼ぎ方タグ：ブログ
