WordPressテーマ「Cocoon」では、記事のアイキャッチ画像（バナー）やエントリーカード上に、自動でカテゴリーラベルが表示されます。
これは読者に記事ジャンルを直感的に伝える役割があり、デザイン的にも便利な機能です。
しかし、ラベルが画像の文字や重要な部分に被ってしまうと、見づらくなることがあります。
特にバナーに文字を入れている場合は、可読性が大きく下がる原因になります。
本記事では、カテゴリーラベルがバナーに被らないようにするための3つの解決策と、それを実現するCSSカスタマイズ方法を解説します。
初心者でも安心して調整できるよう、非表示・位置変更の具体的なコード例も紹介しています。
まずは、カテゴリーラベルについて知ることからはじめます。急いでいる方は、「カテゴリーラベルが バナーに被らない解決策３つ」から読んでみてください。
Cocoonのカテゴリーラベル
WordPressテーマ「Cocoon」では、アイキャッチ画像上に自動でカテゴリーラベルが表示される仕様です。
カテゴリーラベルとは
カテゴリーラベルとは、記事が属するカテゴリー名を表示するパーツのことです。
Cocoonでは、アイキャッチ画像（バナー）やエントリーカードの左上などに自動で表示されます。ラベルはカスタマイズにより、リンクカテゴリー一覧ページへ移動することも可能です。
Cocoonでカテゴリーラベルが表示されるタイミング
Cocoonでカテゴリーラベルは、以下のタイミングで自動的に表示されます。
- アイキャッチ（記事や固定ページのタイトル直下)
- エントリーカード(トップページやカテゴリー)
- 関連記事カード(記事や固定ページ下部)
- カルーセルのカード(デフォルトは非表示)
- 新着記事・人気記事・関連記事のウィジェット(デフォルトは非表示)
実際のカテゴリーラベル表示例を見てみましょう。
例：アイキャッチ（記事タイトル直下)
例：エントリーカード(トップページ)
例：関連記事カード(記事下部)
デフォルト非表示のカルーセルカードとウィジェット例は近日追加いたします_(._.)_
参照：cocoon公式サイト https://wp-cocoon.com/category-label-hooks
カテゴリーラベルのメリット
カテゴリーラベルにより、読者は一目で記事ジャンルを把握できます。
カテゴリーラベルのメリット：
- 記事のジャンルが一目でわかる
- サイト構造が分かりやすくなり、SEO的にも有利
- サイト全体の回遊率が向上し滞在時間が延びる
カテゴリーラベルが バナーに被らない解決策３つ
Cocoonのデフォルトの設定では、カテゴリーラベルがバナー上部に重なっているため、バナーの文字や重要な部分が、カテゴリーラベルの下に隠れてしまうことがあります。伝えたいことがわかりにくくなってしまいますね。
カテゴリーラベルがバナー内の文字や重要部分に重なって見づらい場合は、以下の3つの方法で対処できます。
- カテゴリーラベルを非表示にする
- バナー作成時にラベル位置を避ける
- CSSでラベルの表示位置を変更する
「カテゴリーラベルを非表示にする」と、すっきりと見やすいサイトになります。
「バナー作成時にラベル位置を避ける」には、大切な要素を中央に置き、余白を活かしたバナーデザインにすると良いでしょう。下記例では、大切な要素を左上に置かないようデザインしました。カテゴリーラベル名の文字数が長いとラベルも長くなり、バナー幅の最大70%まで表示されますので、考慮しましょう。
「CSSでラベルの表示位置を変更する」と、カテゴリーラベルのメリットを生かしつつ、アイキャッチ画像バナーのデザイン性も損なわずに表示できます。
カテゴリーラベルのCSSを確認
この手順については、興味がない方は飛ばしていただいて大丈夫です。
Cocoonでは、カテゴリーラベルのスタイルはCSSで制御されています。
ブラウザのデベロッパーツールを使えば、どのクラスにどんなスタイルが適用されているか確認できます。
カテゴリーラベル部分に該当するクラス（例：.cat-label）を探し、現在の内容を把握し、デベロッパーツール上で、位置指定に使うtopやbottom、leftなどの要素の値を変更して見た目がどのように変わるかを試し、一番良い見栄えになった時のCSS値をメモしておきましょう。この時、PCとスマートフォン両方の表示を切り替えて確認すると、調整ポイントが明確になります。
ブラウザでF12を押すとデベロッパーツールが表示されます。
①矢印ボタンを押した後
②サイト上で調べたい要素にカーソルを合わせると
③対象のElements（HTML）とStyles（CSS）が表示されます。
④表示されない時は上部で「Elements」下部で「Styles」を選択します。
⑤直接要素を打ち消したり、書き込みして試すことができます。
CSSを追加して、カテゴリーラベルを非表示にする
アイキャッチ(記事や固定ページのタイトル直下)のカテゴリーラベルは「アイキャッチラベル」と呼ばれています。
Cocoon設定＞画像＞アイキャッチの表示 から「アイキャッチラベルを表示する」のチェックを外すだけで非表示にできます。
エントリーカード、関連記事カード上については、CSSを追加して、カテゴリーラベルを非表示にしましょう。
カスタマイズ追加CSS
今から紹介する方法はデフォルトのCSSの記述は変更しません。新たにCSSを追加するだけです。そのため、万が一間違えた時にも、追加したCSSを消せば良いだけなので、初心者にも安心な方法です。
ワードプレスダッシュボード ＞ 外観 ＞ カスタマイズ ＞ 追加CSS の順に進み、注意書きを確認したうえでコードを記入します。
ワードプレスダッシュボードのサイドメニューから「外観」、「カスタマイズ」を選ぶと、カスタマイズ画面が表示されますので「追加CSS」をクリック。
初回は、下記画像のような説明文が表示されます。一読後「閉じる」を押してください。
CSSを入力する画面が表示されたら、下記のようにCSSを入力し「公開」ボタンを押します。
/*カテゴリラベル*/
.cat-label{
display:none;
}
カテゴリーラベル(.cat-label)を非表示「display:none;」にします。
これで、カテゴリーラベル（アイキャッチ、エントリーカード、関連記事カード上）が非表示になりました。
デフォルト非表示のカルーセルカードとウィジェットのカテゴリーラベルについては、近日確認いたします_(._.)_
CSSを追加してカテゴリーラベルの位置を調整する
続いて、カテゴリーラベルの表示位置を変える方法をご紹介します。追加CSSを調整することで表示位置の変更が可能です。
ワードプレスダッシュボード ＞ 外観 ＞ カスタマイズ ＞ 追加CSS の順に進み、コードを追加し、公開ボタンを押します。流れは、上記に記載の、非表示時の手順と同様です。
それでは、カテゴリーラベルの位置を調整するCSSの例を2つご紹介しますが、前提があります。
- 「カルーセルのカード」「新着記事・人気記事・関連記事のウィジェット」はデフォルト非表示のため考慮外。
- 「エントリーカード」「関連記事カード」は対象。
- 「アイキャッチ」はスマートフォンのみ調整の対象。
PCでは、アイキャッチバナーに対して、カテゴリーラベルが小さく表示されバナーの見た目に影響が少ないため対象外としましたが、調整したい場合は、クラス属性「.eye-catch .cat-label 」にCSSを追加してください。
カテゴリーラベルを下に移動
１つ目の例では、カテゴリーラベルをバナー画像の下に移動します。
関連記事の表示がデフォルトの「エントリーカード」の際におすすめです。
/*カテゴリーラベル*/
.cat-label {
bottom: -20px;
top: unset;
}
@media screen and (max-width: 850px) {
.eye-catch .cat-label {
bottom: -25px;
top: unset;
}
}
カテゴリーラベル(.cat-label)を、下寄せにして、更に20px下に配置。スクリーンサイズが850px以下の時（スマートフォン)は、アイキャッチ画像のカテゴリーラベルを下寄せから更に25px下に配置、という内容です。
これで、カテゴリーラベルの位置が下に移動しました。
（アイキャッチ@スマートフォン、エントリーカード、関連記事カード）
関連記事は、デフォルトの「エントリーカード」表示の例です。
※ご自身のバナーやサイトデザインに合わせて数値を適宜ご調整ください。
カテゴリーラベルをやや上に移動
２つ目の例では、スマートフォン表示時にカテゴリーラベルがバナー画像の上に来るよう調整します。 関連記事の表示が「ミニカード」「縦型カード」の際におすすめです。
/*カテゴリーラベル*/
.cat-label {
left: 0px;
top: -11px;
}
@media screen and (max-width: 850px) {
.eye-catch .cat-label {
left: 0px;
top: -13px;
}
}
カテゴリーラベル(.cat-label)を、更に11px上に配置。スクリーンサイズが850px以下の時（スマートフォン)は、アイキャッチ画像のカテゴリーラベルを更に13px上に配置、という内容です。
これで、カテゴリーラベルの位置がやや上に移動しました。
（アイキャッチ@スマートフォン、エントリーカード、関連記事カード）
関連記事は、「縦型カード」表示の例です。
※ご自身のバナーやサイトデザインに合わせて数値を適宜ご調整ください。
確認と微調整のポイント
公開後は、PC、スマートフォン、タブレットなど複数の画面サイズで確認します。 実機で確認するのが一番ですが、実機がない場合はブラウザのデベロッパーツールで確認します。ラベルが画像やテキストと重なっていないか、余白が適切かをチェックしましょう。
また、カテゴリーラベルが表示されるバナーやタイミングの設定やCSSを変更した場合は、カテゴリーラベル位置も影響を受けますので、見直しましょう。
まとめ
いかがでしたか？今回の記事では、Cocoonでサムネイルのカテゴリーラベル位置を変更する方法をご紹介しました。
CocoonのカテゴリーラベルはSEOやユーザビリティ向上に有効ですが、バナーのデザインを損なう場合があります。本記事で紹介した「非表示」「バナー作成時の考慮」「表示位置変更」という3つの方法を使えば、見やすく美しいデザインに改善できます。特に位置調整のCSS追加は、メリットを保ちながら見栄えも確保できるおすすめ手法です。調整後はPC・スマホ両方での表示確認が重要。小さな数値変更で印象が大きく変わるため、サイトの雰囲気に合わせて微調整しましょう。
おさらい
- Cocoonのカテゴリーラベルとは
- カテゴリーラベルがバナーに被らない解決策３つ
- カテゴリーラベルのCSSを確認
- CSSを追加してカテゴリーラベルを非表示にする
- CSSを追加してカテゴリーラベルの位置を調整する
コメント