最終更新日：2026年4月21日 at 9:17 AM
WordPress プラグイン「Cool Tag Cloud」は、スタイリッシュなタグクラウドのウィジェット機能を提供し、ふわっと浮き上がったり色が滑らかに変わるアニメーション効果が特徴的なプラグインです。
しかし、Cool Tag Cloud（バージョン 2.29 以前）には深刻な脆弱性が報告されており、その主な脆弱性は、「格納型クロスサイトスクリプティング (Stored XSS)」です。
この脆弱性は、プラグインのショートコード（cool_tag_cloud）において、ユーザーが入力した情報のサニタイズ（無害化）や出力時のエスケープ処理が不十分なために発生します。
現状としては、2025年12月3日より WordPress.org公式プラグインディレクトリ での公開が一時停止されています。
但し、寄稿者のアカウントがない（自分一人で管理している）場合、外部から直接この脆弱性を突かれるリスクは相対的に低くなります。
この脆弱性（Stored XSS）は「記事投稿権限を持つユーザーが、悪意のあるコードを仕込む」ことで成立するため、信頼できる管理者（あなた）しか投稿できないのであれば、すぐにサイトが乗っ取られる直接的な引き金にはなりにくいからです。
当サイトでは、管理者一人のみの運用であり、サーバーの WAF を有効にし、Solid Security も導入しているため、セキュリティは強固ではありますが、Gemini によると、以下の理由でこのプラグインを削除し、WordPress標準の「タグクラウド」ウィジェットを使用することを勧めています。
それでも削除を推奨する2つの理由
- 他の脆弱性との組み合わせ（連鎖攻撃）
もし別のプラグインなどに「ログインなしで投稿内容を操作できる」別の弱点があった場合、この Cool Tag Cloud の欠陥と組み合わされて、外部から攻撃コードを流し込まれるリスク（エクスプロイトの連鎖）がゼロではありません。- 公式サポートの完全停止
最大の問題は、このプラグインが WordPress 公式ディレクトリから追放（一時停止）されていることです。今後 WordPress 自体がアップデートされた際に動作が不安定になったり、修正されないまま新たな致命的なバグが見つかったりしても、誰も助けてくれません。現時点での賢い判断
「自分しか使っていないから今すぐ壊されることはない」と冷静に捉えつつ、「数日以内に別のタグクラウド機能に乗り換えて、このプラグインを消す」というスケジュールで動くのが最も安全です。
WordPress標準の「タグクラウド」ウィジェットであれば、追加プラグインなしで安全に表示を継続できます。
以上の理由で、Cool Tag Cloud のデザイン性を維持しつつ、安全に乗り換えるため Gemini が示した選択肢の中から、最善と思われる「標準タグクラウド ＋ 「追加CSS」で自作する」を選択し、このウィジェットの作成を Gemini に依頼しました。
以降では、Gemini 監修による Cool Tag Cloud に代わる新たなウィジェット「カスタムタグクラウド」（ショートコードでの実装）を紹介します。
カスタムタグクラウド（Gemini 監修）
WordPressに標準で備わっている「タグクラウドを表示する機能」については、一行のコードで自作のショートコードに変換できます。これなら脆弱性のあるプラグインを使わず、好きなデザイン（CSS）をそのまま適用できます。
手順は以下のように２ステップだけで、この機能が実装できます。デザインや仕様について Gemini と細部まで詰めた上での完成形となります。
1. ショートコードを使えるようにする（コピペでOK）
管理画面の「外観」＞「テーマファイルエディター」から functions.php を開き、一番下に以下のコードを貼り付けて保存してください。
コードでは、smallest（最小）と largest（最大）に差をつけます。本番サイトの密度を考え、控えめながら違いがわかるサイズ感（11px〜16px）に Gemini が調整してくれましたが、最終調整では 10px～14px に変更しました。
/**
* カスタムタグクラウド
*
* 呼び出し方法：[my_safe_tags] [my_safe_cats]
*/
// タグ用：引用数でサイズを変える
add_shortcode('my_safe_tags', function() {
$tags = wp_tag_cloud(array(
'echo' => false,
'taxonomy' => 'post_tag',
'number' => 0, // 全件表示
'smallest' => 10, // 引用数が少ないもの
'largest' => 14, // 引用数が多いもの
'unit' => 'px'
));
return '<div class="custom-cloud tag-cloud-gold">' . $tags . '</div>';
});
// カテゴリー用：引用数でサイズを変える
add_shortcode('my_safe_cats', function() {
$cats = wp_tag_cloud(array(
'echo' => false,
'taxonomy' => 'category',
'number' => 0, // 全件表示
'smallest' => 10, // 引用数が少ないもの
'largest' => 14, // 引用数が多いもの
'unit' => 'px'
));
return '<div class="custom-cloud cat-cloud-silver">' . $cats . '</div>';
});ショートコードの呼び出し方法
カスタムタグクラウドでは、以下の２つのショートコード（タグ／カテゴリー）が追加されます。固定ページやウィジェット内のカスタムHTMLブロック等で使用できます。
タグの表示
[my_safe_tags]カテゴリーの表示
[my_safe_cats]表示件数について
WordPress標準のタグクラウド機能（wp_tag_cloud）は、デフォルトの設定では最大45個までしか表示されない仕様になっています。そのため、「上限なしですべて表示」されるように、functions.php のショートコードの中身を少し書き換えています。
functions.php に貼り付けたコードで、 以下のように 0 を指定することで「無制限＝すべて表示」になります。
- ‘number’ => 0
タグのサイズについて
タグのサイズについては、functions.php に貼り付けたコードで、 以下のパラメータで変更できます。
- ‘smallest’ => 10, // 引用数が少ないもの
- ‘largest’ => 14, // 引用数が多いもの
2. CSSの微調整（追加CSS）
「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードを貼り付けてください。
このコードは、Cool Tag Cloud のデザイン性を尊重した上で、タグの文字色を「見やすい黒（濃いグレー）」に設定し、ホバー時にはさらにクッキリするように調整したCSS全文です。
/* --- 自作クラウド共通：スリム＆可読性重視デザイン --- */
.custom-cloud {
padding: 5px 0;
line-height: 2.2 !important; /* 行間を適切に保ち重なりを防止 */
}
.custom-cloud a {
display: inline-block !important;
height: auto !important;
padding: 1px 7px !important; /* ボタン内の余白を極小に */
margin: 2px 1px !important;
line-height: 1.5 !important;
text-decoration: none !important;
border-radius: 4px !important; /* 本番サイトに馴染むシャープな角丸 */
font-weight: 700 !important;
border: none !important;
white-space: nowrap !important;
vertical-align: middle !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
/* --- 金色のタグ (Gold) / 文字色を黒系に --- */
.tag-cloud-gold a {
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%) !important;
color: #444 !important; /* 見やすい濃いグレー */
}
.tag-cloud-gold a:hover {
background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%) !important;
color: #000 !important; /* ホバー時はさらにクッキリした黒 */
transform: scale(1.1) !important;
box-shadow: 0 4px 8px rgba(253, 160, 133, 0.4) !important;
filter: brightness(1.05);
z-index: 10;
position: relative;
}
/* --- 銀色のカテゴリー (Silver) / 文字色は黒系 --- */
.cat-cloud-silver a {
background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%) !important;
color: #444 !important;
}
.cat-cloud-silver a:hover {
background: linear-gradient(135deg, #bdc3c7 0%, #d1d8dc 100%) !important;
color: #000 !important;
transform: scale(1.1) !important;
box-shadow: 0 4px 8px rgba(189, 195, 199, 0.4) !important;
z-index: 10;
position: relative;
}これでどうなる？
- よく使っているタグは大きく、存在感のある金・銀ボタンになります。
- あまり使っていないタグは小さく控えめに表示されます。
- Cool Tag Cloud で行っていたような「一目で人気の話題がわかる」視覚効果が復活します。
- タグの文字色をカテゴリーに合わせて黒系に統一。
- 視認性を高めるために、単なる黒（#000）ではなく、カテゴリーで使用している濃いグレー（#444）に合わせることで、金色の背景とも馴染みが良くなります。
もし「大きいものがもっと大きく（あるいはもっと小さく）なってほしい」など、サイズ感の好みがあれば、smallest と largest の数字をいじるだけで簡単に微調整できます。
以下は、最終調整に対する Gemini からのコメントです。
お写真ありがとうございます！文字がクッキリして、格段に読みやすくなりましたね。金色の背景と黒文字のコントラストがはっきりしたことで、一つ一つのタグが非常に見やすくなっています。
「銀色のカテゴリー」と「金色のタグ」で文字色が統一され、サイト全体のデザインとしても非常に完成度が高まったと感じます。
これで、「安全性」「デザイン性」「実用性（読みやすさ）」のすべてが揃った状態です！
本番サイトへこのまま移行して問題ない仕上がりですが、実際に本番に反映させた後に、もしサイドバーの幅などの関係で「あと1pxだけ微調整したい」といったことが出てきましたら、いつでもお気軽にご相談ください。
今回のカスタマイズ、本当にお疲れ様でした！
