サムネイルやタイトル、本文抜粋、投稿日などをまとめてカード形式でリンクにするブログカード。内部リンクをつなぐのにいいですよね。
WordPressテーマのCocoonには標準でブログカードの機能がついています。
本記事ではブロックエディタ(Gutenberg)におけるブログカードの基本的な使い方を画像付きで詳しく解説していきます。
つまずきやすいポイントもしっかり抑えていくよ!
とても簡単にできますので、10分もかかりません。しっかり確認しながら作業進めていきましょう。
ブログカードの基礎ができたら、下の記事でカスタマイズをしてみるのもおすすめです。
ブログカードのCocoon設定
ではまず記事を作成する前に、設定でブログカードをどのように表示するか決めていきましょう。
ワードプレスの編集画面からCocoon設定→ブログカードと進んでください。
必ずチェックしておかないといけないところは、内部ブログカード設定も外部ブログカード設定も
ブログカード表示を有効にするに☑です。
この項目にチェック入れておかないとブログカードが表示されません。
ほかの項目はお好みで選択しましょう。わからなかったら最初のままでOKです。
参考に私のブログカードの設定状況のスクショを貼っておきます
ブログカードの使い方
この項では、具体的にブロックエディターの編集画面でどのようにブログカードを使っていくかを説明していきます。
手順をどんどん書いていくので、その通りにやってみましょう
- 編集画面左上のブロックの追加(⊕)ボタンを押す
- Cocoonブロックを選択
- ブログカードを選択
そしたらこんなブロックが出ます。
基本的な考えはこのブロックの中にリンクを貼りたいURLを入力する。ということになります。
例えば当ブログのカテゴリー「ブログ」のブログカードを作りたい場合は
貼り付けできたら一度プレビューで確認してみましょう。うまくブログカードが表示されていれば成功です!!
簡単だね!内部リンクも外部リンクもやり方は一緒だよ
次の項目では、ちゃんとやったのにうまくできないときのよくある原因を見ていきたいと思います。
ブログカードが表示されない原因
ちゃんとブログカードを使ってみたのに表示されない
そんなときの原因が大きく2つあります。見ていきましょう
URLの前後にスペース(空白)が入っている
URLをコピーしてブログカードのブロックに貼り付けたとき、なぜかURLの前後に空白が入ることがあります。
スペースを消さないとうまくいきません!目で見えないから知らないと見つけるのがかなり大変です。確認してみましょう
URLが日本語
たまにURLが日本語のページがあります。
こういうURLはそのままブログカードに「https://kenjineer0224.com/category/ブログ」と入力してもうまいこと表示できません。
対策としては、自分で手入力せずにそのままURLをコピーして貼り付けること。
リンクの上にカーソル合わせて右クリックで「リンクのアドレスをコピー」でもいいと思います。
そうすると日本語の部分がよくわかんない%ばっかりの表記になりますが、きちんとブログカードになります。
以上がよくあるブログカードが表示されない原因です
ブログカードにラベルを付ける
この項目では、ブログカードに「参考記事」とか「あわせて読みたい」などのラベルを簡単につける方法をご紹介します。
ブログカードのブロックを選択したら、編集画面右側に出てくるスタイル設定のラベルを押してみましょう。
そうするといろいろラベルの文言が出てきますので、好きなやつを選んでください。
たとえば、関連記事を選ぶと下の画像のような風に表示されます。
うまくできました!
ブログカードカスタマイズ
ブログカードの基礎ができましたら、あなたの好きなようにカスタマイズしていくことをおすすめします。
下記の記事には
- 「続きを読む」の文字を入れる方法
- 本文の抜粋を表示させない方法
- アイコンとURLを表示させない方法
これらを詳しく解説しています。ぜひ読んで試してみてください。
ブログカードを使いこなそう
本記事では、【Cocoon】ブログカードの基本的な使い方【初心者向け】
ということでブログカードの基本的な使い方を詳しく説明してきました。あなたのブログでもうまく表示できたと思います。
ブログカードは普通のリンクよりも視認性がよく、クリック率もいいのでここぞというときにしっかり使ってあげてください。
あなたのブログもぐっと読みやすくなること間違いなしです!
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント