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

Cocoon

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

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

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

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

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

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

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

使用している画像が最新のWordPressのバージョンの画像ではないため、若干見た目が異なる場合がございます。大した問題はないのでご了承願います。

▼Cocoonにはまだあなたの知らないブロックがある▼

ブログカードのCocoon設定

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

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

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

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

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

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

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

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

ブログカードの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

URLが日本語

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

こんな感じ

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

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

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

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

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

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

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

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

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

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

うまくできました!

あなたの設定しているスキンによってはラベルが表示されない可能性があります。ラベルがうまく表示されない方はスキン変更を試してみてください。

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

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

下記の記事には

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

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

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

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

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

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

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

▼Cocoonにはまだあなたの知らないブロックがある▼

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

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