記事カードのカテゴリーバッジをカスタマイズする方法【入門編・CSS公開】

AI活用
2026.06.16

WordPressのブログを運営していると、こんな悩みが出てくることがあります。

「記事カードにカテゴリーバッジが2か所表示されている」「バッジの位置を変えようとしたらiPhoneだけ直らない」「バッジを消したいのにCSSが効かない」

この記事では、Cocoonのカテゴリーバッジをカスタマイズする方法を、AIに相談しながら解決した手順をそのまま公開します。CSS設定・Safari対応・バッジ完全非表示・画像への焼き込みトラブルまで、一通りカバーしています。

実際にAIへ投げたプロンプトも最後に公開しているので、同じ悩みがある方はそのままコピーして使ってください。

Cocoonのカテゴリーバッジとは？🎨

ID1370 図解1

カテゴリーバッジとは、記事一覧ページのサムネイル画像の上に表示される「AI活用」「ブログ運営」などのラベルのことです。Cocoonテーマでは .cat-label というCSSクラスが使われています。

デフォルトでは記事カードの左上に表示されます。見た目を変えたいときはCSSで位置や色を変更するのが一般的ですが、いくつかのトラブルポイントがあります。

よくある悩み原因
左上と右下に2か所表示されるCSSで位置を変えようとしたが元の表示が消えていない
PCでは直ったがiPhoneだけ直らないiOS Safariの描画バグ
CSSを変えても反映されないConoHa WINGのキャッシュが残っている
バッジが画像に写り込んでいるスクリーンショット画像の「焼き込み」

バッジの表示位置をCSSで変更する方法🎨

ID1370 図解2

バッジを右下に移動したい場合は、WordPressの Code Snippets プラグインを使ってCSSを追加するのがおすすめです。直接テーマのCSSファイルを編集するとテーマ更新時に消えてしまうため、スニペットで管理します。

Code Snippetsへの追加手順

  • WordPress管理画面 → Snippets → 「新規追加」
  • スコープを「グローバル（先頭で実行）」に設定
  • 以下のPHPコードを貼り付けて保存・有効化
add_action('wp_head', function() {
  $st = '';
  $et = '';
  $css = '.entry-card-thumb .cat-label,';
  $css .= '.card-thumb .cat-label,';
  $css .= '.eye-catch .cat-label {';
  $css .= '  position:absolute!important;';
  $css .= '  top:auto!important;';
  $css .= '  bottom:4px!important;';
  $css .= '  left:auto!important;';
  $css .= '  right:4px!important;';
  $css .= '}';
  echo $st . $css . $et;
}, 1);

ConoHa WINGを使っている場合、CSSを変更した後は必ずキャッシュをクリアしてください。管理画面 → WING → サイト管理 → 高速化 → コンテンツキャッシュ → クリア。これをしないと変更が反映されません。

iPhoneだけ直らない！iOS Safariの対処法📌

ID1370 図解3

PCのChromeでは直ったのに、iPhoneで確認するとまだバッジが2か所表示されている——そんなときはiOS Safariの描画バグが原因です。

SafariはCSSで position:absolute; bottom:4px のような位置指定をしても、ページの初期描画時に表示した位置を「ゴースト」として残すバグがあります。後からCSSで位置を動かそうとしても、最初に描画された場所のバッジが残ってしまうんです。

解決策：CSS全非表示＋JavaScriptで再表示

この問題を根本解決するには、CSSでいったん全バッジを非表示にしてから、JavaScriptでDOM読み込み後に正しい位置で再表示する方法が有効です。

/* CSS：全バッジを初期描画前に非表示 */
add_action('wp_head', function() {
  $st = '';
  $et = '';
  $css = '.cat-label{display:none!important;}';
  echo $st . $css . $et;
}, 1);

/* JavaScript：DOM読み込み後に正しい位置で再表示 */
add_action('wp_footer', function() {
  $sc = '';
  $ec = '';
  $js = '(function(){';
  $js .= 'var sel=".entry-card-thumb .cat-label,.eye-catch .cat-label";';
  $js .= 'document.querySelectorAll(sel).forEach(function(el){';
  $js .= '  el.style.setProperty("display","block","important");';
  $js .= '  el.style.setProperty("position","absolute","important");';
  $js .= '  el.style.setProperty("bottom","4px","important");';
  $js .= '  el.style.setProperty("right","4px","important");';
  $js .= '});';
  $js .= '})();';
  echo $sc . $js . $ec;
}, 99);

文字列を '<sc'.'ript>' のように分割しているのは、ConoHa WINGのWAF（セキュリティ機能）対策です。そのままコピーして使えます。

バッジを完全に非表示にする方法🎨

ID1370 図解4

位置調整で悩むくらいならバッジを表示しないという選択肢もあります。SEOへの影響はありません（カテゴリー情報はHTMLのmetaタグやサイトマップで検索エンジンに伝わるため）。

add_action('wp_head', function() {
  $st = '';
  $et = '';
  $css = '.cat-label{display:none!important;visibility:hidden!important;}';
  $css .= '.entry-card-categorys,.e-card-categorys{display:none!important;}';
  echo $st . $css . $et;
}, 1);

このコードをCode Snippetsに追加して有効化するだけです。すっきりしたデザインになり、バッジの位置問題も根本から解消します。

スクリーンショット画像に注意：バッジの「焼き込み」トラブル😅

ID1370 図解5

CSSでバッジを非表示にしたのに、特定のアイキャッチ画像だけバッジが残って見えるというケースがあります。

原因は画像ファイルへのバッジの「焼き込み」です。ブログのページをスクリーンショットで撮って、それをPNGに加工してアイキャッチにしていた場合、そのとき画面に表示されていたバッジがピクセルとしてPNGに取り込まれてしまいます。

この場合、いくらHTMLやCSSを変えても「画像の中のバッジ」は消えません。Pythonで画像ピクセルを確認する方法と修正方法を紹介します。

Python/Pillowでピクセルを確認・修正する

from PIL import Image, ImageDraw

img = Image.open("アイキャッチ.png")
pixels = img.load()

# バッジが疑われる範囲のピクセル色を確認
for y in range(20, 70):
    for x in range(20, 140):
        r, g, b = pixels[x, y][:3]
        # 青系（Cocoonのデフォルトバッジカラー）を検出
        if b > 150 and b > r * 1.5 and b > g * 1.2:
            print(f"x={x}, y={y}: RGB({r},{g},{b})")

青系のピクセルが検出されたら、その範囲を背景色で塗りつぶして修正します。

draw = ImageDraw.Draw(img)
# 検出された範囲をダークネイビーで塗りつぶす（実践編アイキャッチの場合）
draw.rectangle([(30, 28), (131, 65)], fill=(30, 41, 59))
img.save("アイキャッチ_修正済み.png")

修正後の画像をWordPressに再アップロードして、アイキャッチに設定し直せば完了です。

この問題を防ぐには、最初からPythonで背景・テキスト・キャラクターを合成して画像を作成するか、スクリーンショットをベースにしない方法をおすすめします。

まとめ：状況に合わせた対処法を選ぼう✨

ID1370 図解6
状況対処法
バッジの位置を変えたいCode SnippetsでCSS追加（.cat-labelの位置指定）
iPhoneだけ直らないCSS全非表示＋JavaScriptで再表示
もうバッジ自体いらないCSS display:none で完全非表示
画像にバッジが写り込んでいるPython/Pillowでピクセルを確認・塗りつぶし修正

今回の対処法はすべてAIへの相談から見つかったものです。「iPhoneだけ直らない」「画像のピクセルを調べる」という発想は、自分一人では思いつかなかったと思います。

AIに相談するときのプロンプト（そのまま使えます）

WordPressのCocoonテーマを使っています。
記事カードのカテゴリーバッジ(.cat-label)が左上と右下に2か所表示されています。
CSSで位置を変えようとしましたが、iPhoneのSafariだけ直りません。

環境：ConoHa WING（WAFあり）、Code Snippetsプラグイン使用
やりたいこと：バッジを右下1か所だけに表示したい（または完全に非表示にしたい）
試したこと：.cat-labelにbottom:4px; right:4pxを指定 → PCは直ったがiPhoneで再発

Code Snippetsに追加できるPHPコードで解決策を教えてください。

このプロンプトをClaude（クロコ）に送ると、環境に合わせた解決策を提案してくれます。

→ 実際のデバッグやりとりを全公開した記事はこちら【実践編】

→ ブログのアイキャッチをGeminiで統一する方法【入門編・プロンプト公開】

カテゴリー周りの整備が終わったら、ブログ全体の収益ロードマップも確認しておくと迷いません。
→ 副業ブログで月1万円稼ぐロードマップ【完全版・40代・AI活用】

コメント

タイトルとURLをコピーしました