こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。
今回の記事では、WordPressテーマ：賢威7サイトの
- サイト全体の横幅を広げる方法
- メインコンテンツとサイドバーの余白を調整する方法
を紹介したいと思います。
目次
カスタマイズ前
↓ 賢威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%;
}
これでサイドバーが右にあるレイアウトでも、サイト全体の横幅を広げてメインコンテンツとサイドバーの余白を狭めることができました。
サイドバーが左になるとだいぶ印象が変わりますね。
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。
コメントを残す