【スマホ対応】アイキャッチのカテゴリーラベルを非表示にする方法【Cocoon】

トップページのアイキャッチ画像に表示されるカテゴリーラベルを非表示にする方法を解説します。

パソコンで表示しているときはたいして気になりません。

しかし、スマホ表示のインデックスをエントリーカード型にしていると、以下の画像のように上部がほとんど隠れてしまいます。

せっかく作ったアイキャッチが隠れたり、文字の位置を調節したりするのが嫌ですよね。
これから解説する設定をすることで、PCでもスマホでも非表示になります。

この記事では、

それぞれのアイキャッチのカテゴリーラベルを非表示にする方法を解説します。

かんたんに設定できるのでぜひ参考にしてください。

投稿ページ（記事上部）のアイキャッチ【カテゴリーラベル非表示】

まずは、投稿ページ（記事の上部）に表示されるアイキャッチのカテゴリーラベルを非表示にする方法です。

これで記事上部のアイキャッチからカテゴリーラベルが消えます。

しかし、これだとブログのトップページのアイキャッチにはカテゴリーラベルが表示されたままです。

次に、トップページのアイキャッチからもカテゴリーラベルを消す方法を解説します。

手順をさくっとまとめます。

.cat-label {
display: none;
}

これだけです。
コードをいじるのは難しいと感じるかもしれませんが、コピペするだけで初心者でも簡単に設定できますよ。

ここからは、実際の画面を使って詳しく解説します。

カテゴリーラベルを非表示にする手順

以上で設定完了です。

冒頭にのせた画像のようにカテゴリー表示がなくなります。

パソコンで見たときも同様です。

▼デフォルトの状態

▼非表示にした状態

アイキャッチからカテゴリーラベルがなくなると、すっきりして見やすくなりますよ。

参考になれば幸いです。