「あわせて読みたい」を【WordPress】のCoCoonでの設置はブログカードを使えば簡単です

WordPressでブログに慣れてくると、装飾を使いたくなり、色々なサイトを見ていると表示される、「あわせて読みたい」と書いてある、リンクを目にすることがあると思います。

これはカード型の内部リンクです。

こういうやつで、クリックすると内部リンクで、その記事まで飛ぶというものです。

今までは、ただ単にリンクを貼り付けていたのですが、少しずつブログにも慣れてきたので、使ってみたいと思いましたが、やり方がさっぱりでした…。

検索して調べると、CSSをいじって追加もあるそうですが、これは何かあると不安…。

検索を続けると、Cocoonならすごく簡単に設置ができることが判明しました！

この記事では「あわせて読みたい」をCocoonで設置したいけど、わからないと悩んでる方に図解でわかりやすく解説と、表示されなかった時の対処法まで説明します。

まずはブログカードの設定をする

まずはブログカードの設定を開き、設定を変更することがあれば設定し保存してください。

特に設定することはないのかなと思います。

1. Cocoon設定を開く
2. ブログカードを選択

投稿画面でブログカードを使用する

設定が終わったら、投稿画面に行きます。

3.「あわせて読みたい」を設置したいブロックを選択します

4.ブロックを追加ボタンをクリック

5.ブログカードを選択します。ここになければ、「すべて表示」から探してください

6.ブログカードが設置できたら、リンクボタンをクリックします

7.検索して「あわせて読みたい」に入れたい記事を選択します

8.リンクしたい記事のURLが表示されていれば大丈夫です

9.ブロックの編集で、「スタイル編集」→「ラベル」を選択し、「あわせて読みたい」を選択します

10.ブログを更新して、きちんと表示されているか確認し、終了です。

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

上の写真は失敗したブログカード設置です。

ただ単にリンク先とリンク先のタイトルが表示されているだけです。

これをクリックしても、リンク先には飛びますが、これでは「あわせて読みたい」になってない…。

この問題の結論は、投稿画面でのリンクの表示が日本語では正しく表示されないのです。

URLで入力しないと、うまく表示できないようです。

設定方法を解説していきます。

1.投稿画面で、ブログカードを設置し、リンク先を選択後、リンク先をクリックします

2.鉛筆マークの編集をクリック

3.TEXTと書かれているところに、記事タイトルが日本語で書かれています。これを削除します。

4.TEXTを消したら、上の写真の、「このリンクを追加するにはEnterキーを押してください」をクリックして追加します

5.上の写真のように、リンク先のURLが表示されていればOKです。

プレビュー画面で確認して、きちんと表示されていれば問題なしです。

まとめ

ブロガーさんのサイトを見ているとよく見る「あわせて読みたい」ですが、ブログを始めたてはどうやるのか、さっぱりで、いつかは設置してみたい！と思っていましたが、意外と簡単に設置できてしまいました！

Cocoonはプラグインを使わなくても、色々な設定ができるのに、無料で使えるのは、有り難いです。

まだまだ知らない機能がいっぱいあると思うので、少しずつ覚えてサイトの見栄えを良くして、読者の方の満足に繋がればと思います。