HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
CSS編集用デザインを選択している方で、「ページ幅は変えられないのか…」と断念している方はいませんでしょうか？
そういう方向けに、数回にわたってページ幅を変える方法について解説してゆきたいと思います。
アフィリエイトバナー掲載のために幅を広げる
初回は、CSSをコピー＆ペーストするだけでページ幅を変える即席のデザインカスタマイズ記事！
アフィリエイトバナー掲載の幅を広げることを目的に、幅の狭いサイドバーの横幅を234ピクセルに広げます。W224×H33、W234×H60サイズのバナー掲載が可能になります。
/* 幅に関する基本設定上書きここから→ */
.skinHeaderArea { /* +54px */
width:1034px;
}
.skinContentsArea { /* +54px */
width:1034px;
}
.columnC .skinSubB { /* +54px */
width:234px;
}
.columnD .skinSubB { /* +54px */
width:234px;
}
.columnE .skinSubB { /* +54px */
float:left;
margin-left:15px;
width:234px;
}
/* ←幅に関する基本設定上書きここまで */上記のソースコードを、編集可能CSSの最後の部分に追加すれば完成です。必要最小限の設定を追加しているだけです。幅の狭いサイドバーを使用している3つのレイアウトパターン全てに対応できることになります。
狭いサイドメニューを広げ、サンプルバナーを掲載したサイトを公開 しています。
もしこのカスタマイズを適用する前に、幅を規定している部分、レイアウトに関係する部分に手を入れていれば、うまくいかない場合があるかも知れません。原因はケースバイケースになると思われますので、これから公開してゆく記事を参考いただければ、解決の助けになるかも知れません。
もし「超簡単なグローバルナビ」を設置していたら
当ブログ記事、「超簡単なグローバルナビ 」を設置している場合は、グローバルナビ部分の幅もあわせてあげないといけませんので、下記の黄色い文字の部分を修正ください。
/* -----グローバルナビ設置部分----- */
div#gnav {
position: absolute;
top: 0;
left: 0;
width: 1034px; /* +54px */
margin: 0;
padding: 0;
border-top: 1px solid #000000; /* ←グローバルナビ上部ライン色 */
border-bottom: 1px solid #000000; /* ←グローバルナビ下部ライン色 */
「ややこしいて、よう分からん！」という方は、CSSの最後に、次の設定を書き加えてもらうだけでも大丈夫です。
/* -----グローバルナビ設置部分を1034にするための上書き----- */
div#gnav {
width: 1034px; /* +54pxでグローバルナビ設定を上書き */
上記のコメントにある上書きのメリットは、幅を元に戻したいとき、今回追加したソースを削除するだけで、他の設定が不要になることです。つまり、デフォルトの980ピクセル幅に、グローバルなビの幅調整不要で問題なく戻ります。
引き続きの予定
ワイドサイドメニューのほうは、幅300ピクセルのアメブロバナーを掲載しなければならないため、手を入れないほうがよいと思います。引き続きの記事では、記事の幅、幅の狭いサイドメニューの幅、記事とサイドバーの間隔を任意に変更する方法について解説したいと思います。
その他考えられるのは、.columnEのパターンで、サイドメニューの右左をさかさまにする方法と、サイドメニューと本文の位置を逆にする方法かと思いますが、たいしたニーズはなさそうな気がしていますので、もしご希望があれば公開したいと思います。