カテゴリー
Twenty Twenty

Twenty Twenty 9、アイキャッチ画像を小さくする

「デフォルトテンプレート」使用時のアイキャッチ画像を小さくしました。

Twenty Twentyには3つのテンプレートがありますが、その内、「デフォルトテンプレート」使用時のアイキャッチ画像をほんのり小さくしました。

「デフォルトテンプレート」を使うと、ヘッダーエリアと本文エリアを半分ずつまたがってアイキャッチ画像が配置されます。

色遊びと画像遊びが楽しいですね。ワタクシの場合、センスがアレですが…

修正前↓

Twenty Twenty アイキャッチ幅、修正前

↑様子が分かりやすいようにとスクリーンを50%縮小してからキャプチャーしていますが、アスペクト比16:9の画像がパソコン画面の高さを越えていました。幅を修正後の本文幅1,000px (Twenty Twentyでは100rem)に修正しました。

修正後↓

Twenty Twenty、デフォルトテーマ、アイキャッチ画像、修正後

↑コチラもスクリーンを50%縮小しています。まだスクリーンの高さは足りませんでした。

それでも(個人的に)幅が揃ってスッキリした感じにはなりました。

今回使用したコード↓

.singular .featured-media-inner {
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: 100rem;
}

※max-width: 100remの部分を変えれば最大幅が変わります。

貼り付ける場所↓

外観 → カスタマイズ → CSS追記

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

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

作成者: のろのろ

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

コメントを残す

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