2-17 特集テーマのアイキャッチ画像表示の調整

Twenty Seventeenは、サイトのホームページのビジュアル画像のインパクトが強いテーマです。下にスクロールしていくと、特集テーマのアイキャッチ画像が流れるように印象的です。

が、この各特集ページに、ありがたいことにGoogleさんが検索上位のリンクを貼ってくれます。なので、検索から来た訪問者は、サイトのフロントページではなく、各特集のトップページに導かれ、開くといきなり「なんじゃわからんドデカイ画像で文字一切見えん！」状態になります。

私なら「わっ、このサイト、ページデザイン崩れてる」と思ってしまいます。

これでは、初めて来てくださる方に失礼です。

というわけで、アイキャッチ画像の表示調整です。

特集トップページのアイキャッチ画像非表示

まず、アイキャッチ画像はサイト全体のトップであるフロントページ以外、いらんという場合は、各特集ページのトップページ画像のクラス名が「.single-featured-image-header」なので、それを指定します。

/* スマホとPC */
.single-featured-image-header {
 display: none;
}

/* 特集ページのリンク先の画像非表示（PCのみ） */ 
@media screen and (min-width: 48em) { 
.single-featured-image-header { 
display: none;
 } 
}

表示はしたいけど、高さを少し調整したい場合には、高さを vh=% で指定します。

/* スマホもPCも特集トップページの画像高さ25％に*/
.single-featured-image-header {
 height: 25vh;
}

/* 特集トップページの画像高さ25％に（PCのみ） */ 
@media screen and (min-width: 48em) {
 .single-featured-image-header {
  height: 25vh;
 }
}

特集トップページのアイキャッチは、フロントページにセクション画像として表示されます。こちらの高さを調整したい場合には、クラス名「.panel-image」に指定します。非表示にしたい場合は、アイキャッチ画像を削除すればOKです。

/* スマホもPCもホームの特集画像高さ25％に*/
.panel-image {
 height: 25vh;
}

/* ホームの特集画像高さ25％に（PCのみ） */ 
@media screen and (min-width: 48em) {
 .panel-image {
  height: 25vh;
 }
}

以上です。