2011年01月03日

【第22回】ブログの幅を変更する

今回から5回にわたって、ブログの幅を変更する方法をご紹介していきたいと思います。

現在使用しているこねこ(左サイドバー)というテンプレートの幅は、ご覧の通りとなっています。

SD_022_01.jpg

すなわち、ブログ全体の幅は840px
その内訳として、左サイドバーの幅が200pxで、メインコンテンツ部分が620pxとなっています。
また、左サイドバーとメインコンテンツの間に20pxの空間があり、この空間も含めると合計で840px、すなわちブログ全体の幅と同じとなります。

今回からの一連の編集で、このブログ幅を変更してみたいと思います。


さて、その編集内容ですが、まずはブログ全体の幅は変更せず、左サイドバーとメインコンテンツの幅のみを変更してみましょう。

  ●左サイドバーの幅を200pxから250pxに変更する。
  ●メインコンテンツの幅を620pxから570pxに変更する。

左サイドバーを50px広げ、その分メインコンテンツを50px狭める形です。

今回からの一連の変更を施したブログは、こんな形になります。

SD_025_01.jpg


それでは、早速CSSの編集に入っていきましょう!


・・・と、その前に、今回はまず、Seesaaブログの構成を解説したいと思います。
概略レベルでもこれを押さえておかないと、いざCSSを編集する時に???になってしまいますので。

よろしいでしょうか。

さて、Seesaaブログでは、大まかに言ってCSS上このような構成となっています。

SD_022_02.jpg

まず、ブログ全体を@#containerという要素で定義しています。
ここで、ブログ全体の幅840pxなどを定義しています。

次に、タイトル部分を表すA#bannerという要素があります。
タイトル文字や説明文、タイトル画像を定義している箇所ですが、今回の編集では特に変更は行いません。

さて、次にあるのがB#links-leftです。
左サイドバーを表す要素です。
この中で、現在の200pxというサイドバーの幅が定義されています。
今回の変更の本命の1つです。

また、左サイドバーとメインコンテンツの間の空白である20pxも、この要素で定義されています。

ちなみに、右サイドバーの場合は#linksという要素が使われますので、右サイドバーのテンプレート、あるいは両サイドバーのテンプレートを使用している方はそちらも確認してみて下さい。

最後にご紹介するのが、メインコンテンツを表すC#content要素。
この中で、現在の幅である620pxが定義されています。
こちらも、今回の編集で変更していきましょう。


ということで、次回からの編集では、B#links-leftC#contentを編集して、左サイドバーとメインコンテンツの幅を変えていきます。

どうぞお楽しみに。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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