今回は『Cocoonのブログカードの使い方』を詳しく解説していきます。
Cocoonならリンクをおしゃれなカード型にするのも簡単です。
ブログカードが表示されない時の対処法もお伝えしますので、ぜひ参考にしてみてください。
動画でも解説しています。
ブログカードの設定方法
Cocoonのブログカードは『Cocoon設定 ⇒ ブログカード』で設定します。
『内部ブログカード』と『外部ブログカード』の違い
ブログカードの設定は『内部ブログカード』と『外部ブログカード』の２つで行います。
【内部ブログカード】
内部ブログカードは内部リンクのブログカードです。
自分のブログURLをブログカードにする場合の設定となります。
【外部ブログカード】
外部ブログカードは外部リンクのブログカードです。
他のブログやサイトURLをブログカードにする場合の設定となります。
内部と外部それぞれで設定を行いますが、同じ設定箇所が多いので、次からは合わせて解説していきます。
ブログカード表示
ブログカードを表示させるには、まずこちらの『ブログカード表示』にチェックを入れる必要があります。
サムネイルスタイル
『サムネイルスタイル』ではサムネイルの位置を選択できます。
【左側】
【右側】
こちらはお好みで設定してください。
日付表示
『日付表示』は内部ブログカードのみにある設定項目です。
日付表示の有無を選択できます。
【なしの場合】
【投稿日(更新日)にした場合】
こちらもお好みで設定してください。
リンクの開き方
リンクの開き方にチェックを入れると、リンク先が新しいタブ（別タブ）で開きます。
内部ブログカードは同じブログ内なので同じタブで開いたほうが無難ですから、チェックを外したほうが良いです。
外部ブログカードは別のブログなので、読者が戻ってきやすくするために新しいタブで開くように、チェックを入れることをオススメします。
なお、HTML形式のリンクタグを設置している場合は、その設定が優先されます。
キャッシュの保存期間
『キャッシュの保存期間』は外部ブログカードのみにある設定項目です。
外部サイトのOGP情報を取得するのは表示に時間がかかるため、Cocoonでは外部ブログカードのみキャッシュ機能で一定期間保存して表示されています。
ここではその表示期間を設定できますが、デフォルトでは30日間となっています。
なるべく新しい情報を表示させたい場合は期間を短くすることもできますが、その場合表示に時間がかかりやすくなるためお気を付けください。
特に気にしない方は、デフォルトの30日のままでOKです。
キャッシュの更新
『キャッシュの更新』は外部ブログカードのみにある設定項目です。
こちらにチェックを入れた状態で外部ブログカードをクリックすると、新しいキャッシュを取得できます。
用途としては、外部リンク先の情報(タイトルやサムネイルなど)が変わったことに気が付いたとき。
キャッシュの更新にチェックを入れた状態で自分でブログカードをクリックすれば、新しい情報にキャッシュが更新されます。
更新したらチェックを入れておく必要はありませんので、また外しておきましょう。
Cocoonのブログカードの使い方
クラシック編
ここではクラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックでブログカードを使う方法をお伝えしていきます。
【クラシックエディターのビジュアルモード】
【Gutenbergのクラシックブロック】
クラシックでは、URLの上下に一行ずつスペースを空けてURLを貼ると、
このようにブログカードが表示されます。
また、URLを選択して『スタイル』から『囲みブログカードラベル』を設置することができます。
↓↓↓
こちらもお好みで設定してみてください。
ブロック編
ここではGutenbergのCocoonブロックを使ってブログカードを設置する方法を解説します。
まず『ブロックを追加 ⇒ すべて表示』をクリックします。
Cocoonブロック内から『ブログカード』を選択します。
ブログカードブロック内にURLを入力するだけで、
このようにブログカードを表示させることができます。
また、右上の設定（歯車マーク）をクリックすると、ラベルを設置することができます。
↓↓↓
よろしければこちらもお好みで設置してみてください。
ブログカードが表示されない原因と対処法
ここではCocoonのブログカードが表示されない原因と対処法を４つ解説していきます。
ブログカードが表示されない時は、こちらをご確認ください。
『ブログカード表示』にチェックが入っていない
設定方法の解説でもお伝えしましたが、『ブログカード表示』にチェックが入っていないとブログカードは表示されません。
『ブログカード表示』は、『内部ブログカード』と『外部ブログカード』のそれぞれにチェックを入れる項目がありますので、チェックを入れ忘れていないかご確認ください。
URLに日本語が含まれている
URLに日本語が含まれていると、ブログカードは表示されません。
↓↓↓
URLに日本語が含まれている場合は、記事ページのアドレスバーからURLをコピーしてください。
コピーしたURLをWordPressの投稿画面に貼り付けると自動でPunycode化されますので、ブログカードも表示されるはずです。
上下に１行空いていない
クラシックでは、URLの上下に1行ずつ空きがないとブログカードは表示されません。
↓↓↓
ブログカードを表示させるには、このように上下に1行ずつ空けて記事を投稿してください。
前後にスペースが空いている
Cocoonブロックのブログカードでは、前後にスペースが空いているとブログカードが表示されません。
↓↓↓
ブログカードを表示させるには、このように前後にスペースがないようにURLを貼り付け(入力)してください。
あえてブログカード化しない方法
長くブログを運営していると「ここはブログカード化させたくない」というときもあると思います。
ブログカード化させないようにするには、URLの前に『!』を入れるだけです。
↓↓↓
確実にブログカード化させたくないときのために、このやり方も覚えておいてください。
まとめ
今回は『Cocoonのブログカードの使い方』について解説してきました。
クラシックでもブロックでも使い方は非常に簡単でしたね。
しかし、ブログカードはちょっとしたことで表示されないこともあります。
記事内に急にURLだけが表示されていると読者に違和感を与えてしまいますので、記事投稿時はしっかり表示されているか確認しておきましょう。
