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

この記事のURLとタイトルをコピーする
WordPressプラグイン
読者さん
読者さん
Pz-LinkCard の使い方が知りたい!!

って疑問を、解決していきます。

だれでも簡単に、ブログカード形式のリンクカードを導入できる WrodPress プラグインが「Pz-LinkCard」なんです。

ショートコードで気軽に呼びだせるだけではなく、設定によってデザインや外部リンクの画像を使用することもできるんですよ。

というわけで今回は、「Pz-LinkCard」の使い方を解説していきます。

サウンドオルビス
サウンドオルビス
使い方は、とっても簡単だよ!!

「Pz-LinkCard」の使い方

Pzcardlink01

Pz-LinkCard – WordPress プラグイン | WordPress.orgより引用

WordPressプラグイン「Pz-LinkCard」の使い方を、解説していきます。

Pz-LinkCardの使い方3ステップ

STEP1:Pz-LinkCardをインストールする

Pzcardlink02

  • プラグイン新規追加をクリック
  • 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 linkcard02

ショートコードを貼り付けた記事を、確認します。

画像のようにリンクカード形式で出力されていたら、成功です。

説明終了!!

ねっ!簡単でしょ?

Pz-LinkCardの設定について

設定 - Pz カード設定をクリックして、Pz-LinkCard を使いやすくしていきましょう。

基本の設定

かんたん書式設定の説明です。

配置の設定や、表示の設定などこのあと続きますが...それよりも優先される設定項目です。テンプレみたいなものですね。

設定すると、ブログカードは下のように表示されます↓

Pzlin nasiなし
Pzlin originPz-LinkCardオリジナル
Pzlin simpleシンプル
Pzlin normalノーマル(はてなブログカード風)
Pzlin heading見出し
Pzlin squareスクエア
Pzlin tape centerセロハンテープ(中央)
Pzlin tape leftrightセロハンテープ(左上と右上)
Pzlin tape longセロハンテープ(眺め)
Pzlin kamigamekuretakouka紙めくれた効果
Pzlin tape mekure セロハンテープと紙めくれた効果
Pzlin nuime aoaka縫い目(青と赤)
Pzlin nuime midoritokiiro縫い目(緑と黄色)
Pzlin info orageインフォメーション オレンジ
Pzlin nutral blgreenニュートラル ブルーグリーン
Pzlin enlightedgreenエンライテド グリーン
Pzlin ressistance blueレジスタンス ブルー
Pzlin naname斜め
Pzlin 3dkaiten3D回転
Pzlin osipin押しピン

配置の設定

設定項目内容説明
BLOCKQUOTEタグを使用する <BLOCKQUOTE>で囲んで引用扱いにします外部リンクで利用するなら、チェックを入れるといいかも。
カード全体をリンク カード全体をAタグで囲って、どこをクリックしてもリンク先を開くようにします。全体でリンクしたほうが、読者が押しやすいですよね。
余白Pzlin yohakuわたしの環境だと、余白の設定がうまく動作しませんでした。なので、個別のCSSでカスタマイズします。

表示の設定

外観設定

設定項目解説
サイト情報
  • なし
  • 上側
  • タイトルの上側
  • 下側

から、サイト情報を表示する場所を選べます。サイト名称を使用のチェックを外すと、ドメインが表示されます。

付加情報を見出し表示にする変更される場所が、よくわかりませんでした。
リンク文字のアンダーラインを除去するリンクにアンダーラインがいらないときは、チェックする。
区切り線サイト情報の下に線がでます。
リンク先URLの表示チェックを入れて、リンク先のURLを表示します。読者に安心感を、もってもらいましょう。
記事の情報に枠を付ける内側に枠が付きます。
抜粋文を表示する記事の要約をつけたい場合は、チェックする。ショートコードの content="xxxxx" が表示されます。
内側に影を付ける内側に影がつきます。
影を付けるリンクカードのまわりに、影がつきます。
角を丸めるリンクカードに、丸みがつきます。
マウスでポイントしたときに表示を薄くするリンクであることを、わかりやすく読者に伝えることができます。
サムネイル
  • なし
  • 右側
  • 左側
  • 上側

から、サムネイルの表示位置を選べます。「幅・高さ」の指定とサムネイル画像に影をつけることもできます。

設定項目内容
枠線の太さ「色・線の種類・幅」を指定できます。

  • solid/実線
  • dotted/点線
  • dashed/破線
  • doubled/二重線
  • groove/立体(へこみ)
  • ridge/立体(隆起)
  • inset/立体(押したボタンのような効果)
  • outset/立体(ボタンのような効果)

から、線の種類を選ぶことができます。

CSSリセット(img)チェックしないと、サムネイル画像がずれることがありました。チェックしておきましょう。
続きを読むボタンわたしの環境では、続きを読むボタンは表示できませんでした。
シェア数を表示するわたしの環境では、シェア数を表示できませんでした。

文字の設定

設定項目
  • サイト情報
  • 付加情報
  • タイトル
  • URL
  • 抜粋文
  • 続きを読むボタン
  • 幅に合わせて縮小:チェックしておこう。レスポンシブ!!

わたしの環境では、あまりこのへんのCSS系の設定は、うまくうごきませんでした。

ご利用のテンプレートなどの相性もあるので、あきらめて個別でCSSを設定するようにしましょう。

外部リンクの設定

設定項目内容
背景色好きな背景色を指定できます。
背景画像アップロードした画像のURLを指定すると、背景画像を表示できます。
サムネイル
  • なし
  • 直接取得する
  • WebAPIを利用する
  • 直接取得できない場合、WebAPIを利用する

から選択できます。外部サイトの画像になるので、「なし」が外部リンク先に迷惑をかけないベストな選択ですね。

サイトアイコン
  • なし
  • WebAPIを利用する

から選択できます。「WebAPIを利用する」がベストな選択ですね。

付加情報サイト情報のあとに、文字を追加できます。「サイト名+付加情報」と表示されます。
続きを読むボタンの文字続きを読むテキストを、指定できます。
新しいウィンドウで開く
  • なし
  • すべての端末
  • モバイル端末以外

から選択できます。わたしは「モバイル端末以外」を選んでいます。スマホのブラウザで、タブを開かせるのは申し訳なくて。汗

記事取得方法設定できる項目なし
nofollowを付与する外部にあなたのサイトのパワーを渡したくない場合は、チェックを入れましょう。
はてなブログカードを利用する非推奨なので、チェックしなくていいと思います。

内部リンクの設定

設定項目内容
背景色好きな背景色を指定できます。
背景画像アップロードした画像のURLを指定すると、背景画像を表示できます。
サムネイル
  • なし
  • 直接取得する
  • WebAPIを利用する
  • 直接取得できない場合、WebAPIを利用する

から選択できます。自分のブログのリンクなので、「直接取得する」がベストな選択ですね。

サイトアイコン
  • なし
  • WebAPIを利用する

から選択できます。小さい画像なので、「WebAPIを利用する」で大丈夫です。

付加情報サイト情報のあとに、文字を追加できます。「サイト名+付加情報」と表示されます。
続きを読むボタンの文字続きを読むテキストを、指定できます。
新しいウィンドウで開く
  • なし
  • すべての端末
  • モバイル端末以外

から選択できます。内部リンクなので、「なし」を選択しています。ぐるぐる巡回してくれたら嬉しいですからね。

記事取得方法
  • 常に最新の記事内容から抜粋文を作成する
  • 抜粋文が設定されている投稿はそちらを優先する
  • カード管理画面に記録されている内容から表示する

から選択できます。「常に最新の記事内容から抜粋文を作成する」がベストな選択でですね。

記事URLの再取得記事のURLを書き換える予定があるなら、チェックを入れておいてもいいでしょう。基本はなくてもOKです。

同ページへのリンクの設定

デフォルト設定でOK

画像取得APIの設定

デフォルト設定でOK

リンク先チェックの設定

デフォルト設定でOK

エディターの設定

デフォルト設定でOK

記事追記中。

詳しい人向けの設定

デフォルト設定でOK

初期化

設定項目内容
設定を初期状態へ戻すチェックを入れて、変更を保存をクリックする。

Pz-LinkCard の設定をやり直したい場合は、チェックをいれて変更を保存しましょう。

注意

設定はもとに戻りませんので、ご注意を!!

Pz-LinkCardのリンクカードを、カスタマイズしてみた

Pz-LinkCard を、CSS でカスタマイズしてみました。

コピペすればそのまま適用できるように心がけましたが、微調整よろしくおねがいします!!

スクエア型のリンクカード

Pzlin custom01

サイト情報「なし」だけは、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ページでは、サムネイルが表示されないようです。

Pz-LinkCardのAMP表示例

Pz linkcard amp

AMPはスタイルシートなど、厳しい規格があるので仕方ないですよね。

AMPページに対応する場合、別記事を用意することも多いと思います。

すなおにリンクテキストで対応するほうが、無難かもしれませんね。

まとめ

Pz-LinkCardの使い方を解説してきました。

プラグインで、簡単にリンクカードを導入できるのでおすすめです。

さまざまなカスタマイズができるところも、開発者の優しさを感じちゃいますよね。

そのほか、WordPress プラグインをお探しなら、こちらの記事もあわせてどうぞ↓

「WordPressプラグイン」カテゴリの新着記事はこちら

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

1,755,226 views

悩みからの解放宣言!!「音楽」と「テクノロジー」の悩みを解決するために、情報発信しています。現在「モバイルDTM」といえば、サウンドオルビス!!って言われるような記事をたくさん書いています。

プロフィール