プラグイン

リンクをブログカードにするPz-LinkCardの設定方法と使い方!

Pz-LinkCardでブログカードを設定する方法

今回は、『Pz-LinkCard』というWordpressプラグインで、内部リンクや外部リンクをブログカード形式で表示する方法をご紹介します。

私が使用しているWordpressテーマ『JIN』は、内部リンクのブログカード作成機能はあるものの、外部リンクはありません。

みずー
みずー
外部リンクの紹介も、見栄えの良いブログカード形式にできたらなぁ。と思っていました。

『Pz-LinkCard』には20種類のデザインが用意されています。

こだわりたい方は、配置や文字色、枠色などを自由にこまかく設定することができます。


ただ、初期設定のままだと『JIN』のブログカードとはデザインが合いません

みずー
みずー
初期設定のままでも大丈夫ですが、今回はワードプレステーマ『JIN』のブログカードデザインに近づける設定方法をご紹介します!

↓以下のような『JIN』デザインに近づけた外部リンクのブログカードができます!


こんな人におすすめ!
  • 内部リンク・外部リンクをブログカードで表示したい
  • 『Pz-LinkCard』の設定方法を知りたい
  • 『Pz-LinkCard』で作れるブログカードデザインを見たい
  • WordPressテーマ『JIN』のブログカード風にしたい

『Pz-LinkCard』で作成できるブログカードデザイン一覧

『Pz-LinkCard』は、20種類のブログカードデザインを作ることができます。

みずー
みずー
設定を何もいじらない状態のブログカードデザイン20種類を簡単にご紹介します!

デザインに興味のない方は、サイトマップ作成方法へどうぞ。
=>インストール・設定方法へジャンプ

■なし

みずー
みずー
シンプルで見やすいです。何も設定しなくても完成度高いです!

Pz-LinkCardデザイン:なし


■Pz リンクカード オリジナル

みずー
みずー
“なし”のデザインの上部に色がグラデーションでついたデザインです。

Pz-LinkCardデザイン:Pz-LinkCard オリジナル


■シンプル

みずー
みずー
枠線のないデザインです。

Pz-LinkCardデザイン:シンプル


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

みずー
みずー
影がついて立体感のあるデザインです。
シンプルだけど目立つ、いい感じのデザインだと思いました!

Pz-LinkCardデザイン:ノーマル(はてなブログカード風)


■見出し

みずー
みずー
見出しのように横幅いっぱいのデザインです。
横幅いっぱいのせいか、洗練された印象を受けます。

Pz-LinkCardデザイン:見出し


■スクエア

みずー
みずー
画像が大きく表示されるデザインです。
残念なのは、画像の一部が拡大されていてよくわからないのと、抜粋文がはみ出してしまっているところです。

Pz-LinkCardデザイン:スクエア


■セロハンテープ(中央)

みずー
みずー
セロハンテープでリンクカードを貼り付けた風のデザインです。

Pz-LinkCardデザイン:セロハンテープ(中央)


■セロハンテープ(左上と右上)
Pz-LinkCardデザイン:セロハンテープ(左上と右上)


■セロハンテープ(長め)
Pz-LinkCardデザイン:セロハンテープ(長め)


■紙がめくれた効果

みずー
みずー
リンクカードの右下が少しめくれたように見えるデザインです。
使っているテーマによっては、この効果がよくわからないこともあるようです。

Pz-LinkCardデザイン:紙がめくれた効果


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

みずー
みずー
先ほどの“紙がめくれた効果”にセロハンテープが追加されたデザインです。

Pz-LinkCardデザイン:セロハンテープと紙めくれた効果


■縫い目(青と赤)

みずー
みずー
画像ではわかりづらいですが、枠線の内側が縫い目のようになったデザインです。

Pz-LinkCardデザイン:縫い目(青と赤)


■縫い目(緑と黄色)

みずー
みずー
“縫い目(青と赤)”の色違いです。

Pz-LinkCardデザイン:縫い目(緑と黄色)


■インフォメーション オレンジ
Pz-LinkCardデザイン:インフォメーション オレンジ


■ニュートラル ブルーグリーン
Pz-LinkCardデザイン:ニュートラル ブルーグリーン


■エンライテド グリーン
Pz-LinkCardデザイン:エンライテド グリーン


■レジスタンス ブルー
Pz-LinkCardデザイン:レジスタンス ブルー


■斜め

みずー
みずー
ブログカードが斜めになったデザインです。
文字も斜めになっているので、少し見づらいです…

Pz-LinkCardデザイン:斜め


■3D回転

みずー
みずー
回転している途中のデザイン。
目立つけどリンクできると思われないかもしれません…

Pz-LinkCardデザイン:3D回転


■押しピン

みずー
みずー
ブログカードが押しピンでとめられたデザイン。かわいい感じです。

Pz-LinkCardデザイン:押しピン


以上が、デザインを選択するだけで作成できるPz-LinkCardのデザイン一覧です。

みずー
みずー
それでは、インストールと設定を行っていきましょう!

『Pz-LinkCard』のインストール・設定方法

ここでは、『Pz-LinkCard』インストールと設定方法について、説明します。

『Pz-LinkCard』のインストール方法

『Pz-LinkCard』のインストール方法
  • Step1
    プラグインの新規追加画面を出す


    Wordpressダッシュボードの「プラグイン」→「新規追加」をクリックします。
    プラグインの新規追加
  • Step2
    『Pz-LinkCard』をインストールする


    検索バーからPz-LinkCardを探し、「今すぐインストール」ボタンをクリックします。
    Pz-LinkCardをインストールする
  • Step3
    『Pz-LinkCard』を有効化する


    インストールが完了したら、忘れずに「有効化」ボタンをクリックします。
    Pz-LinkCardの有効化
みずー
みずー
これで、『Pz-LinkCard』のインストールは完了です!
引き続き設定を行いましょう!

JINのブログカード風にする設定

『Pz-LinkCard』で作るブログカードデザインをJIN風にする設定方法は、

プラグイン作成者であるぽぽろんさん(@popozure)の記事を参考にしました。

ぽぽろんさんの記事のとおりに設定したJIN風ブログカードデザインは下のようになります。

Pz-LinkCardのJIN風ブログカードデザイン

私はもう少しスッキリさせたかったので、下記の設定を加えています。

  • ブログ名を記事タイトルの上に移動
  • シェア数の表示を非表示
デフォルトのJIN風ブログカードデザイン

これから説明する通りに設定すると、以下のデザインになります。
JIN風ブログカードデザイン

みずー
みずー
それでは、JIN風ブログカードを作れる設定を説明していきます!
ブログカードデザインをJIN風にする設定方法
  • Step1
    Pz-LinkCardの設定画面を開く


    ダッシュボード→「設定」→「Pzカード設定」をクリックします。
    Pz-LinkCardの設定画面を表示する
  • Step2
    【基本の設定】を設定する


    “かんたん書式設定”で、「見出し」を選択します。
    Pz-LinkCardの書式設定
  • Step3
    【表示の設定】を設定する


    “外観設定”でサイト情報を「タイトルの上側」に設定します。
    Pz-LinkCardのサイト情報位置設定

    “枠線の太さ”で、好きな色を設定します。

    みずー
    みずー
    太さも変更できますが、特にこだわりがなければそのままでOKです。

    Pz-LinkCardの枠線の色を設定


    “シェア数を表示する”でチェックをすべて外します。
    Pz-LinkCardのシェア数を表示する設定

  • Step4
    【外部リンクの設定】を設定する


    “付加情報”に好きな誘導文を入力します。

    Pz-LinkCard付加情報の表示場所
    Pz-LinkCardの外部リンクの付加情報の設定

  • Step5
    【エディターの設定】を設定する


    以下の3つにチェックをつけます。

    1. テキストリンク行の変換
    2. URL行の変換
    3. 外部リンクのみ変換

    Pz-LinkCardのエディターの設定

  • Step5
    変更を保存する


    すべての設定が終わったら、忘れずに「変更を保存」ボタンをクリックします。
みずー
みずー
これで、『Pz-LinkCard』のJIN風ブログカードデザインを作る設定は完了です!

次は実際に記事中にブログカードを表示させる方法を説明します。

『Pz-LinkCard』でブログカードを表示する方法

ブログカードを記事中に挿入する方法は簡単です。

注意:URL行の変換がうまくいきませんでした

Pz-LinkCardのURL行の変換設定

上記の設定をしている場合、記事中にURLを入力するだけでブログカードを生成してくれます。
しかし、これがうまくいかない現象が確認されているとのことです。

みずー
みずー
実際、私もうまくいきませんでした。

ここでは、ショートコードを記述する方法をご紹介します

テキストエディタの場合

外部リンクURLを記事に貼り付け、URLを選択した状態で「リンクカード」ボタンをクリックします。
Pz-LinkCardのテキストエディタのブログカード作成方法

ブログカードのショートコードが完成します。
Pz-LinkCardを使ってテキストエディタでショートコードが完成

ビジュアルエディタの場合

このブログはワードプレステーマ『JIN』を使っています。

私のビジュアルエディタの編集画面には、リンクカードを挿入するボタンが表示されませんでした

みずー
みずー
調べたところ、他にも『JIN』をお使いの方で同様の現象が起こっているという方がいらっしゃいました。

その方によれば、コクーン、アフィンガー5、ストークはちゃんと表示されるとのことです。

参照:『Pz-LinkCard』ver2.2.1更新記事のコメント欄

リンクカードを挿入するボタンが表示されていない方
→テキストエディタで編集してください。

リンクカードを挿入するボタンが表示されている方
→以下のリンク記事の「目次3-3.2 記事作成にビジュアルエディタを使用している場合」を参考にして編集してください。


『Pz-LinkCard』の便利な機能

『Pz-LinkCard』を実際に使ってみて、便利だなと思った機能は以下の2点です!

『Pz-LinkCard』の便利な機能
  • 管理画面でリンク切れがわかる
  • タイトルや抜粋文を編集できる

上記の2点は、どちらも管理画面の機能です。

みずー
みずー
ダッシュボード→ツール→Pzカード管理で管理画面が開けます。
Pz-LinkCardの管理画面の開き方

管理画面でリンク切れがわかる

管理画面は、ワードプレスの投稿一覧の管理画面と同じような感じです。

リンク切れがある場合は、「リンク切れ」にまとめて表示してくれます。

みずー
みずー
管理画面を見れば全てのリンク切れがわかるから便利!

Pz-LinkCardの管理画面

タイトルや抜粋文を編集できる

管理画面で、編集したいリンクカードの「編集」ボタンをクリックすると、編集画面が開きます。
Pz-LinkCardの管理画面

サイト名、記事タイトル、抜粋文を自由に編集することができます。
Pz-LinkCardの個別編集画面

まとめ:Pz-LinkCardはブログカード作成に便利なプラグイン!

外部リンクもブログカードにしたくて、プラグイン『Pz-LinkCard』を導入しました。

みずー
みずー
多少不具合もありましたが、回避方法があるので私は問題なく使えました!

なにより、日本製のプラグインなので日本語表記でわかりやすいです。

また、ブログのコメント欄を見て、作者のぽぽろんさんは対応がとても親切な印象を受けました。

設定もかなり細かく調整できるので、こだわりたい方にもぴったりのプラグインです。

リンクをカード形式で表示させたい方は、ぜひ導入してみてください。


みずー
みずー
最後まで読んでいただき、ありがとうございました!

記事の更新情報などはツイッターで行ってます。
良かったらフォローお願いします!=>みずーのツイッター

=>『ブログ運営』カテゴリに戻る

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA