cocoon

【Cocoon】アイキャッチ画像について初心者にも分かりやすく!

cocoon

アイキャッチ画像とは何か

アイキャッチ画像は

ユーザーの目(アイ)を引きつける(キャッチ)するための画像で

記事がどんな内容なのかを目視的に分かりやすくするものですね

こんなやつです

Cocoonのアイキャッチ画像に関する設定

Cocoonではアイキャッチ画像に関する設定を

自分で決める事ができる便利な機能があります

Cocoon設定の中の「画像」をクリック

画面をスクロールしていくと

「アイキャッチの表示」、「アイキャッチの自動設定」という欄があります

ここでアイキャッチ画像に関する設定をする事ができます

では、項目ごとに一つずつ説明してこうと思います

 

本文上にアイキャッチを表示する

投稿や固定ページのタイトルの下に

アイキャッチ画像を表示させるかどうかのことです

 

アイキャッチラベルを表示する

アイキャッチラベルというのは

この画像で言うと黄色い背景にアニメと書いてあるやつです

これのおかげでカテゴリーが一目で分かります

これを表示するかどうかですね

 

アイキャッチ の中央寄せ

これは投稿や固定ページのタイトルの下に表示する

アイキャッチ画像を中央寄せにするかどうかです

 

アイキャッチをカラム幅に引き伸ばす

これは

「本文上にアイキャッチを表示する」を設定していて、

アイキャッチ画像が小さかった場合に

タイトルの下に表示されるアイキャッチ画像を自動で引き伸ばして

大きくする設定をするかどうかです

 

アイキャッチにキャプションがある場合は表示する

アイキャッチ画像にキャプションがある場合

それを表示させるかどうかです

 

アイキャッチ自動設定を有効にする

これは投稿や固定ページの本文のなかで最初に出てくる画像を

自動でアイキャッチ画像に設定するかどうかです

少し使いずらいのでこの下にある方法を使って

手動でアイキャッチ画像を設定することをオススメします

 

Cocoonで投稿にアイキャッチ画像を設定する方法

Cocoonで投稿にアイキャッチ画像を設定する場合は

まず、アイキャッチ画像を設定したい投稿の編集ページ内で

画面の一番下までスクロールしていき

「アイキャッチ画像を設定」をクリック

すると

このような画面になるので「ファイルをアップロード」をクリック

あとは「ファイルを選択」をクリックして

自分の好きな画像を選択してください

設定が終わると

このように設定した画像が表示されます

表示されている画像が切れていても全然大丈です

これで完了です

ですが、

このまま「よしやってみよ」と意気揚々にやってみても

上手くいかない事が多々あると思います

 

アイキャッチ画像がはみ出す時の対処法

こんな感じで思ってたのと違うモノになる事があります

この画像を設定したんだから

そのまま出てよと思うかも知れませんが

画像が大きかったり、あまり横長でないと

真ん中の方をくり抜いて表示されてしまうのです

そんな時は

このように上下左右(特に左右)に

余裕を持たせた画像を設定することを

オススメします

または

設定する画像を選ぶところから

「画像を編集」を選びサイズを小さくして試してみましょう

*画像はかなり小さくしなくてはならないかも知れません*

アイキャッチ画像を小さくすると

「本文上にアイキャッチを表示する」を設定している場合

タイトルの下に表示される画像も小さくなってしまいます

その対策としては

まず下のcssコードをコピーします

.eye-catch {
display: none;
}

(最初の「.」もコピーできていますか?)

これをコピーできたら

投稿の編集ページで一番下まで画面をスクロールすると

カスタムcssという欄があるので

ここに貼り付けます

これをするとタイトルの下に画像は表示されなくなります

あとは

このように本文に画像を貼る事で

再現する事ができます

*この方法だと投稿日や更新日の表示が画像の上に変わります*

 

オススメのアイキャッチ画像作成ツール

アイキャッチ画像を作るのにオススメな

無料のサイト「Canava」がこちらです↓

Attention Required! | Cloudflare

なんか英語で難しそうと思うかも知れませんが大丈夫!

サイトに飛んだら日本語ですのでご安心ください

有料版もありますが無料版でも十分使えますよ!

タイトルとURLをコピーしました