ブログカードでリンク先記事を枠付き表示させる方法

 

リンク先を枠付き表示させる機能

当教室のブログで他の投稿を紹介するとき、こんな表示のさせ方をしています。

例えば、当ホームページ内の他の投稿を引用したい場合は・・・

こんな風に表示されます。

 

これを「リンクカード」と言います。

 

ワードプレスの標準機能リンクカードの特徴

ワードプレスにも標準でリンクカード機能は備わっています。

やり方は簡単で、URLをそのまま本文に貼り付けると・・・

投稿ページの種類を増やすには?(カスタム投稿)

このように表示されます。

 

でも、これには1つ問題があります。

例えば、アメブロに書いた過去の投稿を表示させようとして、URLを本文に貼り付けた場合、このようになります。

↓  ↓  ↓

https://ameblo.jp/ranaco-pc-school/entry-12453874112.html

 

そう、URLがそのまま表示されてしまうんです。
しかも、URL自体にリンクも貼られない状態。

 

標準機能でリンクカードが使えない理由

この違いは何か?というと、
リンク先が固有のドメインかどうか?なんです。

ご存知のようにアメブロは、たとえ自分のブログであっても、所詮「借り物」です。

アメブロのドメイン(ameblo.jp)の下に、利用者のID(ranaco-pc-school)が置かれているという構造になっています。

固有のドメインではないんですね。

だからワードプレスの標準機能のリンクカードでは、URLがそのまま表示されてしまい、リンクカードの表示にはならないのです。

 

ブログカードプラグイン「Pz-LinkCard」

すべての紹介リンクをブログカードで表示するには、プラグイン「Pz-LinkCard」を使えば解決します。

プラグイン「Pz-LinkCard」を新規追加して、インストール → 有効化してください。

 

Pz-LinkCardの使い方

記事をブログカードでリンクさせるには

1.プラグインを有効化すると、編集画面上にツールボタンが追加されます。

 

2.「リンクカードを挿入」ボタン → リンク先のURLを入力 →「挿入」ボタンをクリックします。

 

3.ショートコードが挿入されます。

 

4.プレビューで確認します。

※ホームページ内の他の記事をリンクしています。

 

※アメブロも、リンクカードで表示できます。

 

 

Pz-LinkCard のデザインを変更する

Pz-LinkCard は表示デザインを変更することができます。

 

1.「設定」→「Pz カード設定」

 

2.「基本」タブ→「簡単書式設定」一覧からデザインを選ぶ→「変更を保存」

 

かんたん設定のデザイン

「かんたん設定のデザイン」は全部で 26種類 あります。

※下の画像をクリックすると大きく表示されます

 

 

そのほかの設定

上記の「かんたん設定のデザイン」以外にも、自分好みに変更することができますので、やってみてくださいね。