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日現在)

2021親テーマコンテンツ幅参考値
2021親テーマスペーシング参考値


“Twenty Twenty-One 1, 本文エリアの幅を広げる” への3件のフィードバック

  1. 私も遅まきながら、最近Twenty Twenty-Oneをいじり始めました。毎年のようにカスタマイズをするためにネットで調べていたらこちらにたどり着きました。本当に助けになってます。ありがとうございます!今後も新しいテーマが出る度に検証してもらえると嬉しいです。

    • 励ましのコメントありがとうございます。毎年、デフォルトテーマの見出しの大きさがどんなことになっているのか、怖いもの見たさで覗いてしまいます。来年ちっちゃくなってたら、寂しいかもです。

コメントを残す

メールアドレスが公開されることはありません。