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

Twenty Twentyのアイキャッチ画像がデスクトップスクリーンの高さを超えていたので、「アーカイブ」と「デフォルトテンプレートの記事」に使用されるアイキャッチ画像を本文幅と揃えてみました。

アーカイブのアイキャッチ画像を小さく

日付アーカイブ、カテゴリー、タグに表示するアイキャッチ画像が大きすぎたので、コンテンツ幅に合わせて修正しました。

見やすくするために縮小表示したのですが違いが分かりにくくなったかも?

外観 → カスタマイズ → 追加CSSにコピペ

.section-inner.medium {
	max-width: 90rem;
	width:calc(100% - 4rem);
	margin-left: auto;
	margin-right: auto;
}

「max-width: 90rem;」(Twenty Twentyでは1rem=10px)の数値を変えれば幅が変わると思います。お好みで。

※個人的に本文エリアの幅を90remにしたので、そこにあわせました。

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

こちらもアスペクト比16:9の画像がパソコン画面の高さを越えていましたので縮小。

外観 → カスタマイズ → CSS追記にコピペ

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

こちらも「max-width: 100rem」の数値部分を変えれば最大幅が変わります。

※この時は、幅を修正後の本文幅1,000px (Twenty Twentyでは100rem)に修正しました。

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

2021年別サイトに展開するために記事見直しと追記。

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