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

WordPressプラグイン

公開:2019.08.18 （更新: 2021.02.17）

助手くん

Pz-LinkCard の使い方が知りたい!!

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

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

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

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

サウンドオルビス

使い方は、とっても簡単だよ!!

「Pz-LinkCard」の使い方

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

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

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

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 を使いやすくしていきましょう。

【開発者の詳細なマニュアル】WordPressでリンクをカード形式で表示する Pz-LinkCard | ぽぽづれ。

基本の設定

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

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

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

なし

Pz-LinkCardオリジナル

シンプル

ノーマル(はてなブログカード風)

見出し

スクエア

セロハンテープ(中央)

セロハンテープ(左上と右上)

セロハンテープ(眺め)

紙めくれた効果

セロハンテープと紙めくれた効果

縫い目(青と赤)

縫い目(緑と黄色)

インフォメーションオレンジ

ニュートラルブルーグリーン

エンライテドグリーン

レジスタンスブルー

斜め

3D回転

押しピン

配置の設定

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

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

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

サイト情報「なし」だけは、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;
}

※随時追加の予定