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

2008年05月11日

CSS編集B:右サイドバーの幅を広げる

header_13

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

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


前回はブログのページ全体の幅を広げたので、今度は右サイドバーの幅を広げてみましょう。

前回の作業(関連記事)の結果、ブログのデザインは現在こうなっています。

design_20080413_04.JPG


この、ページに対して左側に寄ってしまっているコンテンツの幅を変え、ページ全体の整合性を取っていきましょう。

ー(長音記号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)

さて、今回は右サイドバーです。

サイドバーを広げるためには、前回のcontainerと同じく、サイドバーのプロパティを定義している要素を探し、その中のwidthプロパティの値を変えればよいわけです。

今回編集するのは、右サイドバーを定義している“links”です。
CSSの編集画面で“#links”と書かれている部分を探して下さい。

design_20080413_07.JPG


見つけたら、その中の“width:190px;”を“width:250px;”に変えてみましょう。

「プレビュー」ボタンを押すとこうなります。

design_20080413_08.JPG


右サイドバーの幅が広くなったの、わかりますか?

このようにCSSでは、ページ上のその部分を定義している要素、クラス、IDのプロパティを変更することにより、表示を変えることができます。
今回編集したのは、body要素の“links”IDのwidthプロパティでした。
前回は、同じくbody要素の“container”IDのwidthプロパティです。

メインコンテンツと左サイドバーは、次回やりましょう。


さて、今回編集した右サイドバー。
幅をなぜ250pxにしたかというと、それなりの理由があります。

アフィリエイトのバナーを表示するためです。

アフィリエイトのバナーには様々なサイズのものがありますが、一応いくつかの規格サイズがあるようです。

ほくほくのページでは、横幅が234pxのものを表示できるようにしたいと思いました。
それともう一つ、120pxのバナーを2つ並べて表示できるようにするのも目的の一つでした。

design_20080413_09.JPG


このブログの右サイドバーを見ると分かると思いますが、上図のように表示されているバナー、上段は234pxのもの、下段は120pxを2つ並べたものです。

サイドバーの幅を決める時、何か目的があるのであれば、それにあわせたサイズにするのが良いかもしれません。

(以下、次回です)

<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:46 | Comment(0) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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