Twenty Twenty 1、本文エリアの幅を広げる


Twenty Twentyのコンテンツ幅が妙に狭かったので、大きくしました。

本文エリア幅、修正前

青い部分がコンテンツエリアとその幅です。

上部の写真がアイキャッチ画像、下部の写真が記事画像ですが、初期値だとコンテンツ幅が妙に小さいですよね。

幅調整のCSS

「外観 →カスタマイズ → CSS編集」に下記のコードをコピペ。

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100rem;
	width: calc(100% - 4rem);
}

できるだけオリジナルのコードに忠実に記述しました。

max-width: 100rem;の部分を120remにすると1,200pxになります。 (Twenty Twentyの場合、1rem=10px)

あとはお好みで。

コピペする時は、「プレーンテキストで貼り付け」が無難です。

CSS追記の場所

反転している部分が今回のコードです。

ワードプレス、追加CSS、場所

追記

オリジナル投稿日:2019-12-7

2021年1月30日、テーマ引っ越し時、幅調整スタートがやりやすいと気づき、通し番号を変更。max-width: 90remを使用。

最後までお読みいただきましてありがとうございました。


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

  1. Twenty Twentyテーマ関連の記事が少ない中、大変お世話になっています。この記事にならって、自分のサイトも幅を調整してみました。
    有賀うございます。

    • ありがとうございます。
      できるだけ元のコードに近い形にしているので、他の人のテーマでもちゃんと動くといいのですが…
      素敵なサイトになるといいですね。

コメントを残す

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