3カラムでテーマを利用すること前提にカスタマイズしていますが、コンテンツエリアがちょっと狭いので、今回は幅を広げたいと思います。

親テーマのスタイルシートを確認する

まずは、親テーマでデフォルト、どのような設定がされているのか確認したいと思います。管理画面の〔外観〕-〔テーマの編集〕の画面から、親テーマのフォルダを選択して、スタイルシートを確認します。

サイト全体の幅

サイト全体
サイト全体

基本構造が書かれた部分から、サイト全体が最大1260pxで構成されていることが分かります。ここは特に変更せず、次に『.site-content』(コンテンツエリア)が、どれぐらいの大きさに指定されているか、確認したいと思います。

サイトコンテンツの幅

サイトコンテンツの幅
サイトコンテンツの幅

最大474pxで構成されていることが分かります。3カラムで利用するとはいえ、私としては、ちょっと狭いと感じるので、650pxに広げたいと思います。そこで、この部分だけ、子テーマのスタイルシートで修正して、あえて失敗してみたいと思います。

崩れたレイアウト
崩れたレイアウト

max-widthの指定を、650pxにしたところ、レイアウトが崩れてしまいました。
これは、他にもコンテントエリア最大幅474pxにあわせて指定されてる部分があるためです。そのため、max-widthが474pxに指定されている部分を、すべて修正する必要があります。

といっても、それほど大変な作業ではありません。『max-width; 474px』となっている部分を、検索で探して書き換えていけば良いだけです。管理画面の〔外観〕-〔テーマの編集〕で検索機能などが使えるプラグインの話は、こちらを参照してください。

 

コンテンツエリアの幅を拡大する

管理画面の〔外観〕-〔テーマの編集〕で、『編集するテーマ』が子テーマであることを確認し、スタイルシートをクリックします。

①子テーマのスタイルシートを編集する
今回は、元の図が飛び飛びの場所にあるので原図は割愛、スタイルシートの記述も長いため、修正後の図も省略形ですが、『max-width; 474px』になっていた部分を子テーマのスタイルにシートにコピペして、以下のように、『max-width: 650px』と指定しなおします。

 

今回は、元の図が飛び飛びの場所にあるので原図は割愛、スタイルシートの記述も長いため、修正後の図も省略形ですが、『max-width; 474px』になっていた部分を子テーマのスタイルにシートにコピペして、以下のように、『max-width: 650px』と指定しなおします。

 

子テーマの編集
子テーマの編集

 

/******コンテントエリアの幅******/
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 650px;
}

.post-navigation,
.image-navigation {
margin: 24px auto 48px;
max-width: 650px;
padding: 0 10px;
}

.archive-header,
.page-header {
margin: 24px auto;
max-width: 650px;
}

.contributor-info {
margin: 0 auto;
max-width: 650px;
}

.comments-area {
margin: 48px auto;
max-width: 650px;
padding: 0 10px;
}

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
margin: 0 auto 48px;
max-width: 650px;
padding: 0 30px;
}

②結果を確認する

結果確認
結果確認

コンテンツエリアが広がりましたが、左右の余白のうち、左側が狭くなってしまったので、微調整を加えたいと思います。
ただ、長くなりましたので、続きは次回にします。