経済指標flg_JPN.jpg
日本
flg_US.jpg
米国
flg_EU.jpg
EU
flg_UK.jpg
英国
flg_AUS.jpg
豪州
flg_NZ.jpg
NZ
雇用統計6/7(木)
政策金利6/6(木)6/4(火)
GDP6/5(水)
前月以前の経済指標スケジュールはこちら

2008年05月25日

CSS編集C:左サイドバーとメインの幅を広げる

header_14

こんにちは、ほくほくです。

今回も、ブログデザインのお話。


前回は、右サイドバーの幅を広げるところまで行きました。
今回は、左サイドバーとメインコンテンツの幅を広げるところまでやりましょう。

ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)
にほんブログ村 為替ブログへ ランキングクリック&応援、よろしくお願いしますexclamation にほんブログ村 為替ブログ FX システムトレード派へ
ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)

これが終わると、ページ全体の幅と、各コンテンツの幅の合計が一致することになります。


さて、前回(関連記事)までで、ブログのデザインはこうなっています。

design_20080413_08.JPG


う〜ん、イビツ・・・

早速編集しましょう。

まず左サイドバーですが、これは“#links-left”の中のwidthを250pxに変えます。
また、メインページについては、“#content”の中のwidthを480pxに変えます。

・・・ん、480px?

「ページ全体が1000pxで、左右のサイドバーが250pxだから、メインページは500pxになるんじゃないの?」

そう思ったあなた、エライ!

今回のポイントは、各ボックスの外側の余白です。


まず左サイドバーの設定。
CSS編集画面で“#links-left”を探し、その中のwidthを190pxから250pxに修正して下さい。

design_20080413_10.JPG


前回との違いは、marginプロパティ。
“margin:”という文字の右側に4つの数字があると思いますが、2番目の“10px”は「ボックスの外の右側に10pxの余白をとる」という意味です。
つまりこれで、左サイドバーとメインの間には、10pxの隙間が設定されることになります。


もう一つはメインページの設定。
CSS編集画面で“#content”を探し、その中のwidthを修正するわけですが・・・

design_20080413_11.JPG


ご覧の通り、こちらにもmarginが右側に10px設定されています。
つまり、メインコンテンツと右サイドバーの間にも10pxの隙間が設定されているわけですね。

そこで、メインコンテンツの幅は、両側に10pxの余白があるので、480pxとするわけです。


さあ、ここまで編集できたら「プレビュー」ボタンを押してみましょう。

design_20080413_12.JPG


サイドバーとメインコンテンツが、ページ全体の幅1000pxをキッチリ使い切っていると思います。

これで幅変更は完了!

・・・ですが、まだ変?

変ですね。

背景画像が、ページ幅に合っていません。

次回は、背景画像の設定をやりましょう。


さて、今回はCSSのmarginプロパティが登場しました。

ここまでの説明は、テンプレートを変更する具体的な作業として記載していますし、ほくほくは仕事でHTMLのソースコードをバリバリいじくっていたことがあるので問題なのですが、正直「よくわからん」と思われる方も多いかと思います。

ぶっちゃけ、ソースコードを覚えるには、まずやってみるのが一番近道ですが、なれた頃に「何ができるのか」を勉強してみるのも良いかと思います。

この後、各記事に枠線をつけたりしますが、枠線の種類も点線だったり二重線だったりと、いろいろ種類があります。
慣れてくれば、各記事の背景にそれぞれ画像を設定したりもできるでしょう。

ほくほくが今回CSSの勉強に使用したのは『スタイルシート辞典』という本です。
「CSSで何ができるのか」に興味が出てきたら、読んでみることをお勧めします。
ほくほくは別の本を持っていますが、HTMLもあわせて知りたいという方には『HTMLタグ+スタイルシート辞典ちび』の方がお薦めかもしれません。

ご参考までに。

(以下、次回です)

<CSS編集関連記事>
  ◆CSSでブログのデザインを変えてみよう!
  ◆@CSS編集の基本
  ◆Aページ全体の幅を広げる
  ◆B右サイドバーの幅を広げる
  ◆C左サイドバーとメインの幅を広げる
  ◆D背景画像を変更する
  ◆E記事コンテンツに枠線をつける
  ◆Fサイドコンテンツに枠線をつける

<参考書>
  ◆スタイルシート辞典
  ◆HTMLタグ+スタイルシート辞典ちび

▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
1日わずか15分!半年で運用利回り17.8%の簡単システムトレード
  ◆投資資金の稼ぎ方
タグ:ブログ
posted by o(^0^)o ほくほく at 13:05 | Comment(2) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは〜〜〜
大阪今日は、小雨模様です
今日は部屋干しでいきましょう
明日は。晴れて欲しいやんか〜〜〜
今日も、村応援してますよ
Posted by 寛助 at 2008年05月25日 13:34
o(^0^)o――――――――――――――――
寛助さん、いつもありがとうございます。
ほくほくも只今、二足歩行のピーターにポチしてきました。
Posted by ★ ほくほく o(^0^)o at 2008年05月26日 23:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。