Twenty Seventeen 5, アイキャッチ画像を非表示にする

Twenty Seventeenの「アイキャッチ画像」が巨大すぎて画面に収まっておりませんでしたので、投稿・固定ページでは非表示に、アーカイブページではスクリーンの高さの80%に収まるように調整しました。

投稿・固定ページ

テーマのヘッダー画像を利用している場合、画像が2つ連なって不格好だったので、アイキャッチ画像の方を非表示にしました。

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

.single-featured-image-header {
	display:none;
}

HTMLに記述があるのにCSSで見せなくする方法はあまり好きじゃないのですが、以前使っていた子テーマにheader.phpをコピーしてHTMLの記述を削除したり、functions.phpでフックして取り除く方法はこの方法ほどシンプルではないので、やめました。取り敢えず暫定処置として。

カテゴリー、日付などのアーカイブには利用するつもりですが、消したい場合は、「.post_thumbnail」のクラスを非表示にすることはできました。

.post-thumbnail {
	display:none;
}

個人的にはアーカイブページのサムネイルはそのまま残しつつ、画像が画面サイズを超えない様に調整しました。

上の画像はスクリーンの高さの50％を超えない様に50vhに設定した例ですが、特にスマホ横置きで歪みが目立つので、スクリーンの高さの80%で手を打ちました。

.post-thumbnail img {
	max-height: 80vh;
}

オリジナル投稿日：2017年6月4日

リライト再掲載日：2021年2月7日

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