賢威7：メインコンテンツとサイドバーの横幅（比率）を変更する方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回はWordPressテーマ：賢威7のメインコンテンツとサイドバーの横幅（比率）を変更する方法を紹介したいと思います。

とても手軽にできるカスタマイズなので、実験的に記事部分を広げてみたり、サイドバーを広げてナビゲーションメニューのようにしたり、といったことが簡単にできます。

以前サイト全体の横幅を広げる方法を紹介しましたが、サイト全体の横幅を広げながら、メインコンテンツとサイドバーの比率を変えることもできるので、お好みに合わせてご利用下さい。

賢威7サイト全体の横幅を広げる方法

カスタマイズ前

↓ カスタマイズ前の横幅は、メインカラムが65%でサイドバーが30%

カスタマイズ後

カスタマイズ 1

↓ メインカラムを65%から70%、サイドバーを30%から25%に変更

カスタマイズ 2

↓ メインカラムを65%から55%、サイドバーを30%から40%に変更

カスタマイズ 3

↓ サイドバーが左にある場合（2カラムリバースの場合）も同じようにカスタマイズできます

[ad]

カスタマイズ1：メインカラムを広げる場合

まずはメインカラムを広げてサイドバーを狭めるカスタマイズです。

親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

.col2 .main-conts {
    width: 70%;
}
.col2 .sub-conts {
    width: 25%;
}

これで記事が入るコンテンツ部分が65%から70%に広がり、サイドバーが30%から25%に狭まりました。
（トップページなど、他のページも同じように変わります）

カスタマイズ2：メインカラムを狭める場合

次はメインカラムを狭めてサイドバーを広げていきます。

これも比率が変わるだけで、ほとんどメインカラムを広げる場合と同じ要領になります。

.col2 .main-conts {
    width: 55%;
}
.col2 .sub-conts {
    width: 40%;
}

↓　メインカラムが55%になり、サイドバーが40%に

ちなみにカスタマイズ1もカスタマイズ2も、メインカラムとサイドバーの合計を95%にしていますが、95%以外にしてもカラム落ちすることは無いので、自由に決めて大丈夫です。

ただ、（100%から95%を引いた）残りの5%が余白になっているので、あまりに100%に近い数字にすると、（特にブラウザの幅を狭めたときに）余白が気になるかもしれません。

カスタマイズ3：サイドバーが左にある場合（2カラムリバースの場合）

サイドバーが左にある場合については、CSSの指定先（セレクタ）が変わるだけで、それ以外はサイドバーが右の場合と全く同じです。
（.col2 に r が付いて .col2r になるだけ）

↓　サイドバーが左にある場合（2カラムリバース）

• メインカラム： .col2r .main-conts
• サイドバー： .col2r .sub-conts

CSSの指定先を変えればあとは同じようにスタイリング出来るので、メインカラムを70%、サイドバーを25%にする場合のCSSコードは、下のようになります。

.col2r .main-conts {
    width: 70%;
}
.col2r .sub-conts {
    width: 25%;
}

サイドバーが左にある場合でも同じようにスタイリングすることが出来ました。

今回のカスタマイズはここまでになります。
最後まで閲覧ありがとうございました。