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

助手くん

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

基本の設定

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

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

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

なし

Pz-LinkCardオリジナル

シンプル

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

見出し

スクエア

セロハンテープ(中央)

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

セロハンテープ(眺め)

紙めくれた効果

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

縫い目(青と赤)

縫い目(緑と黄色)

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

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

エンライテド グリーン

レジスタンス ブルー

斜め

3D回転

押しピン

配置の設定

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

表示の設定

外観設定

文字の設定

設定項目

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

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

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

外部リンクの設定

内部リンクの設定

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

デフォルト設定で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 プラグインをお探しなら、こちらの記事もあわせてどうぞ↓

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

2019.08.19

WordPressプラグインおすすめ24選!!愛好家が選ぶ【2020】

WordPress プラグインのおすすめを、プラグイン愛好家のサウンドオルビス（@soundorbis）が、25こ選んでみました。 プラグインの入れすぎは、デメリットがありそうですが...プラグインを 30 個ぐらい入れていますが、わたしの環境ではあまりサイトの速度に影響している感じがし...