Twenty Twenty-One 1, 本文エリアの幅を広げる

ワードプレスデフォルトテーマ『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日現在)