「Cocoon アイキャッチ キャプションを 消したい」
「Cocoon アイキャッチ キャプション の見た目を変えたい」と思っていませんか。
Cocoonの標準設定と合わせてCSSを使えば、非表示・位置変更・背景や見た目の変更など柔軟に調整が可能です。この記事では、Cocoonのアイキャッチキャプションを非表示にする手順と、CSSでのデザインカスタマイズを解説します。CSSのサンプルはコピペで使える形にしています。
Cocoonのアイキャッチキャプションとは
「アイキャッチキャプション」とは、記事のアイキャッチ画像に付けられる説明文のことです。
役割としては、検索エンジンやユーザーにとって、画像の意味を補足する役割を果たします。
また、記事を開いた瞬間にアイキャッチと説明文がセットで表示されることで、記事テーマが直感的に理解しやすくなります。
アイキャッチキャプション設定方法
アイキャッチキャプションは、アイキャッチ画像を登録時に設定ができます。
まず、記事投稿画面の右上の黒い「設定」ボタンを押し、画面右側に設定メニューが表示されたら「アイキャッチ画像を設定」をクリックします。
「ファイルをアップロード」タブを選び「ファイルを選択」し希望の画像をアップロードします。
アップロードされた画像の「キャプション」に文字を入力し「アイキャッチ画像を設定」ボタンを押します。※同時に代替テキスト、説明等の他テキスト情報(サイトフロントに表示されません)も入力しておきます。
自動で記事投稿画面に戻ります。画面右側の設定メニューに「アイキャッチ画像」が小さく表示され、設定できたことがわかりますね。続いて「表示」(上部のPC型のアイコン)を選び、アイキャッチキャプションが実際にどのように表示されるか確認しましょう。
無事表示されていることが確認できました。
アイキャッチキャプションの非表示
アイキャッチキャプションは、Cocoon設定の画像タブで表示・非表示を選択可能です。
「アイキャッチにキャプションがある場合は表示する」にチェックを入れると表示され、チェックを外すと非表示になります。
チェックを外して表示を見ると、アイキャッチキャプションは非表示になりました。
もちろん、アイキャッチ画像を登録時に、キャプションを入力しなければ、アイキャッチキャプションは非表示です。
デフォルトのデザインとSEO
アイキャッチキャプションは、Cocoonの初期状態では、画像上にシンプルなスタイルで表示されます。スキンの仕様により、色や位置は変わることがあります。この記事で紹介している事例は、スキンを使用しておらず、アイキャッチ画像上の下部に、灰色の透過グラデーションの背景に白文字で表示されています。デフォルトの設定では、位置調整や装飾の自由度がないため、調整するにはCSSの追加が必要です。
デフォルトの白文字×濃色画像のケースでもSEO効果自体は維持されます。
白文字も背景と組み合わせて読みやすさを確保すれば問題がないのです。
重要なのはテキストがHTMLで存在し、読みやすいことです。可読性がUXを押し上げ、結果的に評価へ好影響が見込めますので、CSS調整の際も留意しましょう。
SEOについては別記事でもまとめてありますのでご参考ください。
アイキャッチキャプションをCSSで調整しよう
CSSで調整をする時は、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」に貼り付けて使えます。
下部に移動する
シンプルに、下部に移動した例です。背景色と白文字をやめ、読みやすいフォントサイズにしました。
CSSサンプル：
.eye-catch-caption {
color: #666;
bottom: -15px;
padding: 0em;
background: none;
position: unset;
font-size: 14px;
}
吹き出しで囲む
アニメ風の吹き出し風は、ポップで楽しいデザインです。
CSSサンプル：
.eye-catch-caption {
position: relative;
display: inline-block;
padding: 0.6em 1em;
background: #fff;
color: #333;
font-weight: bold;
border: 3px solid #000;
border-radius: 0.5em;
}
/* 吹き出し口（上向き） /
.eye-catch-caption::after {
content: “”;
position: absolute;
top: -11px;
left: 20px;
border-width: 0 12px 12px;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
/* 吹き出し口の枠線（疑似要素で重ねる） /
.eye-catch-caption::before {
content: “”;
position: absolute;
top: -15px;
left: 17px;
border-width: 0 15px 15px;
border-style: solid;
border-color: transparent transparent #000 transparent;
}
※もしもデザインで、角吹き出し口の三角の下に細い線が見えてしまう場合は、.eye-catch-caption::after {top: -11px; } 部分を -10px にして少し下にするなど調整すれば消えます。
丸端パネルで囲む
白文字に透過灰色の丸端のパネルに置くことで、様々な画像上でも安定して読みやすくなります。
CSSサンプル：
.entry-caption {
background: rgba(0, 0, 0, 0.35);
color: #fff;
padding: 8px 12px;
border-radius: 40px; }
線端を斜めにし、淡い背景色透過なしに応用。文字に影をつけて目立つようにした例です。
CSSサンプル：
.entry-caption {
background: rgba(130, 226, 225, 0.9);
color: #fff;
padding: 8px 12px;
border-radius: 40px 0 40px 0;
text-shadow: 1px 1px 3px #999;
}
和風掛け軸風
落ち着いた和風掛け軸風のデザインでしっとり大人の雰囲気です。
CSSサンプル：
.eye-catch-caption {
padding: 1em 2em;
background: #fefefe;
color: #2c2c2c;
font-weight: bold;
font-family: “Hiragino Mincho ProN”, “Yu Mincho”, serif;
border-top: 8px solid #8b0000;
border-bottom: 8px solid #8b0000;
border-left: 3px solid #000;
border-right: 3px solid #000;
position: relative;
font-size: 1.1em;
text-align: center;
}
/* 掛け軸の上下の丸棒 */
.eye-catch-caption::before,
.eye-catch-caption::after {
content: “”;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 6px;
background: #333;
border-radius: 3px;
}
ネオンサイン風
夜景や暗い画像に映えるネオンサイン風で目を引くデザインです。
CSSサンプル：
.eye-catch-caption {
font-size: 1.4em;
font-weight: bold;
color: #0ff;
text-shadow:0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #09f;
padding:0.8em 0.6em 0.2em;
}
※ネオン風にするには、color と text-shadow の組み合わせが肝心です。text-shadowの数値については、text-shadowジェネレーター等を参考にすると色から数値を決めやすいです。
text-shadow CSS GENERATOR https://web-generates.com/css-generator/text-shadow/
CSSが効かない時
追加したCSSが効かない場合は、以下を試してみてください。
・スキンによりクラス名やスタイルが変わる場合があるため、セレクタや数値はサイトの実態に合わせて適宜読み替えてください。ブラウザ検証ツールを使うと便利です。
・表示位置がずれる場合は、スキンによりpositionの指定が違う場合があるため、positionを変えてみてください。
・スキン側の強い指定や!importantに注意します。
・個別記事ごとにデザインを変えたい場合は記事のIDで絞り込みしてCSSに記載をします。
例： .postid-123 .entry-caption { background:rgba(0,0,0,.4); }
まとめ
いかがでしたか？今回の記事ではCocoonのアイキャッチキャプションの変更（非表示・CSS変更）についてご紹介しました。標準設定では難しい位置や装飾も、CSSなら柔軟に対応できます。
好みのデザインになるよう調整してみましょう。
おさらい
Cocoonの「アイキャッチキャプション」は、記事のアイキャッチ画像に文字を重ねて、読者に記事の内容を直感的に伝えられる便利な機能です。
特にSEOの面では、テキストがHTMLとして認識されるため、検索エンジンに記事テーマを補足的に伝える効果も期待できます。
また、CSSを工夫することで、吹き出し風や和風・レトロ風など、デザインを個性的に仕上げることも可能です。その際は、読みやすいフォントサイズ・背景との十分なコントラスト を意識して調整するのがポイントです。
キャプションはSEO効果とデザイン性の両立ができるパーツなので、自分のサイトやブログの雰囲気に合わせて活用してみましょう。
コメント