[WordPress] コンテンツ欄の表示幅を広げて見やすいページに

テーマ検索から見つけた、Tweny Thirteenというテーマを使わせていただいているが、記事の幅が小さい。サイドにウィジェット等の導入も検討しているが、取り急ぎ幅を広げてみよう。

変更前の幅

PCの解像度の設定によるのだろうが、狭い。。。コンテンツ幅を広げる前の状態

修正箇所を調べる

Chromeから該当のページを表示。
F12キーを押下してChromeのデベロッパーツールを起動する。
ソースコード表示

デベロッパーツールの左上にある矢印アイコンをクリック
デベロッパーツールの矢印アイコン

HP上にカーソルを合わせると、画像のような感じで色が変わる。HP上のサイズを変更したい部分に合わせてクリック。
選択した箇所の色が変わる

ちなみに、今回コンテンツ表示幅は、604のようだ。
選択した箇所の寸法表示

左のウインドウで、クリックした箇所の該当コードが反転している。右のウインドウでStylesタブが表示されているはずである。
Styleタブ

そこを確認すると↓のような表記がある。max-width: 604px という箇所が、コンテンツの幅である。
修正箇所を発見

ちなみに、後程CSSファイルを変更することになるのだが、右上のstyle.cssの.entry-header, .entry-content, .entry-summary, .entry-metaの箇所を変更することになるので、メモしておいてもよいかもしれない。

数字の部分をクリックすると、値を編集できるようになる。
実際に変えてみる

ココでの変更内容は保存されるわけでは無いが画面上にはすぐ反映されるので、今回はここでサイズ感を確認してから実際に変更したいと思う。

1,100pxに変更してみた例
デベロッパーツールで修正した内容がする反映される

CSSの修正

外観 → テーマの編集
外観のテーマの編集をクリック

スタイルシート(style.css)をクリック
今度はスタイルシートを選択

変更箇所を探す。

先ほどChromeのデベロッパーツールで見た↓を探せばよい。
さっき見つけた箇所を修正する

今回はこのような表示で、該当箇所があった。
max-width: 640px; の箇所の値を変更。
スタイルシートの修正

ファイルを更新する。
ファイルを更新ボタンで、修正内容を反映

著:エビスコム
¥3,158 (2024/03/24 11:40時点 | Amazon調べ)

まとめ

設定は以上となる。
Google Chromeのデベロッパーツールは、私のような初心者が変更箇所を調べる際にとても協力だ。このような手順で自信のサイトをオリジナリティのあふれるサイトに更新していくのも楽しい作業の一つだ。