第１部：【Cocoon】アイキャッチ自動生成をランダムカラーに変える方法
【重要な免責事項】 この記事は私がCocoonテーマのアイキャッチ画像自動生成機能をカスタマイズした体験記です。実装前には必ずサイトの完全バックアップを取得してください。設定ミスによりサイトが表示されなくなるリスクがあります。サーバー環境やテーマのバージョンによっては正常に動作しない場合があります。本記事の情報を基に行った変更による問題について、筆者は責任を負いかねます。
はじめに
今回は私がWordPressサイト（Cocoonテーマ使用）で実施したアイキャッチ画像のランダムカラー化について解説します。
Cocoonの「タイトルからアイキャッチを自動生成する」機能が2025年初めにβ版として実装されてから、一部で活用され始めています。
しかし、デフォルト設定では毎回同じ色の組み合わせになってしまいます。
私は「内容勝負！」と思っていたこともあり、昔からサムネ画像(アイキャッチ)を拾ってくるのが面倒で、No Imageで投稿することも多々ありました。
(そして、まとめて後から画像を選ぶのです…)
少しこの自動生成機能を使い始めてから気づいたのは、毎回同じ色だと正直飽きる(第１部、本記事内容)ということでした。
また、私はプロフィールも作らずサイト運営を続けていたので、この機能のデフォルトでついてくる「アバター」も消したい(第２部記事内容)と思ってしまいました。
※詳細はホーム１番下に書いてます。
この記事のレベルと次のステップ
この記事（第1部）で実現できること：
- アイキャッチのランダムカラー化
- 毎回違う色合いで視覚的マンネリを解消
- 比較的簡単な実装（3つのフィルターのみ）
第2部で実現できること：
- タイトル・投稿者名・アバターの個別オンオフ制御
- 記事の性質に応じた表示パターンの使い分け
- より高度なカスタマイズ（関数の完全オーバーライド）
「ランダムカラーだけで十分」という方は、この記事で完結します。
(プロフィールもちゃんと作っている偉い方)
「もっと細かく制御したい」という方は、実装後に第2部もご検討ください。
この記事で実現できること：
✅ 完全ランダムカラー：毎回異なる色の組み合わせ
✅ マンネリ完全解消：全く同じ見た目のアイキャッチとはおさらば
✅ コピペで完了：複雑な設定は一切なし
✅ 自由な組み合わせ数：5通りでも1,000通りでも思いのまま
第1章：「ずっと同じ色は正直飽きる」問題
現状の課題
Cocoonの自動生成機能は確かに便利です。でも、デフォルト設定では毎回同じ色の組み合わせになってしまい、これでは：
- 読者が「また同じ感じか」と思う（単純に私がそう思いました）
- サイト全体が単調な印象になる（クローンを見ている気分）
- 他のCocoonサイトとの差別化ができない
「ランダムカラーで楽になりたい」という発想
結局、「毎回色を考えるのって、正直面倒…」と私は思ってしまいました。
よくよく観察してみると、アイキャッチの構造は実はシンプルです：
- 四角い枠の辺の部分の色（ボーダー色）
- 面を塗りつぶす色（背景色）
- 文字の色（テキスト色）
この3つだけ。それなら：
「この3つの要素に、それぞれ色の候補をいくつか用意しておき、毎回ランダムで選んでもらえれば楽なのでは？」
そう思い立ったことがこのカスタマイズの始まりでした。今回の実装と過程は、「楽をするのために努力する」の典型ですね。
第2章：数学的な組み合わせの魅力
選択肢は自由自在
色の候補数は完全に自由です。私も最初は「5色くらいでいいかな」と思っていました：
控えめなバリエーション（最初の私）
- 各5通り → 5 × 5 × 5 = 125通り
でも、実際に運用してみると「もう少しバリエーションが欲しいな」と思うようになって：
程よいバリエーション
- 各10通り → 10 × 10 × 10 = 1,000通り
最終的に、「どうせなら思いっきりやってみよう」ということで現在の設定に：
私の現在の設定（宇宙テーマ）
- 各15通り → 15 × 15 × 15 = 3,375通り
私の場合の実装では、同じ組み合わせに遭遇する確率は極めて低く、毎回新鮮な印象を与えられます。
なぜこの組み合わせが破綻しないのか
ランダムでも美しい組み合わせになる秘密は、「色の選定基準」にあります：
明度差の確保（一番重要！）
- 背景色：暗い色系で統一
- テキスト色：明るい色系で統一
- 結果：どの組み合わせでも文字がちゃんと読める
実際の体験(試行錯誤)では、時々「文字が見えにくい」組み合わせが出てしまい、そこで学んだのが、この明度差の重要性でした。
私のサイトでイメージが付きやすい簡単な例に挙げれば、背景がご覧の通り暗めなのに、もし文字テキストが黒系統ならもはや見えないのです。
ですので、見える色を15パターン、いいものを選定するわけです。
色相の調和（意外に大事）
- 同じテーマ内での色選定
- 極端に異なる色味は混在させない
- 結果：「宇宙っぽさ」を保った統一感
第3章：実装コードとカラーパレットの実例
重要な前置き
以下のコードは私のサイト（宇宙テーマ）専用です。そのままコピペしても、あなたのサイトには合わない可能性が高いです。色の部分を、あなたのサイトに合わせて変更してから使用してください。
私が実際に使っているコード
以下が、私のCocoon子テーマのfunctions.phpに追加している実際のコードです：
// アイキャッチ画像のランダム色設定（宇宙テーマ専用）
function my_site_random_eyecatch_colors() {
// 背景色の配列（深い青～紫系：私のサイト用）
$bg_colors = [
'#060b25', '#0f1942', '#1a1035', '#0d1c26', '#131217', '#0A0F20',
'#151326', '#1B1F3B', '#16213E', '#0D1B2A', '#17223B', '#121629',
'#0F111A', '#0B132B', '#1A1B41'
];
// テキスト色の配列（金色～ライトカラー系：私のサイト用）
$text_colors = [
'#FFE5A3', '#E5D0B1', '#F0C987', '#DCD0FF', '#A7D8FF', '#FFD700',
'#C4B1E6', '#EAAC8B', '#E2C275', '#F7D08A', '#BCDBDF', '#FFEFD3',
'#BDB2FF', '#FFD9CE', '#FFC857'
];
// ボーダー色の配列（中間色～アクセントカラー：私のサイト用）
$border_colors = [
'#2d3168', '#4A5086', '#6A4978', '#3D5A80', '#48416C', '#563D7C',
'#3A506B', '#6D597A', '#533747', '#415A77', '#5C6E91', '#4B3F72',
'#524B58', '#3A5E8C', '#4A4E69'
];
// 各色をランダムに選択するフィルターを設定
add_filter('featured_image_background_color_code', function() use ($bg_colors) {
return $bg_colors[array_rand($bg_colors)];
});
add_filter('featured_image_text_color_code', function() use ($text_colors) {
return $text_colors[array_rand($text_colors)];
});
add_filter('featured_image_border_color_code', function() use ($border_colors) {
return $border_colors[array_rand($border_colors)];
});
}
// 関数を実行
my_site_random_eyecatch_colors();コードの仕組み解説
array_rand()の魅力
$bg_colors[array_rand($bg_colors)]
この1行が全ての魔法です。配列からランダムに1つの色を選択してくれます。
毎回違う色が選ばれるため、私も「今回はどんな組み合わせかな？」と楽しみながら記事を投稿しています。
use構文のテクニック
function() use ($bg_colors) {
return $bg_colors[array_rand($bg_colors)];
}
これは「クロージャ」という仕組みで、関数の外で定義した配列を関数の中で使えるようにする魔法の呪文です。
最初は「なにこれ？」と思いましたが、使ってみると便利でした。
実際の宇宙テーマカラーパレット
私のサイトで実際に生成される色の組み合わせサンプルを用意しました：
🌌 宇宙テーマカラーパレット画像
どのパターンも統一感がありながら、それぞれ違った印象を与えます。これが「適切な色選定」の威力です。
あなたのサイトに合わせた色選定例：カラーパレットのご提案
他のテーマでの色選定例を考えておきました。代わりにご紹介します。
※しかし、私のサイトが暗めの背景で一般的な白地背景ではないため、実際に白地系統の背景に実装した場合に異なるイメージを持つ可能性があることをご承知ください。
というか、それはもうご自身のセンス・感覚を信じるか、うまくやってください。
こちらで8つのテーマカラーパレット集を用意しています：
- 🌊オーシャン / 🌇サンセット / 🍂オータム / 💜ラベンダー
- 🌿ミント / ⚫モノクローム / 👑ロイヤル / 🏔️アースト ーン
また、こちらは、美しさ際立つCocoonのgrayishに合いそうなテーマカラーパレットを別に選定しておきました。
いずれのサンプルも、ランダム実装の一部であることをご承知おきください。
色選定の3つのルール（失敗から学んだこと）
1. 明度差を確保する（最重要！）
- 背景は暗め、テキストは明るめに統一(私の場合)
- コントラスト比を意識した選定
2. 色相を統一する（意外に大事）
- サイトのテーマカラーに合わせた色系統
- 極端に異なる色味は混在させない
3. 彩度をコントロールする（上級者向け）
- 派手すぎず、地味すぎない程よいバランス
- ブランドイメージに合った彩度レベル
これは正直、感覚的な部分が大きいです。
同じ彩度レベルで統一すると、不思議と調和が取れるはずです。
第4章：実装時の注意事項：失敗談
必須の事前準備
私も過去に「バックアップを取らずに作業して冷や汗をかいた」経験があります。まぁ以外と何とかなりますけど。
以下は絶対に守ってください：
完全バックアップの取得
- WordPress全体のバックアップ
- データベースのバックアップ
子テーマの使用確認
- 親テーマの直接編集は絶対に避ける
- 子テーマのfunctions.phpに追加
段階的な実装（一般的な話、ここでは別に大丈夫）
- まず3色程度で動作確認
- 問題なければ色数を増やす
トラブルシューティング（実体験ベース）
Q: アイキャッチが生成されない A: 私も最初にやった間違いですが、以下を確認してください：
- Cocoonの自動生成機能が有効になっているか
- 子テーマのfunctions.phpに正しく追加されているか
Q: エラーが発生する A: 焦らず、追加したコードをコメントアウトして原因を特定：
// my_site_random_eyecatch_colors(); // 一時的にコメントアウト
Q: 色の組み合わせが気に入らない A: これは完全に好みの問題です。配列内の色を好みに合わせて変更してください。
カラーコードは16進数（#で始まる6桁）で指定します。私も最初は「この組み合わせ微妙だな」と思う色があり、何度か調整しました。
設定の確認方法
設定が正しく機能しているか確認するには、シークレットモード（プライベートブラウジング）を使うのがベストです。毎回キャッシュをクリアしたりリロードしたりする手間が省けます。
シークレットモードの開き方
- Google Chrome: Ctrl + Shift + N (Windows/Linux) または Command + Shift + N (Mac)
- Firefox: Ctrl + Shift + P (Windows/Linux) または Command + Shift + P (Mac)
- Edge: Ctrl + Shift + N (Windows) または Command + Shift + N (Mac)
- Safari: Command + Shift + N
新しい記事を投稿して、アイキャッチが毎回違う色で生成されることを確認してください。
まとめ
実装してみた感想
正直に言うと「もう元には戻れない」です。
毎回違うアイキャッチが生成される楽しさもありますが、何より「アイキャッチの色をどうしよう」と悩む時間がゼロになったのが最大のメリット。記事を書くことに集中できるようになりました。
この方法を実装すると、あなたのCocoonサイトは確実に他と差別化されます。訪問者は「なんか他のサイトと違うな」と感じるはずです。
最後に重要な注意
- 必ずバックアップを取ってから実装してください（これだけは絶対に！）
- 問題が発生した場合は、追加したコードを削除すれば元に戻ります
- より詳細なサポートが必要な場合は、Cocoonコミュニティで相談してください
- サンプルコードをそのまま使わず、必ずあなたのサイトに合わせて色を調整してください
次のステップ：さらなるカスタマイズへ
この記事の方法で、アイキャッチのマンネリは確実に解消されます。
でも、使い続けていると「もっと自由に制御したい」という欲が出てくるかもしれません：
- 「シンプルにタイトルだけの記事があってもいいな」
- 「ゲスト投稿の時は投稿者名をしっかり出したい」
- 「プロフィール記事はアバターも表示したい」
そんな時は、第2部：完全制御編で、タイトル・投稿者名・アバターを個別にオンオフできる高度なカスタマイズをご紹介しています。
まずはこの記事の方法を試してみて、「物足りない」と感じたら次のステップに進んでみてください！
あなたのサイトも、ランダムカラーの美しいアイキャッチで読者を魅了してください。
