カテゴリー
Twenty Twenty

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

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

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

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

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

修正前↓

画像を貼り付ける関係でスクリーンを50%縮小していますが、画像が画面の高さを越えていました。幅を修正後の本文幅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好きの、雑記ブロガーです。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください