カテゴリー
Twenty Twenty

Twenty Twenty 6、本文エリアの幅を調整

Twenty Twentyの本文エリア(=コンテンツ幅)が妙に狭かったので、大きくしました。

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

修正前↓

Twenty Twenty、コンテンツ幅、修正前

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

修正後↓

Twenty Twenty、コンテンツ幅、修正後

使用したコード↓

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {

	max-width: 100rem;

	width: calc(100% - 4rem);

}

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

デフォルトテンプレートでアイキャッチ画像を入れると、デスクトップで1,200pxになると思いますが、それに合わせたい場合、max-width: 100rem;の部分を120remにすると1,200pxになります。 (Twenty Twentyの場合、1rem=10px)

貼る場所↓

外観 →カスタマイズ → CSS編集

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

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

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

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

「Twenty Twenty 6、本文エリアの幅を調整」への3件の返信

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

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

コメントを残す

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