投稿した記事の本文上に表示されるアイキャッチを非表示にする

インデックスや記事ページに表示されるアイキャッチ。

私が利用しているcocoonでは、cocoon設定の「画像」から諸々のアイキャッチ設定を変更することが出来るのですが、
今回はそんな設定の前置きを全部すっ飛ばして、、

記事上に表示されるアイキャッチを非表示にする方法です。

 

アイキャッチを非表示にする

CSSコードを使用します。

• 全ての記事で共通して非表示にするなら、外観→カスタマイズ→追加CSS
• 特定の記事のみアイキャッチを非表示にするなら、投稿編集内の「カスタムCSS」に追加

 

投稿した本文上のアイキャッチを非表示にする

投稿した記事に表示されるアイキャッチ画像を非表示にするCSSコードです。

.eye-catch img{
display:none;
}

そのままですね。
アイキャッチのimgをディスプレイからノンしています。

 

 

共通のスタイルシートに記載したいんだけど個別でページを指定したい場合は、「.eye-catch img」の前にページIDなどを付けたらいいと思います。

ページを指定してスタイルシートに記載したい場合

.post-12 .eye-catch img{
display:none;
}

多分こんな感じ。

数字は指定したい投稿記事のIDを入れてください。

 

 

アイキャッチの設定方法

Cocoon設定では「画像」の設定から、アイキャッチ画像を表示するかどうか、チェック一つで設定することができます。

それと同時に、本文中に挿入してある一番目の画像をアイキャッチ画像として利用することもできます。

 

• 本文上にアイキャッチ画像を表示することができる
• 本文中の最初に出てくる画像をアイキャッチにすることができる

 

 

まとめ

アイキャッチは本文だけではなく、インデックスなどにも表示されます。

• インデックスだけアイキャッチを表示したい
• 特定のカテゴリーは本文の画像をアイキャッチにしたい
• 本文にアイキャッチ画像を載せる記事と載せない記事で分けたい

なんてことが人生の中では一度や二度訪れるはずなので、
そんなときにアイキャッチの表示方法を使い分けてみてくださいね。