ワードプレスのデフォルトテーマ「Twentynineteen」のフロントのアイキャッチ画像が大きすぎるので、小さくしてみました。

アイキャッチが全画面!

twenty nineteen - featured image view height

これは個別記事画面のアイキャッチ画像です。なんと画面の90%を占有するようにデザインされていました。

最近のはやりというか、おしゃれ?

個人的にはこれが嫌いなので、最低の画面占有率を30%に指定しました。リード文ぐらいは読める大きさが好みです。

twenty nineteen - featured image view height modified
.site-header.featured-image {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	min-height: 30vh;
}

管理画面の「外観→CSS編集」に上のコードをコピペするだけです。

min-heightの部分の数字を調整するといくらでも小さくなりますが、飽くまで「最低」が小さくなるだけで、コンテンツが埋まっていればそれをカバーする大きさになります。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

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

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