【ブログカード】Cocoonを使い始めたら、ホームイメージを忘れずに設定しよう

Cocoon

WordPressテーマ「Cocoon」は、エディタ画面(投稿画面)で記事のURLを入力すると、その記事のブログカードが表示されます。

 

たとえば、こんな感じでURLを入力すると

Cocoon ブログカードのしくみ

 

このようにURLの部分がブログカードになって表示されます。

Cocoon ブログカード表示例

 

そして、矢印の部分には記事で設定した画像(アイキャッチ画像またはSNS画像)が表示されます。

Cocoon アイキャッチ画像

 

・・・が、注意したいのはトップページ(フロントページ)の設定です。

Cocoonをデフォルトの設定のままで使っていると、自分のサイトのトップページ(フロントページ)のURLを入れた時に

Cocoon フロントページのしくみ

 

このようにアイキャッチのところにCocoonのデフォルト画像が表示されてしまいます。

Cocoon フロントページの画像

これは自分が入力した時だけでなく、ほかの人に自分のサイトを紹介してもらうときも、この画像が表示されます。

Cocoonの画像はかっこいいのですが、やはり「オリジナルの画像を使いたい」という方も多いかと思います。

というわけで今回は、Cocoonのホームイメージの設定方法をお届けします。

この設定は見落としがちなところですので、忘れずに設定しておきましょう。

ホームイメージの設定方法

Cocoon ホームイメージの設定方法

Cocoonのホームイメージの設定は、「Cocoon設定」から行います。

 

1.WordPressのダッシュボード画面の「Cocoon設定」から「Cocoon設定」をクリックします。

Cocoon設定

 

2.Cocoon設定の画面になりますので、「OGP」のタブをクリックします。

Cocoon設定「OGP」をクリック

 

3.そして画面を下にスクロールしていくと「ホームイメージ」という項目があります。

Cocoon ホームイメージの設定

ここで設定されている画面が、トップページ(フロントページ)のURLを入力した時に表示される画像になります。

ホームイメージの表示例 デフォルト

 

4.画像の変更は「選択」をクリックして、任意の画像を選びます。

Cocoon ホームイメージを変更する

画像のサイズはお好みでOKですが、横と縦の比率を4:3ぐらいにするとキレイに見えやすいかと思います。

 

5.画像を選択すると、すぐ下に画像が表示されます。

ホームイメージの画像確認

別の画像にする時は、「選択」をクリックすると選択し直すことができます。また、「クリア」をクリックすると、デフォルトの画像に戻ります。

 

6.画像に間違いがなければ、「変更をまとめて保存」をクリックします。

変更をまとめて保存

これでホームイメージの設定は完了です。さっそく確認してみましょう。

スポンサーリンク

ホームイメージを確認してみよう

ホームイメージの確認方法

1.エディタ画面でサイトのトップページ(フロントページ)のURLを入力します。

ホームイメージの確認方法

 

2.エディタの右にある「プレビュー」をクリックします。

プレビューをクリック

 

3.アイキャッチの部分が、選択した画像になっていればOKです。

ホームイメージが変更されました

ホームイメージが反映されないときは

上記のように設定しても「ホームイメージが前の画像のまま」ということが時々あります。

その場合は、Cocoonのキャッシュを削除すると解消します。

 

1.WordPressのダッシュボード画面から「Cocoon設定」→「キャッシュ削除」とすすみます。

Cocoon ホームイメージが反映されない時は

 

2.「ブログカード」の欄にある「ブログカードキャッシュの削除」をクリックします。

ブログカードキャッシュの削除

これで、前の画像のデータが削除され、新しい画像データが反映されるようになります。

サイトの説明文を入れる

ホームイメージが設定できたら、お好みに応じて「サイトの説明文」も入れてみましょう。

Cocoon サイトの説明文を入れる

 

1.WordPressのダッシュボード画面から「Cocoon設定」を選択します。

Cocoon設定

 

2.Cocoon設定の画面になりますので、「タイトル」のタブをクリックします。

Cocoon設定「タイトル」のタブをクリック

 

3.「フロントページタイトル」の下にある「サイトの説明」に説明文を入力します。

サイトの説明文

 

入力したら「変更をまとめて保存」をクリックすると、このようにフロントページのブログカードに説明文が表示されるようになります。

説明文が表示されました

 

また、「サイトの説明」を空欄にすると、タイトルのみの表示になります。お好みで設定してみてください。

説明文なしのバージョン

おしまいに

今回はCocoonのホームイメージの設定方法でした。

ホームイメージの設定は意外と忘れがちな部分かと思います。簡単にできますので、よかったら参考にしてみてくださいね。

スポンサーリンク
Cocoon
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。