▶ Amazon 今日の【在庫処分】セール会場へ
スポンサーリンク

ページにプロモーションが含まれる場合があります。

【Cocoon】サムネイル画像付リンクを貼る方法|ブログカード

スポンサーリンク

ブログを構築しているうちに、お勧めしたいサイトやページを内部リンク外部リンクを貼って紹介することが多くなります。

内部リンク⇒自分のブログの別ページへ飛ぶリンク
外部リンク⇒自分以外のサイトのページへ飛ぶリンク

リンクは文字だけのテキスト型リンク(アンカーテキスト)がありますが、文章の途中にただ挿入した場合あまり目立たずに読者に見過ごされることがあるかもしれません。

▼テキスト型リンク
【USBメモリ・SDカード】知っておきたい3つの基本知識

 

色々なサイトでサムネイル画像付のリンクを見かけますが、Cocoonテーマなら簡単に貼ることができます。

▼例えば下記のようなリンク

【USBメモリ・SDカード】違いと3つの基本知識【初心者向け】
パソコンアクセサリー定番アイテムであるUSBメモリやSDカードですが見た目の形は同じでも規格やグレードがあり性能に違いがあります。初心者向けにUSBメモリとSDカードの基本知識について簡単にまとめました。おすすめの関連グッズも紹介します。

このような枠で囲んだサムネイル画像付きのリンクはブログカード型リンクと呼びます。(単にブログカードとも)

今回は、WordPress・Cocoonでブログカード型リンクを貼る手順をご紹介します。

 

Cocoon:ブログカード型リンクを貼る方法[4つ]

WEBSITE-LINK
Designed by Freepik

★ブログカードを作成するには通常Pz-LinkCardというプラグインをインストールする必要がありますが、Cocoonならプラグイン不要で作成できるのでとても便利。

4つのパターンで解説します。

■Cocoon・ブログカードリンク設置方法
  1. クラシックエディター編:その①
  2. クラシックエディター編:その②
  3. ブロックエディター編(グーテンベルク)
  4. Cocoonスタイル編:囲みブログカードラベル

❶クラシックエディター編:その①

クラシックエディター編1

Cocoonはクラシックエディターも標準装備なのでプラグイン不要で使えます。

Cocoonクラシックエディターへの切り替えCocoon設定エディターGutenbergエディターを有効にするのチェック解除

(1)リンクしたいWEBページのURLをコピーして貼り付け。

WP_URL貼り付け_クラシックエディター

これでブログカードの作成は完了です。

パソ太郎
パソ太郎

え!?
これだけ???

そう、これだけです。
編集画面ではURLしか表示されませんがプレビューで確認してみて下さい。

実際の投稿では下記のようなブログカードで表示されます。

この画像には alt 属性が指定されておらず、ファイル名は 2b18993fb7d56de7153c9251f1754682.png です

ちなみにブログカードの作成はこの手順が一番簡単です。

CocoonではURLを貼るだけで良いので最速で設置できて便利。

公式サイト 内部ブログカードを表示する方法 | Cocoon

 

❷クラシックエディター編:その②

クラシックエディター編2

(1)エディターメニューのリンク挿入アイコンをクリック。

 

(2)フキダシのようなものが出るので歯車ボタンをクリック。

 

(3)リンクの挿入/編集のダイアログボックスが出るので一番上にリンクしたいページのURLをコピペ⇒リンク追加をクリック。

「リンク文字列」のボックス内は空欄のままにします。

リンク文字列は空欄のまま


※逆に文字列を入れるとテキスト型リンクになります。

 

リンクを新しいタブで開くにチェックを入れるかどうかはお好みですが、私の場合それまで表示していたページは残したいので基本チェックを入れます

リンクを新しいタブで開く設定

ブログカード型リンクの作成完了です。

クラシックエディター編:その①よりも工程が多いですが、リンクを新しいタブで開くかどうかなどの細かい設定をしたい場合はこちらがオススメ。

※❷で作成したリンクは後で設定を変更できます。
リンクをクリック⇒編集ボタンをクリック。

リンクの設定変更

 

❸ブロックエディター編(グーテンベルク)

ブロックエディター編グーテンベルク

Cocoonでエディターが初期設定なら、ブロックエディター(グーテンベルク)です。

操作手順はクラシックエディターよりも少し複雑になります。

 

(1)投稿画面の左上にある+(プラスボタン)をクリック。

WP_ブロック挿入メニューボタン

 

(2)ブロック挿入ツールメニューの一覧からクラシックをクリック。

ブロックツールのクラシック

 

(3)クラシックブロックが本文内に作成されるのでクリック。

クラシックブロックをクリック

 

(4)クラシックメニューのリンク挿入アイコンをクリック。
※ここからはクラシックエディター編❶,❷の操作と同じ。

 

(5)フキダシのようなものが出るので歯車ボタンをクリック。

 

(6)リンクの挿入/編集のダイアログボックスが出るので一番上にリンクしたいページのURLをコピペ⇒リンク追加をクリック。

 
ブログカード型リンクの作成完了です。

設定変更はクラシックエディター編の解説と同じです。
 

❹Cocoonスタイル編:囲みブログカードラベル

Cocoonスタイル編囲みブログカードラベル

Cocoonはスタイルメニューから、オリジナルのブログカードが作れます。

公式サイト 囲みブログカード拡張スタイルの使い方 | Cocoon

Cocoonエディターのスタイルメニュー

✓ラベルは10種類(2021年7月時点)

■Cocoon:囲みブログカードラベル
  1. 関連記事
  2. 参考記事
  3. 参考リンク
  4. 人気記事
  5. あわせて読みたい
  6. 詳細はこちら
  7. チェック
  8. ピックアップ
  9. 公式サイト
  10. ダウンロード

 

スタイルメニューの囲みブログカードラベル
 
ラベル付きのブログカードが作れて、ラベルが選んだ文字になります。

Cocoon囲みブログカードラベルの例

ラベルの文字は固定されてるので作成後に手入力での編集はできません。

ラベルを他の種類に変更したい場合は書式設定をクリアしてやりなおすか、リンク自体を削除して作り直してください。

書式設定のクリア方法リンクを選択⇒エディターメニューの書式設定をクリアをクリック。

リンクをクリア

Cocoonはブログカードのサムネイル位置を右側にするなどの細かい設定も変更できるのでCocoon設定⇒ブログカードでいろいろ試してみてください。

ブログカードサムネイル右

 

まとめ:リンクの種類はバランスを見て使い分け

今回はWordPressで、サムネイル画像付きのリンクブログカード型リンクを貼る方法をご紹介しました。

テキストのリンクよりもアピール度が高いですので、見過ごされることも少なくなると思います。

ただし、何でもブログカード型リンクにするのではなく記事のレイアウトを考えながら使いましょう。

時にはテキスト型リンク(アンカーテキスト)の方が自然で良い場合もあります。

文字が多い記事の場合にはアクセントにもなって記事全体のバランスを整えるのにも役立ちますので適材適所で活用しましょう。

コメント

タイトルとURLをコピーしました