2011年01月04日

【第23回】サイドバーの幅を変更する

第22回からのブログの幅を変更するシリーズ。

今回は、左サイドバーの幅を広げてみます。

第2回でご紹介した、CSS変更画面を開いて下さい。

前回解説した通り、Seesaaブログの左サイドバーは、#links-left要素で定義されています。

この中で、サイドバーの幅を表すプロパティはwidthになります。
従って、このwidthの値を変更すれば、サイドバーの幅が変更されることになるのです。

★左サイドバーの幅を変更する方法★

#links-left要素の中のwidthプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
#links-left{
width:200px;
float:left;
margin-right:20px;
padding:0px 0px 0px 0px;
line-height:1.5;
}

▼▼▼ 変更後 ▼▼▼
#links-left{
width:250px;
float:left;
margin-right:20px;
padding:0px 0px 0px 0px;
line-height:1.5;
}

これで、左サイドバーの幅が広くなりました。

▼▼▼ 変更前 ▼▼▼
SD_023_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_023_02.jpg

作業完了!

・・・あれ?
左サイドバーの幅が広くなったのは良いですが、メインコンテンツが消えてしまいました。

メインコンテンツがどこに行ったかというと・・・

SD_023_03.jpg

ご覧の通り、左サイドバーの下に表示されてしまっています。

これは、左サイドバーが広がった(200px⇒250px)ことにより、ブログ全体の幅(840px)では、メインコンテンツ(620px)を表示できなくなったために起こる現象です。
このままではまずいですね。

ただ、左サイドバーの幅自体は、これで編集完了です。

メインコンテンツの表示位置がおかしいのは、まだメインコンテンツの幅を狭めていないから。
この作業は、今後行っていきます。

今回はここまでです。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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