【Cocoon】ブログカードの基本的な使い方【初心者向け】

ブログ

サムネイルやタイトル、本文抜粋、投稿日などをまとめてカード形式でリンクにするブログカード。

ブログカードの例
ブログカード

WordPressテーマのCocoonには標準でブログカードの機能がついています

本記事ではブロックエディタ(Gutenbergグーテンベルク)におけるブログカードの基本的な使い方を画像付きで詳しく解説していきます。

つまずきやすいポイントもしっかり抑えていくよ!

とても簡単にできますので、10分もかかりません。しっかり確認しながら作業進めていきましょう。

ブログカードの基礎ができたら、下の記事でカスタマイズをしてみるのもおすすめです。

ブログカードのCocoon設定

ではまず記事を作成する前に、設定でブログカードをどのように表示するか決めていきましょう。

ワードプレスの編集画面からCocoon設定ブログカードと進んでください。

こんな感じで設定画面を開きましょう

必ずチェックしておかないといけないところは、内部ブログカード設定も外部ブログカード設定も

ブログカード表示を有効にするチェックです。

この項目にチェック入れておかないとブログカードが表示されません。

ほかの項目はお好みで選択しましょう。わからなかったら最初のままでOKです。

参考に私のブログカードの設定状況のスクショを貼っておきます

ブログカードの使い方

この項では、具体的にブロックエディターの編集画面でどのようにブログカードを使っていくかを説明していきます。

手順をどんどん書いていくので、その通りにやってみましょう

  1. 編集画面左上のブロックの追加(⊕)ボタンを押す
  2. Cocoonブロックを選択
  3. ブログカードを選択

そしたらこんなブロックが出ます。

基本的な考えはこのブロックの中にリンクを貼りたいURLを入力する。ということになります。

例えば当ブログのカテゴリー「ブログ」のブログカードを作りたい場合は

カテゴリー「ブログ」のURLをコピーして
ブログカードのブロックに貼り付け

貼り付けできたら一度プレビューで確認してみましょう。うまくブログカードが表示されていれば成功です!!

簡単だね!内部リンクも外部リンクもやり方は一緒だよ

次の項目では、ちゃんとやったのにうまくできないときのよくある原因を見ていきたいと思います。

ブログカードが表示されない原因

ちゃんとブログカードを使ってみたのに表示されない

そんなときの原因が大きく2つあります。見ていきましょう

URLの前後にスペース(空白)が入っている

URLをコピーしてブログカードのブロックに貼り付けたとき、なぜかURLの前後に空白が入ることがあります。

スペースを消さないとうまくいきません!目で見えないから知らないと見つけるのがかなり大変です。確認してみましょう

URLが日本語

たまにURLが日本語のページがあります。

こんな感じ

こういうURLはそのままブログカードに「https://kenjineer0224.com/category/ブログ」と入力してもうまいこと表示できません。

対策としては、自分で手入力せずにそのままURLをコピーして貼り付けること

リンクの上にカーソル合わせて右クリックで「リンクのアドレスをコピー」でもいいと思います。

そうすると日本語の部分がよくわかんない%ばっかりの表記になりますが、きちんとブログカードになります。

以上がよくあるブログカードが表示されない原因です

ブログカードにラベルを付ける

この項目では、ブログカードに「参考記事」とか「あわせて読みたい」などのラベルを簡単につける方法をご紹介します。

ブログカードのブロックを選択したら、編集画面右側に出てくるスタイル設定のラベルを押してみましょう。

そうするといろいろラベルの文言が出てきますので、好きなやつを選んでください。

たとえば、関連記事を選ぶと下の画像のような風に表示されます。

うまくできました!

ブログカードカスタマイズ

ブログカードの基礎ができましたら、あなたの好きなようにカスタマイズしていくことをおすすめします。

下記の記事には

  • 「続きを読む」の文字を入れる方法
  • 本文の抜粋を表示させない方法
  • アイコンとURLを表示させない方法

これらを詳しく解説しています。ぜひ読んで試してみてください。

ブログカードを使いこなそう

本記事では、【Cocoon】ブログカードの基本的な使い方【初心者向け】

ということでブログカードの基本的な使い方を詳しく説明してきました。あなたのブログでもうまく表示できたと思います。

ブログカードは普通のリンクよりも視認性がよく、クリック率もいいのでここぞというときにしっかり使ってあげてください。

あなたのブログもぐっと読みやすくなること間違いなしです!

関連記事

当ブログではCocoonに関する記事をほかにも投稿しています。ほかの記事もぜひご覧になってください。

初心者向け

カスタマイズ

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました