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