Cocoon_アイキャッチ画像の設定とアレンジ

「Cocoonで記事サムネイルを非表示にする方法は？」
「Cocoonでアイキャッチ画像のデザインを変えるには？」と思っていませんか？

記事や一覧ページに表示されるアイキャッチ画像は、サイトの見た目を左右する重要な部分です。記事で最初に表示されるのが、タイトルとアイキャッチ画像の部分だからです。

この記事では、Cocoonのアイキャッチの基本設定、管理画面に備わった自動生成機能、さらにCSSによるデザイン調整まで解説します。

アイキャッチとは
アイキャッチのメリット
アイキャッチの設定方法
Cocconの設定　アイキャッチ
CSSで変更できる種類と方法
まとめ
1. おさらい

アイキャッチとは

アイキャッチとは、記事の見出しに表示される、記事のサムネイル画像のことです。

これにより、記事や一覧ページに統一感を持たせたり、読者の目を引くことができます。
WordPressテーマ「Cocoon」では、アイキャッチの表示機能があります。また、アイキャッチ画像が記事一覧等のサムネイル画像として表示されます。

アイキャッチのメリット

アイキャッチを設定することで、記事一覧やSNSシェア時に見た目の印象が向上します。
読者が記事内容を直感的に理解しやすくなり、クリック率の向上にもつながります。
デザイン面だけでなく、サイト全体のブランディングにも役立ちます。

アイキャッチの設定方法

アイキャッチは、記事投稿画面で設定できます。右上の黒い「設定」ボタンを押し、画面右側に設定メニューが表示されたら「アイキャッチ画像を設定」をクリックします。

「ファイルをアップロード」タブを選び「ファイルを選択」し希望の画像をアップロードします。

アップロードされたら「アイキャッチ画像を設定」ボタンを押します。
※同時に代替テキスト、説明等の他テキスト情報(サイトフロントに表示されません)も入力しておきます。

自動で記事投稿画面に戻ります。画面右側の設定メニューに「アイキャッチ画像」が小さく表示され、設定できたことがわかりますね。続いて「表示」(上部のPC型のアイコン)を選び、アイキャッチキャプションが実際にどのように表示されるか確認しましょう。

Cocconの設定　アイキャッチ

Cocoonのデフォルトでは、記事ページと一覧ページの両方にアイキャッチ画像が表示されます。
管理画面の「Cocoon設定」→「画像」タブから、アイキャッチの表示・非表示や位置、リンク設定を変更できます。

本文上のアイキャッチを表示・非表示

本文上にアイキャッチを表示する場合はチェックします。表示しない場合はチェックを外します。チェックを外すと、トップページやカテゴリ、関連ページ、SNS投稿時にはサムネイル画像が表示されますが、本文上部のみ表示しないことができます。

左が本文上に「アイキャッチ」を表示しない例、右が表示した例です。

本文上にアイキャッチがあると、記事の内容が視覚的に伝わりやすくなります。

SNSや他サイトからリンクしてきた時にも、同じ画像があることで安心感がありますね。

「アイキャッチの表示」で設定可能なオプション

「アイキャッチの表示」で設定できる内容は他にもあります。

「アイキャッチの表示」のオプション要素の表示・非表示の設定ができます。
・アイキャッチラベルを表示・非表示（本文エリア）
・アイキャッチにキャプションがある場合は表示する

左が「アイキャッチラベル」「アイキャッチキャプション」を表示しない例、右が表示した例です。

「アイキャッチ」画像の表示位置を中央寄せにしたり、小さい画像を自動でカラム幅に大きく表示することもできます。
・アイキャッチを中央寄せする（本文エリア）
・アイキャッチをカラム幅に引き延ばす

アイキャッチの自動設定・自動生成

「アイキャッチ画像を作るのが面倒」という方におすすめの設定が２つあります。
1つ目は、「自動設定」です。管理画面の「Cocoon設定」→「画像」タブ→「アイキャッチ自動設定を有効にする」にチェックを入れると、記事本文中の最初の画像をアイキャッチにしてくれます。

この機能を使う場合は、最初の画像を、アイキャッチ画像の推奨サイズ1200px×630pxで作成しておくと良いでしょう。小さい画像だと、引き延ばされて表示され画像がぼやけてしまいます。

「アイキャッチ画像を作るのが面倒」という方におすすめの設定2つ目は、アイキャッチ画像の自動生成です。記事タイトルと枠のシンプルなデザインですが、記事作成の効率化やサムネイルの統一感アップには便利な機能です。詳しくは下記の記事をご参照ください。

CSSで変更できる種類と方法

より細かいデザイン調整をしたい場合は、CSSを使ってアイキャッチの大きさや形、枠線、影などをカスタマイズできます。
「外観」→「カスタマイズ」→「追加CSS」にコードを追加するだけで反映可能です。
丸型にしたり、角丸加工、透過処理など、幅広い調整ができます。

オリジナルCSSの追加方法の記事もあわせて、ご参照ください。

アイキャッチ画像の形を楕円形にする

CSSならアイキャッチ画像を楕円形にすることも可能です。

[CSSサンプル]
.entry-eye-catch img {
border-radius: 50%; /* 丸型に */
}

上記のCSSの、「border-radius」の「％」の値を調整することで、好みの角丸にできます。

[CSSサンプル]
.entry-eye-catch img {
border-radius: 5%; /* 角丸に */
}

アイキャッチ画像に影をつける

画像に影（シャドウ）を付けると、デザインに立体感を出すことができます。

[CSSサンプル]
.entry-eye-catch img {
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

アイキャッチを写真風にする

白いフチと影を付けて「写真っぽさ」を演出できます。更に斜めに傾けてみました。

[CSSサンプル]
.eye-catch-image {
border: 8px solid #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transform: rotate(-2deg);
}

アイキャッチ画像をポラロイド写真風にする

インスタント写真風の白枠で囲み、キャプションを手書きコメント風に表現しました。

[CSSサンプル]
/* ポラロイド風アイキャッチ */
.eye-catch-wrap {
display: inline-block;
background: #fff;
padding: 10px 10px 25px;
box-shadow: 0 6px 15px rgba(0,0,0,0.4);
text-align: center;
}

.eye-catch-wrap img {
display: block;
width: 100%;
height: auto;
border: 1px solid #ddd;
}

/* キャプション部分 */
.eye-catch-caption {
margin-top: 8px;
font-family: ‘Shadows Into Light’, ‘Comic Sans MS’, cursive;
font-size: 1.1em;
color: #333;
font-style: italic;
}