記事の投稿時にアイキャッチを設定した場合、アイキャッチと記事内最初の画像が被ることがあります。アイキャッチの設定をしつつ、投稿ページに表示されるアイキャッチ画像を非表示にしてみたいと思います。
使用テーマはyStandard v4です。
※yStandardのアップデートにより、アイキャッチの表示/非表示が[カスタマイズ]→[ysデザイン]→[投稿ページ]で簡単にできるようになりました。アイキャッチ画像を表示するのチェックを外します。
アイキャッチの設定
左側が投稿するページの内容です。記事タイトルの下に画像を入れて、その下に最初の見出しという順番になっています。
右側がアイキャッチ画像の設定です。普段、大体がタイトル下に入れた画像と同じものを指定しています。
被るならアイキャッチを設定しなきゃいいのではと思うかもしれませんが、アイキャッチを設定しないとアーカイブ等で表示される画像が無くなってしまうので、アイキャッチの設定はとても大事なのです。
二重の画像
こちらが先ほどの設定で投稿したページです。
記事タイトルの上にアイキャッチ画像が表示され、さらに記事タイトルの下にも同じ画像が表示されています。二重表示の状態になっていますね。
記事タイトルの下に入れた画像ブロックを削除すればいいのですが、記事の総数が多いと手作業では大変になってしまいます。このレイアウトが気に入っているなんてこともあります。
CSSで対応
カスタマイズから、追加CSSへ。
figure.singular-header__thumbnail.post-thumbnail {
display: none;
}
投稿ページのヘッダーにあるアイキャッチ画像を非表示にします。
クラスをつなげて書くことで、singular-header__thumbnailとpost-thumbnailの両方が付与されている場合にdisplayをnoneにするという意味になります。figureはなくても非表示になりました。
条件付けをすれば、万が一別のところで一つ一つのクラスが使われていた場合でも影響を与えずに済みます。
また、追加CSSに書くことで修正も楽になりますし、表示がおかしくなったらこの記述を削除すればとりあえず元には戻るので安心してカスタマイズできます。
アイキャッチが非表示になってすっきり
投稿ページのヘッダーにあったアイキャッチ画像を非表示にすることで、今まで通りのスタイルに戻りました。画像が二重に被ることなくすっきりしましたし、かつ、アーカイブページでもアイキャッチとしての設定はちゃんと機能しています。
いかがだったでしょうか。
クラスをつなげることで、「○○と××の両方が指定されている場合」のように限定的に使えるというのは勉強になりました。
投稿ページに表示されるアイキャッチ画像のクラスは、テーマによって異なることがあるので、chromeやfirefoxの検証機能を使ってクラス名を調べておくといいですね。