【超簡単】「あわせて読みたい」をWordPressで表示する方法

ブログ進捗

こんにちは!タカリブ(@taka-liveです。

Cocoonを利用しているブログ初心者の方は必見!この記事では「あわせて読みたい」「詳細はこちら」といった内部リンク・外部リンクの表示方法を図解で紹介しています。

慣れてしまえば数秒で作れるようになるので、ブログ初心者の方の参考になれば幸いです。

ブログカードの利用方法

実は、ブログカードを使えば、以下のようなテキストリンクも簡単に「あわせて読みたい」のラベル付きに変更することができるんです。


▼テキストリンクの例


▼ラベル付きブログカードの例


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

まず、ブログカードの表示設定を下記手順でする必要があります。

  1. 「Cocoon設定」内にある「ブログカード」を選択
  2. 「ブログカード表示を有効にする」にチェック
  3. 「変更をまとめて保存」をクリック



「変更をまとめて保存」をクリック時、「閲覧できません」と表示される場合があります。



サーバーにConoHaを使っている場合ですと、下記手順で変更が可能になります。OFFにすることでWebサイトのセキュリティー対策が弱まるので、変更後は再度ONにするのを忘れないように注意しましょう!

サイト管理 → サイトセキュリティ →  WAF(OFF)



ブログカードを利用する

「+」(ブロックを追加)をクリックします。



「ブログカード」をクリックします。初期表示されていない場合は、「すべて表示」をクリックして見つけます。



「ラベルなし」の何も書かれていないボックスが出現するので、ここの中に貼り付けたいページのURLを入力します。以下の画像はURL入力後の一例です。

テキストリンクに既になっている(クリックしたら別ページに飛ぶ)ものを貼り付けると、ブログカードが表示されなかったので注意!




画面右上の設定アイコンをクリックすると、「スタイル設定」が表示されます。

別画面の場合、一度「ラベルなし」のボックスをクリックしてから本操作を行ってみてください。



「スタイル設定」内に、「あわせて読みたい」「詳細はこちら」など10種類のラベルがあるので、好きなものを選択します。



▼以上の操作でブログカードを表示


おわりに

今回は、Gutenebergエディタでブログを書いている場合の方法となります。クラシックエディタの場合は、「スタイル」→「囲みブログカードラベル」からブログカードラベルを表示できます。

ブログカードは非常に便利ですが、多用し過ぎないことも大切。逆に見づらくなってしまうという懸念があるので、テキストリンクと上手に使い分ける必要がありそうです!

最後まで読んでいただき、ありがとうございました!

コメント