こんにちは、みよし之です。
最近、Cocoonにおいてブログカードを使うようになりました。
そもそも、ブログカードの意味が分かりませんでした・・・
なので、このカードみたいに表示できるリンクってCocoonじゃ無理なのかなって思っていました。
さっそく使ってみたら、自分のサイトがこれまでよりも見た目が良くなったような気がします。
でも、ブログカードを使う時って設定とか面倒なことないですか？
とても簡単に使うことができるんですよね。
ここでは、Cocoonを使ってブログカードを作成する方法についてを説明し、ブログカード以外にあるリンクの仕方や応用の仕方についても併せて記事に書いています。
なお、ここで表示されるブログカードは、テーマXWRITEのものになります。つい最近、Cocoonからテーマを変更しましたのでご理解ください。
ブログカードの作成について
まずは、ブログカードが作成できるかどうか設定を確認してみましょう。
- Cocoon設定を開き、ブログカードの項目をクリック
ブログカードの項目は、設定画面上部右側にあります - ブログカード表示の項目でチェックが入っているかどうか確認
ブログカード表示を有効にする - チェックを入れて、設定を保存する
これでブログカードを使うことができます。
使い方も簡単です。
+がブロック挿入ツールです
URLはコピーして貼り付けすると間違いがなく、簡単なのでおすすめ
これで、ブログカードができました。
ワードプレス管理画面上は、URLを貼り付けているだけなので分かりませんが、実際の投稿ではブログカードになっています。
念のため、確認してみましょう。
なお、ブログカードの右側にラベルという表示があります。
このラベルは、画面右側にあるスタイル設定から変更することができます。
- なし
- 関連記事
- 参考記事
- 参考リンク
- 人気記事
- あわせて読みたい
- チェック
- ピックアップ
など
テーマXWRITEは自由に書くことができるよ
ユーザーは、外部リンクだと思ってリンクをクリックしないことがあります。
そのため、アイキャッチ画像や記事の紹介内容から内部リンクだと分かりやすく表示させると、他の記事も見てもらいやすくなります。
ブログカードばかりだと読みずらいなどもありますので、効果的に使い分けていきましょう。
リンクの応用について
ここでは、ブログカードを使った応用の仕方について説明します。
2つのブログカードをご覧ください。
XWRITEで作成した場合は同じようにできませんが、Cocoonだと同じブログカードでも表示する場所を目次ごとに設定することができます。
クリックしなくてもいいので、カーソルを合わせるとURLに違いがあることがわかります。
これもテキストリンクで表示したブログカードです・・・
一方で、XWRITEの場合、下側のリンクのように記事のタイトル以外に飛ぶ時は、外部リンクの設定からURLを入力しないと表示できません。また、記事のタイトル以外をブログカードにすることもできません。
Cocoonの場合は、上側のブログカードを使って、タイトル以外の項目に飛ぶことができるようになります。
目次のURLを貼り付けることによって、ブログカードを使ってそのページにたどり着くことがでるようになるのです。
Cocoonの目次は、見出しごとに末尾だけ変更されています。
メイン記事のURLをhttps://ブログ名/記事名とします。
目次の順番通りに説明すると次のようになります。
| タイトル | https://ブログ名/記事名 |
| １番目にあるｈ2 | https://ブログ名/記事名/#toc1 |
| ２番目にあるｈ2 | https://ブログ名/記事名/#toc2 |
| ３番目にあるｈ3 | https://ブログ名/記事名/#toc3 |
| ４番目にあるｈ4 | https://ブログ名/記事名/#toc4 |
| ５番目にあるｈ2 | https://ブログ名/記事名/#toc5 |
このように表示されています。
そのため、記事のトップではなく、途中の見出しに飛んでもらう時はこのような手段を使うことができます。
これがブログカードでもできるというわけです。
どちらかというと、これはブログカードではなくページ内リンクなどで使う方が多いかもしれません。
ただし、この方法を使ったリンクの場合は注意しなければならないことがあります！
目次の追加や削除したときは、リンク先が変更されることもありますよ
なお、ページ内リンクについては、右側のリンクをクリックすると分かります。
進む場合はこちら
ブログカード以外のリンク方法について
ブログカードを使うようになると、それまで使っていたリンクはあまり使わなくなってきます。
ここでは、ブログを始めて日が浅い人に向けて、リンクの貼り方について説明します。
私も最初はリンクの使い方が分かりませんでした。
他にどんなリンクの貼り方がありますか？
大きく分けると2つの方法がありますのでそちらを紹介します。
基本的なリンクの仕方について
基本的なリンクといっても2つの方法があります。
- ブロックツールからリンクを作成する方法
- 文字にリンクを作成する方法
ブロックツールからリンクを作成する方法について
こちらは、リンクしたいURLをコピーして貼り付けする方法です。
- ワードプレス管理画面の上にあるリンクをクリック
- リンク先のURLを入力、もしくはコピーして貼り付け
- Enterキーを押すとリンク完了
https://miyoshinoblog.com/link-settings/
色が青くなって表示されているとリンクです。ここではリンクを解除して表示しています。 - テキストを編集する
このままだと見栄えが良くないので、再度クリックして テキストを編集します
Cocoonの場合は、内部リンクするときにURLを入力しなくてもOK！
記事のタイトルを入力していくと、どのタイトルなのか表示されます。なので、そちらをクリックするとタイトルが表示されたリンクになります。
ブログでリンクを新しいタブで開かないようにする方法
これはリンクにしていませんが、このようなタイトルが青色になっています。
テキストを編集する必要がなくなりますので、内部リンクの場合はこの使い方がおすすめです。
文字にリンクを作成する方法について
こちらは、入力した文字をドラッグしてリンクを作成する方法です。
右にあるようなリンクが、文字にリンクを作成する方法になります。
戻る場合はこちらから
- リンクしたい文字を入力
- その文字をドラッグし、ブロックツールにあるリンクをクリック
- URLをコピーして貼り付ける
これで完了です。
このように２つのリンクとブログカードがあれば、いろいろなリンクを作成することができるようになります。
ところで、同じページ内に移動したりするときに新しいタブで開くことはないですか？
これには理由があったんです。設定をしっかりしておくと内部リンク・外部リンクも上手に使うことができるようになります。こちらの記事では、その設定の仕方について説明しています。
まとめ
ブログカードを作成するとサイトの見た目が変わり、読者に好感を持ってもらいやすくなります。
ただ、乱用すると逆に悪い印象を与える恐れがありますので気を付けておきましょう。その場合は、通常のリンクをうまく活用してバランスをとるようにしましょう。
今回は、ブログを始めて間がない人にも分かりやすくブログカード以外のリンク方法もお伝えしました。私もブログカードの作り方はつい最近まで知りませんでした。これを見ると意外と簡単に出来ることが分かったのではないでしょうか。
最後まで読んでいただきありがとうございました。
