Cocoonブログカードの使い方とカスタマイズ｜12種類のラベル表示でおしゃれ度アップ！

「リンクを画像と記事タイトル付きで表示させたい…」

「内部ブログカードと外部ブログカードの細かな設定方法は？」

「ブログカードにラベルを付ける方法を教えて？」

この記事ではそんな方に向けて、Cocoonでブログカードの使い方とカスタマイズ方法を解説します。

ブログカードとは…別記事へ飛ぶリンクを記事タイトルや画像などもまとめて表示させる埋め込み形式のこと

この記事を読めば、あなたも簡単に

• おしゃれにカスタマイズしたブログカードを使える

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、自サイト内の回遊率を上げることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！

Cocoonブログカードのカスタマイズ設定6つ

ブログカードを記事内で使う前に、ブログカードの細かな設定を行っていきます。

Cocoonのブログカードをカスタマイズする方法は公式サイトでも紹介されていますが、本記事ではより詳しく解説します。

ブログカードでカスタマイズできる項目は以下の6つです。

内部ブログカードとは…同じサイト内にある別の記事へ飛ぶリンクのこと

外部ブログカードとは…異なるサイトにある記事へ飛ぶリンクのこと

項目	内部ブログカード	外部ブログカード
ブログカード表示	設定できる	設定できる
サムネイルスタイル	設定できる	設定できる
リンクの開き方	設定できる	設定できる
日付表示	設定できる	設定できない
キャッシュの保存期間	設定できない	設定できる
キャッシュの更新	設定できない	設定できる

※上のリンクをクリックすると見たい項目へジャンプします。

それぞれの項目を詳しく解説します。

リンクの表示形式を設定する

Cocoonでリンクの表示形式をテキストとブログカードのいずれかに設定できます。

内部ブログカードと外部ブログカードの両方で設定でき、「ブログカード表示を有効にする」にチェックを入れるとリンクをブログカード化できます。

サムネイルの表示位置を選ぶ

「サムネイルスタイル」で画像の表示位置を「左側」「右側」のどちらか設定できます。

内部ブログカードと外部ブログカードの両方で設定でき、「左側」がおすすめです。

リンクの開き方を決める

リンク先ページの開く方を「新しいタブで開く」「現在のタブで開く」のどちらか設定できます。

以下のテキストリンクに2つあるリンクの開き方を設定しました。

_{＼クリックで開き方を試してみる！／}

基本的に、外部ブログカードは新しいタブで開き、内部ブログカードは現在のタブで開くといいでしょう。

日付の表示を設定する

内部ブログカードに限り、ブログカードに表示する日付を「投稿日」「更新日」「なし」の3つから設定できます。

日付表示は「なし」がおすすめです。

もし「投稿日」を設定した場合、年月が経つとその記事が古い情報だと思われてしまい、クリックされなくなります。

また「更新日」を設定した場合も、記事の更新をしなければその記事が古い情報だと教えることになるので、同様にクリックされなくなります。

「なし」を設定すれば、その記事の情報の新旧が分からなくなるので、日付が原因でクリック率が変わることはありません。

ですので、日付表示は「なし」に設定しましょう。

キャッシュの保存期間を決める

外部ブログカードに限り、キャッシュの保存期間を設定できます。

キャッシュとは…アクセスしたWebページの情報を一定期間保存する機能のこと

キャッシュを保存したままだとユーザーが同じWebページを2回目以上アクセスしたときの表示スピードが速くなるが、初めてアクセスするWebページの表示スピードが遅くなります。

また、Webページが新しい情報に更新されても保存された古い情報が表示される可能性があり、定期的にキャッシュを削除する必要があります。

キャッシュを更新する

外部ブログカードに限り、外部サイトのWebページの情報を更新するかどうか選べます。

キャッシュの更新を有効にした場合、外部サイトのWebページが新しい情報に更新された場合に再保存されますが、その分キャッシュ量がたまっていき、表示スピードが遅くなります。

Cocoonブログカードの使い方

記事にブログカードを挿入すると以下のように表示されます。

Cocoonでブログカードの使い方は下記のとおりです。

ブログカードが正しく表示されるかプレビューで確認してみましょう。

ブログカードが正しく表示されない場合、テキストリンクになっていたり、画像のみ表示されなかったりします。

ブログカードが表示されない場合の対処法が知りたい方は、下の記事を参考にしてください。

Cocoonブログカードをラベル付きにカスタマイズする方法

Cocoonのブログカードにラベルを付けることができます。

ブログカードをラベル付きにカスタマイズする方法は下記のとおりです。

当ブログ愛用「SWELL」のブログカードは記事タイトルやラベル文字を上書きできる！

WordPressテーマ「SWELL」には関連記事ブロックというオリジナルブロックがあり、Cocoonではできない以下4つの設定ができます。

ここで一部カスタマイズしたSWELLの関連記事ブロックを紹介します。

このように記事タイトルやラベル文字をクリックしやすい内容に変えることができます。

また関連記事ブロックでは、記事タイトルや投稿IDの入力だけでかんたんにブログカード化できます。

わざわざリンク先ページのURLを調べに行く面倒がないので、時短にもつながります。

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

よりオシャレにカスタマイズしたブログカードをかんたんに作りたい方は、SWELLをチェックしてみてください。

Cocoonブログカードまとめ

今回は、Cocoonでブログカードの使い方とカスタマイズ方法を紹介しました。

以下の記事では、ブログカード以外のカスタマイズ方法も紹介しています。

当ブログではCocoonに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。