[WordPress] 幅いっぱいにコンテンツを表示する

前回、サイドバーのないページテンプレートを作る方法について書いた。

しかし、元のページテンプレートがサイドバーがあることを前提にしているせいか、ページのコンテンツが 70% あたりで改行になってしまう。だからコンテンツをページの幅いっぱいに使えるようにしたい。

これには CSS を変更すればいい。

（１）Google Chrome の Developer Tools で対象の要素を特定する。

私の Unos Magazine Vu テーマの場合、hgrid-span-8 という要素だと分かった。

（２）style.css で hgrid-span-8 要素部分を見ると width が中途半端な数値になっていることを確認。100% に変更する（子テーマに記述すると上書きできる）。

変更前：
.hgrid-span-8 {
 width: 66.66666667%;
}

変更後：
.hgrid-span-8 {
 width: 100%;
}

これで幅いっぱいにコンテンツを表示できるようになる。

ただし、Unos Magazine Vu テーマの場合は固定ページだけでなく投稿ページも同じ hgrid-span-8 要素が適用されていると分かった。今回は固定ページにのみ width: 100% を適用したい。その場合は以下のように .page を追記する。

.page .hgrid-span-8 {
 width: 100%;
}

参考：
CSSで中央寄せする9つの方法（縦・横にセンタリング）
https://saruwakakun.com/html-css/basic/centering

CSS｜中央寄せが効かないときは・・・ | コトダマウェブ
https://cotodama.co/css-center/

CSSの中央寄せ「margin： 0 auto;」がうまくいかないとき | 西沢直木のIT講座
https://www.nishi2002.com/16106.html

サイトを中央寄せ： wordpressでHP作り
http://wordpress3uz.seesaa.net/article/432670456.html

CSSでページごとに別のスタイルを設定したいときはbodyタグをチェック！ | 西沢直木のIT講座
https://www.nishi2002.com/15404.html

固定ページ専用に css ファイルを分ける方法
https://remotosa.com/separate-css-file-for-a-post/