2011年01月06日

【第25回】メインコンテンツの幅を変更する

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

今回は、メインコンテンツの幅変更です。

現在、左サイドバーを広げたことによってブログ全体の幅に収まりきらず、サイドバーの下に表示されてしまっているメインコンテンツを、元通り正しく表示してあげましょう。


それでは、さっそく。

メインコンテンツを定義する要素は、第22回でもお伝えした通り#contentです。
この中のwidth:620px;というプロパティの値を小さくしてやれば、メインコンテンツの幅を狭めることができます。

★メインコンテンツの幅を変更する方法★

#content要素widthプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
#content{
width:620px;
float:left;
}

▼▼▼ 変更後 ▼▼▼
#content{
width:570px;
float:left;
}

以上の修正で、メインコンテンツの幅が狭くなり、以前と同様正しく表示されるようになります。

▼▼▼ 変更前 ▼▼▼
SD_023_03.jpg

▼▼▼ 変更後 ▼▼▼
SD_025_01.jpg

以上で、メインコンテンツの幅修正は完了です。

なお、良く見ればお気づきかと思いますが、メインコンテンツの幅を狭めたことによって、記事タイトルの背景画像の一部が表示されなくなっています。
記事タイトル左側のねずみのしっぽが表示されていません。

これを正しく表示するためには、前回と同じく画像調整とアップロード、CSS上のURL変更作業が必要となります。
興味のある方は、前回の記事を参考に画像を修正してみて下さい。

なお、メインコンテンツのタイトルの背景画像は、h3.title要素の中のbackground-imageプロパティで定義されています。
ご参考までに。

このブログでは、この記事を書き終えた後に上記画像も修正してしまうつもりです。

以上で、メインコンテンツの幅を調整する作業は完了です。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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