【ブログ】カテゴリーページのアイキャッチ画像のみ非表示にする方法

こんにちは、ハヤです。

今回は「投稿記事のアイキャッチ画像は表示し、
カテゴリーページのアイキャッチ画像だけを非表示にする方法」について記録します。

この設定は、固定ページにカテゴリーページへの内部リンクを設置しており、そこではアイキャッチ画像を表示させるために行っています。

ブログテーマは「Cocoon」を使っています。

それでは、どうぞ。

カテゴリーページのアイキャッチのみ消す

▼手順

・カテゴリーページのアイキャッチ画像を選択
・追加CSSにてコードを入れる

カテゴリーページのアイキャッチ画像を設定していきます。

【操作手順】

投稿一覧>カテゴリー>アイキャッチ>アイキャッチ画像を入れる

アイキャッチ画像を設定すると、筆者のコンテンツのカテゴリーページの本文一番上に、上記で設定したアイキャッチ画像が表示されます。

今回は、このカテゴリーページのアイキャッチ画像を非表示にします。

【操作手順】

外観>カスタマイズ>追加CSS

次に以下のコードを追加していきます。

/* カテゴリページのアイキャッチ画像のみ非表示 */
.category .eye-catch img {
display: none;
}

1行目の「.category .eye-catch img {」の「.category」の部分をを入力しないとカテゴリーページ以外に投稿記事のアイキャッチも消えてしまうので注意が必要です。

上記CSSを入力すると、カテゴリーページのアイキャッチ画像を非表示にできました！（以下の画像参照）

実は「Cocoon設定」のカスタマイズからも、アイキャッチ画像を非表示にすることができます。

【操作手順】

「cocoon設定」>「画像」>「本文上にアイキャッチを表示する」のチェックを外す

この設定を行うと、カテゴリーページのアイキャッチ画像は非表示になりますが、同時に投稿記事のアイキャッチ画像も非表示になってしまいます。

今回は、投稿記事のアイキャッチ画像は表示したまま、カテゴリーページのアイキャッチ画像だけを非表示にしたいので個別対応していきます。

今回は、カテゴリーページのアイキャッチ画像だけを非表示にする方法をご紹介しました。

ネット上で「アイキャッチ画像の設定」や「カテゴリーラベルの非表示」の方法はよく見かけますが、「カテゴリーページのアイキャッチ画像だけを非表示にする方法」は、なかなか見つかりませんでした。

私も、固定ページにカテゴリ一覧を載せたいという理由でこの対応をしています。

同じような使い方をしたいという方は、ぜひ参考にしてみてください！

というわけで今回は以上です。

■関連記事

★よく読まれる記事

【2025年版】エックスサーバーでブログ開設する方法【画像付き】