ワードプレスデフォルトテーマ『Twenty Twenty One』の本文エリアの幅を大きくした後、全体を狭くして見やすくしました。
いつものことですが記事エリアが狭すぎるし、他のエリアが広すぎる…
修正前 広げる 全体調整
画面幅のメディアの区切りは、482pxと822px。482~821pxは問題ないから触らない。
コンテンツエリアの内、細かい幅指定があるクラスは、entry-header、entry-content、entry-footer、comments-area、navigation。これらを一番広いentry-headerに揃えた後で、全体がスクリーンの70%以上の大きさにならない様に調整。
管理画面の「外観 → カスタマイズ → 追加CSS」に下記のコードをコピペ。
/* デスクトップデバイスの本文幅を広げる */
@media only screen and (min-width: 822px){
.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
max-width: var(--responsive--alignwide-width);
margin-left: auto;
margin-right: auto;
}
.entry-footer {
max-width: var(--responsive--alignwide-width);
margin-left: auto;
margin-right: auto;
}
.author-bio {
max-width: var(--responsive--alignwide-width);
margin-left: auto;
margin-right: auto;
}
.site {
max-width: 70vw;
margin-left: auto;
margin-right: auto;
}
}
「.post-thumbnail」から始まるのが、本文エリア。
「.entry-footer」がフッターエリア。
「.author-bio」が作成者エリア。
それぞれのエリアの調整内容は同じなんですけど、後で扱いやすいようにバラバラのまま調整しました。max-widthの部分はなんとなく親テーマのテンプレを使いました。
max-width: 1200pxとかmax-width: 100remとか、記述の方式は、お好みで。
参考:親テーマの幅指定、関連個所(2021年1月19日現在)


私も遅まきながら、最近Twenty Twenty-Oneをいじり始めました。毎年のようにカスタマイズをするためにネットで調べていたらこちらにたどり着きました。本当に助けになってます。ありがとうございます!今後も新しいテーマが出る度に検証してもらえると嬉しいです。
励ましのコメントありがとうございます。毎年、デフォルトテーマの見出しの大きさがどんなことになっているのか、怖いもの見たさで覗いてしまいます。来年ちっちゃくなってたら、寂しいかもです。