ブログカードを作成・カスタマイズできるPz-LinkCardプラグイン
リンク先の情報を表示するブログカード、便利ですよね。タイトルやアイキャッチ画像、抜粋などを見やすく表示して、サイトのPVを増やすのにも役立ちます。
![ブログカードの例](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-18_11-12-54.png)
そんなブログカードのレイアウトをカスタマイズできるPz-LinkCardプラグインを紹介します。
この記事の内容
Pz-LinkCardによるブログカードの作り方
「プラグイン」‐「新規追加」メニューからPz-LinkCardプラグインをインストール、有効化します。
![Pz-LinkCardプラグインのインストール](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_13-54-13.png)
ビジュアルエディタで「リンクカードを挿入」をクリックします。
![「リンクカードを挿入」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_13-57-32.png)
リンクカードを作成するURLを入力して「挿入」をクリックします。
![作成対象のURLを入力](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_13-59-27-710x160.png)
- クラシックエディタを使う
- ショートコード [blogcard url="URL"] を使う(URLは要変更)
ショートコードが追加されます。これで完成です。
![ショートコードが追加される](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-01-29.png)
表示すると、ブログカードとして表示されます。
![ブログカードが表示される](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-04-06.png)
ブログカードの表示設定
「設定」‐「Pzカード設定」メニューから、ブログカードの表示方法を設定できます。
かんたん書式設定
「基本」‐「かんたん書式設定」メニューでレイアウトを選ぶことができます。
![かんたん書式設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-08-23.png)
選択例をいくつか紹介します。
![囲み](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-12-27.png)
![ノーマル](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-20-38.png)
![紙がめくれた効果](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-14-26.png)
![インフォメーションオレンジ](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-15-29.png)
![WindowsXP](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-17-03.png)
配置(サイズや余白)
「配置」ではブログカードのサイズや余白を設定できます。
![ブログカードのサイズ・余白設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-23-40.png)
見出しの表示
ブログカードの上に「こちらもどうぞ」や「この記事も読まれています」などの見出しを表示するには、次のように設定します。
「外部リンク」の「付加情報」に見出しの文字を入力します。
![見出しの文字を入力](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-37-54.png)
「表示」の「付加情報を見出し表示にする」をチェックします。
![「付加情報を見出し表示にする」をチェック](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-39-20.png)
設定した付加情報が見出しとして表示されるようになります。
![見出しが表示される](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_14-42-44.png)
URLや抜粋の表示設定
「表示」ではサイト名やURL、抜粋などの表示/非表示を設定できます。
![各パーツの表示設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_15-31-06.png)
カードの角を丸くしたりマウスオーバー時のアクションなども設定できるので、いろいろ試行錯誤してみてください。
CSSを使ったカスタマイズ例
CSSを使ってレイアウトをカスタマイズすることもできます。こんな感じに仕上げてみました。
![ブログカードのスタイル設定例](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-04_15-17-47.png)
※「かんたん書式設定」は「なし」にしてください。
使ったCSSは次のようになります。「外観」-「カスタマイズ」-「追加CSS」メニューなどに入力してみてください。
/* ブログカード */ .lkc-external-added { top: -16px; left: 20px; padding: 10px 15px; background-color: darkred; border-radius: 5px; color: #fff !important; font-weight: bold; font-size: 16px !important; } .lkc-external-wrap { border: 3px solid darkred; border-radius:5px; } .lkc-favicon, .lkc-domain, .lkc-share { display: none !important; }
「darkred」の部分が枠線の色設定です。好きな色(カラーコード)に変更してください。
以上、Pz-LinkCardプラグインを使ったブログカードを紹介しました。興味がある方は、ぜひお試しください。