Cocoon では、アイキャッチ画像の左上にカテゴリー名が自動表示されますが、デザインと重なって見づらくなる場合があります。
あなたが思い通りのデザインでアイキャッチ画像を使いたい場合は、このカテゴリー表示を非表示にしておくと見た目が整いやすくなります。
この記事では、Cocoon の設定と CSS を使って、アイキャッチ画像上のカテゴリー表示を非表示にする方法について分かりやすく解説していきます。
※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集（初心者向け）」のページをご参照ください。
アイキャッチ画像のカテゴリ表示とは？
Cocoon では、アイキャッチ画像の左上にカテゴリー名が自動表示される仕様になっています。
この表示は記事のカテゴリー分類を示すためのものですが、デザインと重なることで見づらくなったり、アイキャッチ画像の印象を損ねてしまう場合があります。
特に文字入りのバナー画像やシンプルなデザインを使っている場合には、表示をオフにすることで見た目を整えやすくなります。
また、このカテゴリー表示は「投稿／固定ページ」と「カテゴリーページ」で仕組みが異なるため、設定方法も別々に行う必要があります。
投稿／固定ページを非表示にする
投稿ページおよび固定ページに表示されるカテゴリラベルは、Cocoon の設定で簡単に非表示にできます。
WordPress 管理画面で「Cocoon設定 → 画像タブ」をクリックします。
画面を少し下の方へスクロールすると、「アイキャッチの表示」という項目がありますので、そこの内にある「アイキャッチラベルを表示する」のチェックを外してから、「変更をまとめて保存」をクリックします。
以下のように、投稿ページのアイキャッチ画像上に表示されていたカテゴリー表示が非表示になりました。
固定ページを作成している場合は、この設定で固定ページのほうのカテゴリー表示も非表示になっています。
カテゴリーページを非表示にする
カテゴリーページのアイキャッチ画像にもカテゴリー名が表示されますが、投稿ページとは異なり Cocoon 設定からは非表示にできません。
カテゴリーページのカテゴリ表示を非表示にするには、追加 CSS を使う必要があります。
WordPress 管理画面の「外観 → カスタマイズ」をクリックします。
次の画面で「追加 CSS」をクリックします。
追加 CSS の枠内に、以下の CSS をコピペで貼り付け、「公開」ボタンをクリックします。
.cat-label {
display: none;
}
以下のようにカテゴリーページのアイキャッチ画像上に表示されていたカテゴリー表示が消えていれば設定完了です。
非表示にならない時の確認点
設定を変更してもカテゴリー表示が残っている場合は、キャッシュが原因になっていることがあります。
ブラウザのキャッシュを削除し、再読み込みを行ってから表示を確認します。
Cocoon のキャッシュ機能を使用している場合は、Cocoon設定の「キャッシュ削除」からキャッシュクリアを実行します。
CSS が反映されていない場合もありますので、CSS の記述が正しく入力されているかを再確認します。
まとめ
Cocoon では、投稿ページ／固定ページのアイキャッチ画像上のカテゴリー表示は設定で簡単に非表示にできます。
一方、カテゴリーページの表示については CSS を使うことで非表示が可能になります。
使用しているアイキャッチ画像のデザインに合わせて表示／非表示を変更することで、記事全体の見た目を整えやすくなります。
設定後に反映されない場合はキャッシュを確認し、必要に応じて再読み込みを行ってください。
コメント