賢威7.0

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

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

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

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

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

カスタマイズ前

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

keni-site-width-before

カスタマイズ後

カスタマイズ 1

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

keni-site-width-after-1
カスタマイズ 2

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

keni-site-width-after-3

[ad]

カスタマイズ 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になりました。

keni-site-width-after-2

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

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

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

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

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

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

↓ コード編集後

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

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

keni-site-width-after-4

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%;
}

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

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

keni-site-width-after-5

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