Cocoon|内部リンク(ブログカード)の設定方法と記事に貼る方法

Cocoon|内部リンク(ブログカード)の設定方法と記事に貼る方法

ブログを運営していると、SEO対策の一つとして記事の中に内部リンクを貼ることが大事になってきますよね。

ワードプレス無料テーマCocoonでは、簡単に内部リンク(ブログカード)を貼ることができます。

当記事では10枚の画像を使用しながら、Cocoonの内部リンク(ブログカード)の設定方法から記事への貼り方、ブログカードの紹介文の内容の変え方などを初心者向けに分かりやすく解説いたします。

ぽてん
ぽてん

それでは早速見ていきましょう!

Cocoon ブログカード(内部リンク)を設定する方法

ブログカードの設定はとても簡単です。

まずはブログカードの設定を行うため、Cocoon設定をクリックします。

上図の赤枠内にある『ブログカード』で内部リンクの設定ができます。

まず、ブログカードを使用するために、

ブログカード表示 → ブログカード表示を有効にする にチェックを入れましょう。

▼その他、それぞれの設定内容について解説していきます。

サムネイルスタイル :ブログカード内に表示されている画像が左側or右側のどちらに置きたいのかをお好みで選べます。

日付表示 :ブログカード内に投稿日、または更新日を表示するのか、日付の表示はなしにするのかをお好みでお選びください。

リンクの開き方 :ブログカードをクリックした際に、新しいタブ(別タブ)で開くか、移動せず同じページ内で開くようにするかを選ぶことができます。

設定が終わりましたら、

変更をまとめて保存をクリック!

以上でブログカードの設定は完了です。

記事にブログカード(内部リンク)を貼る方法

記事の中で、⊕マークをクリックし、下の方へスクロールすると、

Cocoonブロックの中にブログカードがありますので、クリックします。

ぽてん
ぽてん

ぱっと見つからない場合は、検索欄に「ブログ」と入力すると「ブログカード」が出てきますよ☆

上図の黄色マーカーのように、リンク先のURLを入力(またはコピー&貼り付け)しましょう。

URLをブログカードに入力することで、

プレビューで確認すると、無事、ブログカードが表示されるようになります。

ブログカードにラベルをつけるには?

ラベルとは、ブログカードの左上に表示されている「あわせて読みたい」の部分のことを指します。

「関連記事」や「あわせて読みたい」といったラベルを表示することによって、

違和感なく違うページへ誘導する効果が期待できます。

このラベルは、投稿編集画面でブログカードを一回クリックすると、

右側に表示されているスタイル設定:ラベルのプルダウンより、「関連記事」「参考記事」など好きな文言に簡単に変えることができます。

ブログカードの紹介文(文章)を変えるには?

上画像の赤枠内に囲ったブログカード内の文章は、設定をしないと自動で本文から抜粋されて表示されてしまいます。

場合によっては、記事の最初の文章である必要のない自己紹介部分が抜粋され、ブログカードに表示したくない文面が表示されることがあります。

このブログカードに表示される文章は、

上図の赤枠内『メタディスクリプション』の文章が優先的に使われます。

このメタディスクリプションに何も入力していない時は、本文から文章が自動で使われる仕組みになっています。

メタディスクリプションを入力できる場所
:リンク先対象ページである投稿画面を開き、下へスクロールをすると、
SEOタイトルやメタディスクリプションを入力できる表示がでてきます。

ブログカードの紹介文を非表示にしたい場合

『紹介文が長くて、ブログカードがごちゃごちゃしているように見える‥シンプルにタイトルとアイキャッチ画像のみ表示したい!』という方もいらっしゃると思います。

ブログカードの紹介文を非表示にするためには、元々cocoonで設定できるようにはなっていないため、CSSを書く必要があります。

当サイトもブログカードを貼る際は、追加のCSSにより紹介文を非表示にするよう設定しています。

▼紹介文を非表示にするCSSに関しては以下のサイトが参考になりますよ!

ブログカードの表示を、本文なしにできる機能が欲しいです | 要望 | Cocoon フォーラム

ぽてん
ぽてん

設定お疲れさまでした☆

スポンサーリンク

スポンサーリンク
ブログ雑記
シェアする
タイトルとURLをコピーしました