2011年01月07日

【第26回】ブログ全体の幅を変更する

今回は、ブログ全体の幅を広げてみましょう。

第22回で解説した通り、ブログ全体の幅を定義しているのはCSS上の#container要素です。

現在使用しているこねこ(左サイドバー)テンプレートでは、デフォルトで840pxの幅となっています。

今回はこれを100px増やして、ブログの幅を940pxにしてみましょう。


それでは早速。

CSSの編集は、第2回で紹介したCSS編集画面で行って下さい。

修正するセレクタは#container、プロパティはwidthです。

★ブログ全体の幅を変更する方法@:全体幅の変更★

#container要素のプロパティwidthの値を修正する。

▼▼▼ 変更前 ▼▼▼
#container{
width:840px;
text-align:left;
margin:0 auto;
background-color:#fff;
}

▼▼▼ 変更後 ▼▼▼
#container{
width:940px;
text-align:left;
margin:0 auto;
background-color:#fff;
}

この変更によって、ブログの表示はこのようになります。

▼▼▼ 変更前 ▼▼▼
SD_025_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_026_01.jpg

ちょっと分かりにくいですが・・・
なんとなく、ブログ全体の幅が広がっているのが分かるでしょうか。

このテンプレートは、ブログそのものはブラウザの中央に表示される設定となっています。

その上で、ブログ全体の幅が広がったことにより、左寄せ設定の左サイドバーとメインコンテンツは、画面上左に寄ってしまっています。

なによりも、ブログのヘッダーも変わっていますね。
ヘッダーの猫の写真を含む画像は中央寄せ。
ブログのタイトルやその下の説明文は左寄せ。
結果として、ブログのタイトルなどはヘッダー画像の左にはみ出る形となっています。


まずはここまで、宜しいでしょうか。


さて、ブログ全体の幅を広げただけでは意味がありません。
それに伴う、コンテンツの修正が必要です。

ここでは、メインコンテンツの幅を、ブログ全体の幅と同じく100px増やしてみることにしましょう。
方法は、第25回で解説した通りです。

★ブログ全体の幅を変更する方法A:メインコンテンツの幅の変更★

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

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

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

この結果、ご覧の通りメインコンテンツの幅が、ブログ全体の幅一杯まで広がります。

▼▼▼ 変更前 ▼▼▼
SD_026_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_026_02.jpg

おお、メインコンテンツのタイトル背景画像が、ねずみ2匹に(笑)
これはまずい・・・ので、必要とあらば第24回で紹介した方法で画像を修正して下さい。


ここでは、あとタイトル画像を修正してみます。

こちらも、第24回で紹介した方法を使って、既存の画像を拡大します。

★ブログ全体の幅を変更する方法B:タイトル画像の調整★

#banner要素のbackground-imageプロパティに記載されているURLからタイトル画像を取得し、PictBearでサイズを調整し、ブログにアップロードする。
background-imageプロパティのURLを変更し、アップロードした画像を参照するようにする。
(注)画像取得から修正後画像アップロードまでの方法は、第24回をご参照ください。

▼▼▼ 変更前 ▼▼▼
#banner{
background-image:url("http://blog.seesaa.jp/img/bg/cat_stamp2/header.jpg");
background-repeat:no-repeat;
background-position:bottom center;
padding:0px 220px 0px 40px;
margin-bottom:25px;
height:294px;
}

▼▼▼ 変更後 ▼▼▼
#banner{
background-image:url("http://seesaa-blog-design.up.seesaa.net/image/header.jpg");
background-repeat:no-repeat;
background-position:bottom center;
padding:0px 220px 0px 40px;
margin-bottom:25px;
height:294px;
}

これで、ご覧のように拡大したタイトル画像が表示されるようになります。

▼▼▼ 変更前 ▼▼▼
SD_026_02.jpg

▼▼▼ 変更後 ▼▼▼
SD_026_03.jpg

あとは、タイトル画像を拡大したことによってタイトルの文字サイズや表示位置が気になったり、また先ほどのコンテンツタイトルの画像がおかしくなったりと、いろいろ気になりますが、そういった点はこのブログの過去の記事を参照しながら徐々に自分の好みに修正してみて下さい。

なお、私はこのブログは以前の幅のままの方が良いと思いますので、この記事を書き終えたら、ブログの幅は以前どおり840pxに戻すことにします。

今回は以上です。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(1) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
どうもはじめまして、田中と言います。o(^0^)o ほくほくさんのSeesaaブログのデザイン変更ワザを見てさせもらい、私も自分のブログのページをブログ全体の幅に変更しようとしたのですが、Seesaaブログのどこのタグから入ってHTMLとかCSSを変更したらいいのかが分からなくてメールさせて頂きました。なんせど素人な物でなかなか分からなくて悪戦苦闘しています。よろしくお願いします(⌒▽⌒)
Posted by 田中正喜 at 2013年08月31日 16:14
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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