Pz-LinkCardの設定と使い方：リンク先をサムネ付きのブログカードで表示

プラグイン「Pz-LinkCard」を追加すると、外部リンク及び内部リンクをブログカード形式で表示させることができます。一度設定してしまえば使い方も簡単です。

デザインのカスタマイズも可能で、ショートコードにURLを入力するだけで機能します。また、リンク先のサムネイルや抜粋だけでなく、SNSのカウント数を表示させることもできます。

ブログカードで表示させたリンク

設定

Pz-LinkCardを追加＆有効化すれば、下記ショートコードにリンク先のURLを入力するだけで機能します（内部リンク及び外部リンクどちらにも使えます）。

※例：[blogcard url=”https://affilabo.com/adsense/15245/”]

初期設定で表示されるブログカード（外部リンク）

基本設定

管理画面の設定に「Pz カード設定」が追加されるので、そこから各種設定を行います。

プラグインの詳しい説明は、開発者サイトWordPressでリンクをカード形式で表示する Pz-LinkCardで確認して下さい。設定はほとんどデザインの変更です。

中には必要ない機能もありますので、今回は最初に紹介したシンプルなブログカードにする設定（変更した部分のみ）を紹介します。他はお好みで設定して下さい。

定型書式

定型書式

おおまかなデザインを変更できます。シンプルなら「なし」推奨。

配置設定

配置設定

カードの「横幅」「高さ」「余白」を設定できます。横幅のみ「%」が使えます。

「中央に寄せる」にチェックを入れるとカードが中央寄せになります。

カード全体をリンク

カード全体をリンク

チェックを外すとカード全体がリンクになる設定を解除できます。

枠線の太さ

枠線の太さ

枠線の太さや色を設定できます。

外観設定

外観設定

カードのデザインを指定することができます。

必要ない項目はチェックを外して、必要な項目にはチェックを入れて下さい。

シェア数を表示する

シェア数を表示する

「フェイスブック（シェア数）」「はてなブックマーク」のシェア数を表示させることができます。

但し、有効にすると最初のカウントを取得する際にカード表示が遅くなる可能性があります。

外部リンク

外部リンク

サムネイル「WebAPIを利用する」で外部リンクにもサムネイルを表示させることができます。

設定は以上です。

CSSの編集

気になるところがあればテーマのスタイルシートで調整して下さい。

カードの高さを自動調整する

高さがタイトル及び抜粋の長さで自動調整されます。スマホ表示で見切れることがなくなります。

カーソルを乗せた時にサムネイル画像を半透明にする

透明度の数値はお好みで設定して下さい。

テキストリンクの装飾を解除する

テキストリンクにテーマの装飾が施されてデザインが崩れる場合は、「.linkcard a」で解除して下さい。下記は公式テーマ「Twenty Sixteen」「Twenty Fifteen」「Twenty Fourteen」の解除方法です。

最後に

基本的にプラグインを有効化してショートコードにURLを入力するだけで使えます。

デザインについては、一度「Pz-LinkCard」でブログカードを表示させる。それからブログのデザインに合わせて変更及び調整すると分かりやすいと思います。