ブログを書くとき、一番時間がかかるのが「アイキャッチ画像（記事の表紙）」の作成ではないでしょうか。Cocoonの最新機能を使えば、その作業を完全になくすことができます。
1. 準備：機能を「有効」にする
まずは、投稿画面に「自動生成」のスイッチが出るように設定しましょう。
- WordPressメニューの「Cocoon設定」→「Cocoon設定」を開きます。
- 上の方にある「エディター」タブをクリックします。
- 画面を少し下にスクロールして、「『タイトルからアイキャッチを生成する』機能を有効にする」にチェックを入れます。
- 一番下の「変更をまとめて保存」を押します。
2. そのまま使うのが一番安心
この機能は、設定画面からボタン一つで色を変える機能が今のところありません。色の変更には「プログラムの書き換え」が必要になりますが、これには注意が必要です。
- サポート対象外： 自分でコードを書き換えた場合、不具合が起きても公式のサポートを受けることができません。
- バックアップが必要： 万が一、入力ミスがあるとサイトが真っ白になってしまうリスクもあります。
まずはCocoonが用意してくれた「標準のデザイン」で使ってみましょう。シンプルで清潔感があるため、どんなブログにも馴染みやすいのが魅力です。
3. 実際の使いかたと「魔法のコツ」
設定ができたら、記事を書いてみましょう。
- 記事のタイトルを入力します。
- 右側のパネルにある「タイトルからアイキャッチを生成する」にチェックを入れます。
- 「公開」または「保存」ボタンを押します。
【ここが重要！】
保存した直後は、画面に画像が出てこないことがあります。その時はブラウザの「更新（リロード）」ボタンを一度押してください。これで、カスタマイズした色の画像がパッと現れます。度押してください。これで生成された画像が表示されます。
4. 注意点：タイトルの長さに気をつけよう
画像作成を自動にお任せする場合、タイトルの長さには少しだけ気を配りましょう。
あまりに長いと文字が小さくなってしまうので、30文字前後にまとめると、パッと見て内容が伝わる綺麗なアイキャッチになります。
5. 色を変更するカスタマイズ【自己責任】
自己責任になりますが、デザインを変更したい場合は、以下のコードを使います。
WordPressの「外観」→「テーマファイルエディター」から functions.php に貼り付けるだけで、画像の色がガラッと変わります。
カスタマイズ例
1. 爽やか・清潔感（ブルー系）
ビジネスやハウツー、誠実な印象を与えたいブログにぴったりな、爽やかな組み合わせです。
// 背景色を薄い水色に変更
add_filter('featured_image_background_color_code', function($color_code) {
return '#f0f8ff';
});
// テキスト色を濃い紺色に変更（読みやすさ重視）
add_filter('featured_image_text_color_code', function($color_code) {
return '#003366';
});
// ボーダー色を落ち着いた青に変更
add_filter('featured_image_border_color_code', function($color_code) {
return '#4682b4';
});2. 優しい・ナチュラル（カフェ・ベージュ系）
日記やライフスタイル、暮らしの知恵などを発信するブログに合う、温かみのある配色です。
// 背景色をやわらかいベージュに変更
add_filter('featured_image_background_color_code', function($color_code) {
return '#fffaf0';
});
// テキスト色を温かい茶色に変更
add_filter('featured_image_text_color_code', function($color_code) {
return '#5d4037';
});
// ボーダー色を明るいブラウンに変更
add_filter('featured_image_border_color_code', function($color_code) {
return '#d2b48c';
});3. モノトーン・スタイリッシュ（白×黒）
どんなテーマにも馴染む、シンプルで都会的なデザインです。迷ったらこれが一番失敗しません。
// 背景色を真っ白に変更
add_filter('featured_image_background_color_code', function($color_code) {
return '#ffffff';
});
// テキスト色をパキッとした黒に変更
add_filter('featured_image_text_color_code', function($color_code) {
return '#222222';
});
// ボーダー色を薄いグレーにして上品に
add_filter('featured_image_border_color_code', function($color_code) {
return '#cccccc';
});
アイキャッチを変更する（戻す）3ステップ
- 今のアイキャッチを「解除」する
- メディアライブラリから「完全に削除」する
- もう一度「保存」して再生成する
画像がどうしても切り替わらない時の対処法
タイトルを直したり、色を変えるカスタマイズ（関数変更）をしたりしたのに、以前の画像がしつこく残ってしまうことがありますよね。
メディアライブラリの画像と、実際の編集画面で表示が食い違っているときは、以下の手順を試してみてください。
「1回転保存」で強制更新！
- メディアライブラリで対象の画像を開き、「画像を編集」をクリックします。
- 「保存」ボタンを押したいのですが、何もしていないとボタンが押せません。
- そこで、画像を「右に回転」ボタンを4回（または左右1回ずつ）押して元の向きに戻します。
- 画像を触ったことで「保存」ボタンが有効になるので、そのまま保存します。
これで、システム側に「新しい画像データですよ」と認識させることができ、最新のアイキャッチが正しく反映されるようになります。
まとめ
Cocoonの「アイキャッチ自動生成」は、画像を作る時間を「ゼロ」にしてくれる、執筆に集中したい人のための強い味方です。
- 「エディター」タブで機能を有効にする
- 色を変えたい時は専用のコードを貼り付ける
- 投稿画面でチェックを入れて保存＆リロード
画像作りが面倒で更新が止まってしまう……という方は、ぜひこの機能を試してみてください。驚くほどスムーズに記事が公開できるようになりますよ！
コメント