コンテンツエリアの幅が狭い。
読む分にはさほど困らないけれど、記事を書く時に非常に窮屈に感じるので、広げました。
いくつか方法はありますが、今回は突貫で、子テーマに親テーマのtheme.jsonをコピーして、コンテンツエリアの幅をタイトルエリアの幅(wide)と同じにしました。
子テーマに親テーマのファイルをコピーする方法は、下記の関連記事「ワードプレス、「子テーマ」作成」のscreenshot.phpを複製するのと同じ方法です。
一旦、コントロールパネルでファイルを複製したら、ワードプレスの管理画面からも編集できるようになります。
(マルチサイトじゃない場合は)外観 → テーマエディタ → 子テーマを選択 → theme.json
できた複製ファイルの下記の箇所が”contentSize”: “650px”になっているのを好きな値に変更すると、max-width(最大幅)が1000pxに、それより小さな画面では勝手に縮むようになると思います。
少なくとも私の検証環境(UHD, QHD, ipad、iphoneなど)ではそうです。※残念ながらFHDモニターを持っていないので、崩れていたらm(__)m
"layout": {
"contentSize": "1000px",
"wideSize": "1000px"
}
これで、記事編集画面の幅も広がります。
650pxって狭いよね。FHDモニターとかだと、そうでもないのかな?
あと、ブロックの背景色を使う人は、このブロックがパッディングの分だけはみ出てしまうので、
外観 → カスタマイズ → CSS追記
にて、はみ出さないように調整します。
p.has-background {
max-width: calc(1000px - 2.375em*2);
}
というか、本当は、コンテンツ幅自体もCSS追記で調整できますが、コードが長くなるし、指定要素の抜け漏れが怖いので、theme.jsonで修正しました。