こんにちは、ほくほくです。
今回も、ブログデザインのお話。
前回は、右サイドバーの幅を広げるところまで行きました。
今回は、左サイドバーとメインコンテンツの幅を広げるところまでやりましょう。
ランキングクリック＆応援、よろしくお願いします
これが終わると、ページ全体の幅と、各コンテンツの幅の合計が一致することになります。
さて、前回（関連記事）までで、ブログのデザインはこうなっています。
う～ん、イビツ・・・
早速編集しましょう。
まず左サイドバーですが、これは“#links-left”の中のwidthを250pxに変えます。
また、メインページについては、“#content”の中のwidthを480pxに変えます。
・・・ん、480px？
「ページ全体が1000pxで、左右のサイドバーが250pxだから、メインページは500pxになるんじゃないの？」
そう思ったあなた、エライ！
今回のポイントは、各ボックスの外側の余白です。
まず左サイドバーの設定。
CSS編集画面で“#links-left”を探し、その中のwidthを190pxから250pxに修正して下さい。
前回との違いは、marginプロパティ。
“margin:”という文字の右側に4つの数字があると思いますが、2番目の“10px”は「ボックスの外の右側に10pxの余白をとる」という意味です。
つまりこれで、左サイドバーとメインの間には、10pxの隙間が設定されることになります。
もう一つはメインページの設定。
CSS編集画面で“#content”を探し、その中のwidthを修正するわけですが・・・
ご覧の通り、こちらにもmarginが右側に10px設定されています。
つまり、メインコンテンツと右サイドバーの間にも10pxの隙間が設定されているわけですね。
そこで、メインコンテンツの幅は、両側に10pxの余白があるので、480pxとするわけです。
さあ、ここまで編集できたら「プレビュー」ボタンを押してみましょう。
サイドバーとメインコンテンツが、ページ全体の幅1000pxをキッチリ使い切っていると思います。
これで幅変更は完了！
・・・ですが、まだ変？
変ですね。
背景画像が、ページ幅に合っていません。
次回は、背景画像の設定をやりましょう。
さて、今回はCSSのmarginプロパティが登場しました。
ここまでの説明は、テンプレートを変更する具体的な作業として記載していますし、ほくほくは仕事でHTMLのソースコードをバリバリいじくっていたことがあるので問題なのですが、正直「よくわからん」と思われる方も多いかと思います。
ぶっちゃけ、ソースコードを覚えるには、まずやってみるのが一番近道ですが、なれた頃に「何ができるのか」を勉強してみるのも良いかと思います。
この後、各記事に枠線をつけたりしますが、枠線の種類も点線だったり二重線だったりと、いろいろ種類があります。
慣れてくれば、各記事の背景にそれぞれ画像を設定したりもできるでしょう。
ほくほくが今回CSSの勉強に使用したのは『スタイルシート辞典
』という本です。「CSSで何ができるのか」に興味が出てきたら、読んでみることをお勧めします。
ほくほくは別の本を持っていますが、HTMLもあわせて知りたいという方には『HTMLタグ+スタイルシート辞典ちび
』の方がお薦めかもしれません。ご参考までに。
（以下、次回です）
＜CSS編集関連記事＞
◆CSSでブログのデザインを変えてみよう！
◆①CSS編集の基本
◆②ページ全体の幅を広げる
◆③右サイドバーの幅を広げる
◆④左サイドバーとメインの幅を広げる
◆⑤背景画像を変更する
◆⑥記事コンテンツに枠線をつける
◆⑦サイドコンテンツに枠線をつける
＜参考書＞
◆スタイルシート辞典
◆HTMLタグ+スタイルシート辞典ちび
▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
◆投資資金の稼ぎ方タグ：ブログ
大阪今日は、小雨模様です
今日は部屋干しでいきましょう
明日は。晴れて欲しいやんか～～～
今日も、村応援してますよ
寛助さん、いつもありがとうございます。
ほくほくも只今、二足歩行のピーターにポチしてきました。