今回の記事では、WordPressテーマ：賢威7サイトの

1. サイト全体の横幅を広げる方法
2. メインコンテンツとサイドバーの余白を調整する方法

を紹介したいと思います。

カスタマイズ前

↓ 賢威7をインストールしたばかりの状態(1200px)

カスタマイズ後

カスタマイズ 1

↓ サイト全体の横幅が1360pxに広がり、それに合わせてメインコンテンツやサイドバーも一緒に広がりました

カスタマイズ 2

↓ メインコンテンツとサイドバーの間の余白が狭まりました

カスタマイズ 1. サイト全体の横幅を広げる

今回はベース部分の見た目のみの変更なので、編集するファイルは base.css ファイルです。

base.css の468行目付近に以下のコードがあるので、、、

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-copy,
.sub-copy,
.main-image-in-text-box,
.main-body-in,
.site-footer-in{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 1200px; /*サイトの横幅*/
    margin: auto;
}

これを下のコードで置き換えます。
（width: 1200px; を width: 1360px; に変更）

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-copy,
.sub-copy,
.main-image-in-text-box,
.main-body-in,
.site-footer-in{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 1360px; /*サイトの横幅。これより小さければレスポンシブ*/
    margin: auto;
}

保存・更新すると、サイト全体の横幅が1200pxから1360pxになりました。

カスタマイズ 2. メインコンテンツとサイドバーの余白を狭める

カスタマイズ1 でサイト全体の横幅を広げることができましたが、メインコンテンツとサイドバーの余白が開きすぎてしまったので、今度は余白を調整していきましょう。

余白と言っても、ここでは padding や margin で調整するのではなく、メインコンテンツの横幅を広げることでサイドバーとの余白を狭めていきます。

base.css の502行目付近に以下のコードがあるので、

/*2カラムレイアウト*/
.col2 .main-conts{
    float: left;
    width: 65%;
}

この中の width: 65%; を width: 68%; に変更します。

↓ コード編集後

/*2カラムレイアウト*/
.col2 .main-conts{
    float: left;
    width: 68%;
}

これでメインコンテンツが広がり、サイドバーとの余白が狭まりました。

2-1. サイドバーを左に配置している場合は？

先ほどはサイドバーを右に配置しているタイプのカスタマイズでしたが、サイドバーを右に配置している場合（2カラムリバースの場合）についてもせっかくなので紹介しておきます。

サイドバーが左に移動すること以外は変わらないので、 base.css にある513行目付近のコードのwidth: 65%; を width: 68%; に変更します。

/*2カラムレイアウト（リバース）*/
.col2r .main-conts{
    float: right;
    width: 65%;
}

↓　コード編集後（width: 68%;に変更）

/*2カラムレイアウト（リバース）*/
.col2r .main-conts{
    float: right;
    width: 68%;
}

これでサイドバーが右にあるレイアウトでも、サイト全体の横幅を広げてメインコンテンツとサイドバーの余白を狭めることができました。

サイドバーが左になるとだいぶ印象が変わりますね。

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