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

Cocoon

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

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

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

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

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

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

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

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

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

ブログカードのCocoon設定

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

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

こんな感じで設定画面を開きましょう
Cocoon→ブログカード

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

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

ブログカード表示を有効にする

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

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

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

ブログカードの設定状況

ブログカードの使い方

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

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

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

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

ブログカードブロックが出る

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

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

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

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

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

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

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

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

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

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

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

スペースがある

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

URLが日本語

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

こんな感じ
日本語URL

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

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

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

日本語URLを貼り付け

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

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

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

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

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

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

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

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

ブログカードの表示

うまくできました!

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

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

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

下記の記事には

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

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

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

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

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

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

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

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

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

記事の書き方

特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

上記記事でまとめています

  • 記事作成の一連の流れ
  • 具体的な記事の書き方
  • リスト(箇条書き)の使い方
  • 吹き出しの使い方
  • ブログカードの使い方
  • テーブル(表)の使い方
  • 各種ボタンの使い方
  • ショートコードの使い方
  • しっておきたい投稿画面でよく使う機能

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント