Last Updated on 2020年8月8日 by よも
ワードプレスのテーマ Twenty Nineteen のトップページにアイキャッチ画像を入れてみました。
Twenty Nineteenは、アイキャッチ画像がすごく大きいです。インパクトがあるのですが、スクロールしないとコンテンツがでてこないのはちょっとどうかなと思って、縦の長さを半分にしてみました。
管理画面→外観→カスタマイズ→追加ＣＳＳ
以下のコードを追加します。
（以下の「．」は全角）
/アイキャッチ画像を半分にする/
．site-header．featured-image ｛
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 50vh;
｝
50vhの数字を変更すればさらに調整できます。
アイキャッチ画像に画像についてもう一つ。
ディフォルトでは、フィルターがかかっていて暗いです。これも悪くはないのですが、明るくしたいので修正しました。
追加ＣＳＳに次のコードを追加します。
（以下｛ ｝は全角）
/画像のフィルターをはずす/
．site-header．featured-image::after｛
background:transparent;
この際、管理画面→外観→カスタマイズ→色
この画面で、
メインカラーを「カスタム」に変更し、
「アイキャッチ画像にメインカラーのフィルターを適用する」のチェックをはずす必要があります。