Twenty Twenty-Two 1、記述エリアを広く


コンテンツエリアの幅が狭い。

読む分にはさほど困らないけれど、記事を書く時に非常に窮屈に感じるので、広げました。

いくつか方法はありますが、今回は突貫で、子テーマに親テーマのtheme.jsonをコピーして、コンテンツエリアの幅をタイトルエリアの幅(wide)と同じにしました。

子テーマに親テーマのファイルをコピーする方法は、下記の関連記事「ワードプレス、「子テーマ」作成」のscreenshot.phpを複製するのと同じ方法です。

一旦、コントロールパネルでファイルを複製したら、ワードプレスの管理画面からも編集できるようになります。

(マルチサイトじゃない場合は)外観 → テーマエディタ → 子テーマを選択 → theme.json

twenty twenty two theme editor

できた複製ファイルの下記の箇所が”contentSize”: “650px”になっているのを好きな値に変更すると、max-width(最大幅)が1000pxに、それより小さな画面では勝手に縮むようになると思います。

少なくとも私の検証環境(UHD, QHD, ipad、iphoneなど)ではそうです。※残念ながらFHDモニターを持っていないので、崩れていたらm(__)m

"layout": {
   "contentSize": "1000px",
   "wideSize": "1000px"
}

これで、記事編集画面の幅も広がります。

650pxって狭いよね。FHDモニターとかだと、そうでもないのかな?

あと、ブロックの背景色を使う人は、このブロックがパッディングの分だけはみ出てしまうので、

外観 → カスタマイズ → CSS追記

にて、はみ出さないように調整します。

twenty twenty two has background width
p.has-background {
    max-width: calc(1000px - 2.375em*2);
}

というか、本当は、コンテンツ幅自体もCSS追記で調整できますが、コードが長くなるし、指定要素の抜け漏れが怖いので、theme.jsonで修正しました。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です