Pz-LinkCardの使い方を解説!!プラグインで簡単にリンクカード


って疑問を、解決していきます。
だれでも簡単に、ブログカード形式のリンクカードを導入できる WrodPress プラグインが「Pz-LinkCard」なんです。
ショートコードで気軽に呼びだせるだけではなく、設定によってデザインや外部リンクの画像を使用することもできるんですよ。
というわけで今回は、「Pz-LinkCard」の使い方を解説していきます。

目次
「Pz-LinkCard」の使い方
WordPressプラグイン「Pz-LinkCard」の使い方を、解説していきます。
Pz-LinkCardの使い方3ステップ
STEP1:Pz-LinkCardをインストールする
- プラグインの新規追加をクリック
- Pz-LinkCardを検索
- Pz-LinkCardの今すぐインストール をクリック→有効化します
ダウンロード:Pz-LinkCard – WordPress Backup Plugin
作者が、「poporon」さんであることを確認してください。
STEP2:ショートコードで表示させる
[[blogcard url="記事URL" title="タイトル" content="説明文"]]
Pz-LinkCard のショートコードの仕組みは、こんな感じです。
[[blogcard url="https://soundorbis.com/rakutem-lows-price/" title="楽天モバイルの低速モード、料金はどれだけ使っても同じなの?" content="楽天モバイルの低速モード、料金はどれだけ使っても同じなの?って疑問を、解消します。"]]
今回は、このようなコードで表示させてみました。
STEP3:リンクカードを確認する
ショートコードを貼り付けた記事を、確認します。
画像のようにリンクカード形式で出力されていたら、成功です。
説明終了!!

Pz-LinkCardの設定について
設定 - Pz カード設定をクリックして、Pz-LinkCard を使いやすくしていきましょう。
基本の設定
かんたん書式設定の説明です。
配置の設定や、表示の設定などこのあと続きますが...それよりも優先される設定項目です。テンプレみたいなものですね。
設定すると、ブログカードは下のように表示されます↓




















配置の設定
設定項目 | 内容 | 説明 |
---|---|---|
BLOCKQUOTEタグを使用する | <BLOCKQUOTE>で囲んで引用扱いにします | 外部リンクで利用するなら、チェックを入れるといいかも。 |
カード全体をリンク | カード全体をAタグで囲って、どこをクリックしてもリンク先を開くようにします。 | 全体でリンクしたほうが、読者が押しやすいですよね。 |
余白 | ![]() | わたしの環境だと、余白の設定がうまく動作しませんでした。なので、個別のCSSでカスタマイズします。 |
表示の設定
外観設定
設定項目 | 解説 |
---|---|
サイト情報 |
から、サイト情報を表示する場所を選べます。サイト名称を使用のチェックを外すと、ドメインが表示されます。 |
付加情報を見出し表示にする | 変更される場所が、よくわかりませんでした。 |
リンク文字のアンダーラインを除去する | リンクにアンダーラインがいらないときは、チェックする。 |
区切り線 | サイト情報の下に線がでます。 |
リンク先URLの表示 | チェックを入れて、リンク先のURLを表示します。読者に安心感を、もってもらいましょう。 |
記事の情報に枠を付ける | 内側に枠が付きます。 |
抜粋文を表示する | 記事の要約をつけたい場合は、チェックする。ショートコードの content="xxxxx" が表示されます。 |
内側に影を付ける | 内側に影がつきます。 |
影を付ける | リンクカードのまわりに、影がつきます。 |
角を丸める | リンクカードに、丸みがつきます。 |
マウスでポイントしたときに表示を薄くする | リンクであることを、わかりやすく読者に伝えることができます。 |
サムネイル |
から、サムネイルの表示位置を選べます。「幅・高さ」の指定とサムネイル画像に影をつけることもできます。 |
設定項目 | 内容 |
---|---|
枠線の太さ | 「色・線の種類・幅」を指定できます。
から、線の種類を選ぶことができます。 |
CSSリセット(img) | チェックしないと、サムネイル画像がずれることがありました。チェックしておきましょう。 |
続きを読むボタン | わたしの環境では、続きを読むボタンは表示できませんでした。 |
シェア数を表示する | わたしの環境では、シェア数を表示できませんでした。 |
文字の設定
- 設定項目
- サイト情報
- 付加情報
- タイトル
- URL
- 抜粋文
- 続きを読むボタン
- 幅に合わせて縮小:チェックしておこう。レスポンシブ!!
わたしの環境では、あまりこのへんのCSS系の設定は、うまくうごきませんでした。
ご利用のテンプレートなどの相性もあるので、あきらめて個別でCSSを設定するようにしましょう。
外部リンクの設定
設定項目 | 内容 |
---|---|
背景色 | 好きな背景色を指定できます。 |
背景画像 | アップロードした画像のURLを指定すると、背景画像を表示できます。 |
サムネイル |
から選択できます。外部サイトの画像になるので、「なし」が外部リンク先に迷惑をかけないベストな選択ですね。 |
サイトアイコン |
から選択できます。「WebAPIを利用する」がベストな選択ですね。 |
付加情報 | サイト情報のあとに、文字を追加できます。「サイト名+付加情報」と表示されます。 |
続きを読むボタンの文字 | 続きを読むテキストを、指定できます。 |
新しいウィンドウで開く |
から選択できます。わたしは「モバイル端末以外」を選んでいます。スマホのブラウザで、タブを開かせるのは申し訳なくて。汗 |
記事取得方法 | 設定できる項目なし |
nofollowを付与する | 外部にあなたのサイトのパワーを渡したくない場合は、チェックを入れましょう。 |
はてなブログカードを利用する | 非推奨なので、チェックしなくていいと思います。 |
内部リンクの設定
設定項目 | 内容 |
---|---|
背景色 | 好きな背景色を指定できます。 |
背景画像 | アップロードした画像のURLを指定すると、背景画像を表示できます。 |
サムネイル |
から選択できます。自分のブログのリンクなので、「直接取得する」がベストな選択ですね。 |
サイトアイコン |
から選択できます。小さい画像なので、「WebAPIを利用する」で大丈夫です。 |
付加情報 | サイト情報のあとに、文字を追加できます。「サイト名+付加情報」と表示されます。 |
続きを読むボタンの文字 | 続きを読むテキストを、指定できます。 |
新しいウィンドウで開く |
から選択できます。内部リンクなので、「なし」を選択しています。ぐるぐる巡回してくれたら嬉しいですからね。 |
記事取得方法 |
から選択できます。「常に最新の記事内容から抜粋文を作成する」がベストな選択でですね。 |
記事URLの再取得 | 記事のURLを書き換える予定があるなら、チェックを入れておいてもいいでしょう。基本はなくてもOKです。 |
同ページへのリンクの設定
デフォルト設定でOK
画像取得APIの設定
デフォルト設定でOK
リンク先チェックの設定
デフォルト設定でOK
エディターの設定
デフォルト設定でOK
記事追記中。
詳しい人向けの設定
デフォルト設定でOK
初期化
設定項目 | 内容 |
---|---|
設定を初期状態へ戻す | チェックを入れて、変更を保存をクリックする。 |
Pz-LinkCard の設定をやり直したい場合は、チェックをいれて変更を保存しましょう。
設定はもとに戻りませんので、ご注意を!!
Pz-LinkCardのリンクカードを、カスタマイズしてみた
Pz-LinkCard を、CSS でカスタマイズしてみました。
コピペすればそのまま適用できるように心がけましたが、微調整よろしくおねがいします!!
スクエア型のリンクカード

サイト情報「なし」だけは、Pz-LinkCard で選択してください。
マウスオーバーした際に、ふわっと浮かび上がるマテリアルデザイン風ですね。
デザインコピペ用CSS
.lkc-card {margin: 0 !important;}
.lkc-internal-wrap {background-color: #fff !important;}
.lkc-url {display: none !important;}
.linkcard {
margin: 0 0 1.5em !important;
max-width: 320px;
border-radius: 3px;
-webkit-transition: all ease-in-out .3s;
transition: all ease-in-out .3s;
padding: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.linkcard:hover {
box-shadow: 0 5px 15px rgba(0,0,0,.26);
transform: translateY(-2px);
background-color: #fafafa;
}
.lkc-thumbnail {
margin: 0 !important;
float: none !important;
width: 100% !important;
max-width: 330px !important;
max-height: 250px !important;
}
.lkc-thumbnail-img {
width: 100% !important;
max-height: 250px !important;
}
.lkc-content {
height: auto !important;
margin-top: 0px !important;
}
.lkc-title-text {
display: block;
padding: 15px 13px;
}
※随時追加の予定
サムネイルが出力されない場合
AMPページでは、サムネイルが表示されないようです。
AMPはスタイルシートなど、厳しい規格があるので仕方ないですよね。
AMPページに対応する場合、別記事を用意することも多いと思います。
すなおにリンクテキストで対応するほうが、無難かもしれませんね。
まとめ
Pz-LinkCardの使い方を解説してきました。
プラグインで、簡単にリンクカードを導入できるのでおすすめです。
さまざまなカスタマイズができるところも、開発者の優しさを感じちゃいますよね。
そのほか、WordPress プラグインをお探しなら、こちらの記事もあわせてどうぞ↓