Pz-LinkCard 完全ガイド！使い方、設定、カスタマイズなど徹底解説！

2025年8月20日

「記事内のリンクをもっとおしゃれに見せたい」
「HTMLやCSSの知識がなくても簡単にカード型リンクを作れないかな？」
「プラグインを入れたけれど、思ったように表示されない」

こんな悩みを抱えていませんか？

ブログの記事中にURLを貼るだけだと味気ない……
手動でHTMLを書くのは手間がかかりすぎる
導入後の細かな調整方法がわからない

Pz-LinkCardは、これらの問題を一気に解決してくれるWordPressプラグインです。

ワンクリックでカード化：ショートコードやエディタボタンを使うだけ
豊富なデザインプリセット：シンプルからはてな風、人気テーマ風まで選べる
細かいカスタマイズ：幅・余白・フォント・挙動など、管理画面で直感的に設定可能

この記事では、初心者の方でも迷わず使いこなせるよう、

インストール方法
基本的な使い方
設定＆レイアウト調整
トラブル解決
上級カスタマイズ

の流れで、徹底的に解説します。

Pz-LinkCardとは何か

Pz-LinkCardは、WordPressの記事内にリンクを視覚的に魅力的なカード形式で表示できる無料プラグインです。

初心者でも簡単に導入でき、以下のようなメリットがあります。

主な特徴

ショートコード対応
- [pz-linkcard url="リンク先"] のようにURLを指定するだけで自動変換✨
エディタボタンで楽々挿入
- ビジュアルエディタに専用アイコンが追加され、クリックひとつでカード作成
デザインプリセット多数
- シンプル／はてな風／JIN風など、好みやサイトテーマに合わせて選択可能
カスタマイズ性の高さ
- カード幅・文字サイズ・色合い・アイコン表示など細かな調整OK
軽量＆高速表示
- 無駄なスクリプトを省き、ページ速度への影響を最小限に抑制

利用イメージ

スクロールできます

機能	説明
ショートコード	URLを囲むだけでカード化
ボタン挿入	編集画面上のワンクリック操作
自動変換	テキストリンクを自動でカードに置き換え
豊富なプリセット	複数のデザインから最適なものを選択可能
詳細設定	管理画面で幅・高さ・フォントなど自由に調整

こんな人におすすめ

ブログ初心者でリンク装飾に時間をかけたくない方
視認性を高めて読者のクリック率を向上させたい方
コード編集なしでスタイリッシュなカードを導入したい方

Pz-LinkCardを使えば、専門知識がなくてもワンクリックでプロ並みのリンクカードが実現できます！ 🎉

導入の準備とインストール

プラグインの入手方法（公式ディレクトリから検索／ダウンロード）

WordPress管理画面にログイン
サイドバーから 「プラグイン」＞「新規追加」 を選択
右上の検索ボックスに Pz-LinkCard と入力
「今すぐインストール」をクリック
自動でダウンロード＆設置完了！

もし手動で導入したい場合は、以下の手順でZIPファイルをアップロードできます。

スクロールできます

方法	手順概要	ポイント
公式ディレクトリ検索	管理画面＞プラグイン＞新規追加＞検索＞インストール	最も簡単＆最新バージョンを自動取得 😊
ZIPアップロード	ダウンロード＞管理画面＞プラグイン＞新規追加＞アップロード	オフライン環境やテスト環境にも対応 👍

有効化と初期セットアップ

プラグインのインストール直後に表示される 「有効化」 ボタンをクリック
サイドバーに 「Pz-LinkCard」 メニューが追加されるのを確認
「Pz-LinkCard」＞「基本設定」 を開く
- 言語設定：サイト言語に合わせて自動選択
- デフォルトデザイン：最初に表示させたいカードスタイルを選択
- カード幅：標準は 100%（レスポンシブ対応）
- キャッシュ設定：初回読み込みを高速化する場合は有効化
保存を押して、初期設定完了！ 🎉

💡 ワンポイントアドバイス

初期設定では「シンプル」デザインを選択しておくと、後から他のスタイルに切り替えやすくなります。
設定後はテストURLで動作確認を行い、問題なければ記事執筆に進みましょう！

基本的な使い方

ショートコードを直接記述する方法

記事本文にショートコードを貼り付けるだけで、リンクカードを生成できます。

[pz-linkcard url="https://example.com" title="サンプルサイト" description="サイトの説明文を入れられます" thumbnail="https://example.com/image.jpg"]

url：必須。カード化したいリンク先URL
title：省略可。カード内のタイトルを上書き
description：省略可。抜粋文を設定
thumbnail：省略可。サムネイル画像を指定

🌟 ポイント：ショートコードだけならテキストエディタでもOK。細かい属性を追加したいときに便利です。

ビジュアルエディタの専用ボタンで挿入する方法

ビジュアルエディタのツールバーに追加されたPz-LinkCardボタンを使うと、入力フォームで簡単に設定できます。

編集画面でカードを挿入したい位置にカーソルを置く
ツールバーの🔗アイコンをクリック
ポップアップにURLを貼り付け
（必要に応じて）タイトルや説明文、デザインプリセットを選択
「挿入」を押すと、自動でショートコードが本文に追加される

スクロールできます

操作手順	説明
カーソル配置	挿入場所を決める
アイコンをクリック	ポップアップが開く
各種項目を入力	URL／タイトル／スタイルを選択
挿入	ショートコードが本文に反映される

👍 メリット：入力ミス防止・視覚的に設定できるので初心者におすすめ！

自動変換機能（テキストリンク→カード）

Pz-LinkCardには、記事内のテキストリンクを自動でカード化する機能があります。

設定画面で「自動変換」オプションを有効化
リンクテキストを通常どおり貼り付け

   <a href="https://example.com">サンプルサイト</a>

フロント表示時に自動でカード形式に変換される

😎 注意点：

自動変換対象は記事本文内の <a> タグのみ
他のプラグインやテーマのフィルタと干渉する場合があるので、確認を忘れずに

カードレイアウトの設定

デザインプリセット（シンプル／はてな風など）

Pz-LinkCardには多数のあらかじめ用意されたスタイルがあり、クリック1つで切り替え可能です。

シンプル：最小限の装飾でテキストを際立たせる
はてな風：はてなブログカード風の丸みを帯びたデザイン
JIN風：人気テーマ「JIN」を意識したカラーと影付きボックス
コンパクト：サムネイルを小さくし、テキストを多く表示

💡 プリセットは管理画面の「デザイン設定」から選択し、プレビューで即座に確認できます。

配置とサイズ（横幅・高さ・余白）

カードの大きさや余白は任意で調整でき、レスポンシブ対応も万全です。

スクロールできます

設定項目	内容例	ポイント
横幅（width）	`100%` / `300px`	親コンテナに合わせるか固定幅にするか選べる
高さ（height）	`auto` / `150px`	サムネイル比率を保持したいときは`auto`がおすすめ
余白（margin）	`10px 0`	上下のスペース調整で読みやすさアップ
内側余白（padding）	`8px 12px`	テキストの詰まりを解消、ボタン感を強調

✨ レスポンシブ時は横幅を100%、高さをautoに設定し、スマホでも美しく表示。

テキスト表示（タイトル・抜粋・フォント調整）

カード内の文字情報は細かくカスタマイズ可能です。

タイトル表示：デフォルトでH4相当の大きさ。サイズ・色を変更できる
抜粋（description）：表示／非表示を切り替え。文字数制限も設定可能
フォントサイズ：PC用・スマホ用で別々に指定
文字色・背景色：CSS変数で簡単にテーマカラーに合わせられる

🔧 管理画面の「文字設定」で、プレビューを見ながら調整できるため、直感的。

外部リンク／内部リンクの挙動

カードに設定したリンクの動作も選択肢があります。

スクロールできます

リンク種別	選べる挙動	注意点
外部リンク	新しいタブで開く／同タブで開く	SEOを意識するなら新しいタブ推奨 🚀
内部リンク	同タブで開くのみ	サイト内回遊を促進したい場合に有効
自動検証（オプション）	リンク切れを検出	定期チェックでメンテナンス工数を削減

🔒 セキュリティ面やUXを考慮し、外部は新規タブ、内部は同タブ開く設定が最も一般的です。

これらの設定を組み合わせることで、サイトのデザインやユーザー体験に合わせたオリジナルなリンクカードを簡単に作成できます！ 🎨

管理画面での詳細カスタマイズ

設定タブの構成（基本・表示・配置・文字）

Pz-LinkCardの管理画面には、主に4つのタブが並び、各種オプションをまとめて変更できます。

スクロールできます

タブ名	主な項目	概要
基本	プラグインの言語／デフォルトデザイン	インストール直後の初期値を設定
表示	サムネイル有無／抜粋文の表示	カード内に表示する要素をON／OFF切り替え
配置	幅・高さ・余白／レスポンシブ設定	レイアウトの寸法やスマホ時の挙動を細かく指定
文字	タイトルサイズ／フォントファミリー	テキストの大きさ・フォント・色を調整

💡 すべての設定はリアルタイムプレビュー対応。変更後すぐに反映イメージが確認できます。

定型フォーマットの切り替え

あらかじめ用意された「定型フォーマット」を、ワンクリックで切り替え可能です。

シンプル：最小限の装飾で読みやすさ重視
はてな風：丸みと影でやわらかい印象
JIN風：影付きボックス＋テーマカラーのアクセント
カスタム：自分で設定した配色・余白・フォントを保存

⚙️ 使い方

管理画面の「定型フォーマット」タブを開く
プリセットを選択
「適用」をクリックして完了

画像取得やリンク検証のオプション

カードのクオリティとメンテナンス性を向上させる便利機能です。

スクロールできます

機能	説明
自動サムネ取得	リンク先サイトのOGP画像を自動で取得・設定
手動サムネ指定	サムネURLを直接入力
リンク切れチェック	定期的にリンク状態を確認し、切れたリンクを一覧で通知
キャッシュ設定	サムネ・メタ情報をキャッシュし、読み込み速度を最適化

⚠️ リンク検証はサーバー負荷がかかる場合があるため、実行間隔はサイト規模に合わせて調整しましょう。

リンクカードの一元管理機能

管理画面からすべてのカードをまとめて確認・編集・削除できるダッシュボードです。

スクロールできます

操作	内容
一覧表示	作成済みカードを表形式で表示（タイトル／URL／デザインプリセット）
一括編集	複数選択してデザイン／テキスト設定をまとめて更新
個別編集	特定カードのみプレビューを確認しながら設定変更
一括削除	不要なカードをまとめて削除

🚀 活用例：キャンペーン用に多数のリンクカードを作成した後、表示デザインだけまとめて切り替える、などが簡単に行えます。

上級カスタマイズと追加CSS

独自CSSで見た目を調整する例

Pz-LinkCardの標準スタイルをベースに、自分好みのデザインを実現するには、カスタムCSSが有効です。

以下は一例です。

/* カード全体に影と角丸を追加 */
.pzlc-card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* サムネイル部分の比率を固定し、ズーム効果を付与 */
.pzlc-thumbnail img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.pzlc-thumbnail img:hover {
  transform: scale(1.05);
}

/* タイトルテキストの装飾 */
.pzlc-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
}

/* 抜粋文をグレーで小さめに */
.pzlc-description {
  font-size: 0.9rem;
  color: #666;
}

ポイント：.pzlc-で始まるクラスを狙うと、将来のアップデートでも影響を受けにくい
Tip：メディアクエリを使えば、スマホ／PC別の微調整も可能📱💻

Lightning/JIN風スタイルへの変更ポイント

人気テーマのイメージを取り入れるには、以下の要素に注目しましょう。

スクロールできます

要素	Lightning風	JIN風
ボーダー	軽やかな1pxグレー枠	影付きの太めボーダー（2px／テーマカラー）
背景色	白ベース＋薄いグレーのホバーエフェクト	薄いテーマカラーの背景＋カード中央に陰影
角丸	6px	12px
影の強さ	控えめな `0 2px 4px rgba(0,0,0,0.08)`	強めの `0 6px 12px rgba(0,0,0,0.15)`
ホバー時の変化	背景色がやや濃くなる	全体が少し浮き上がるように拡大＋影が深くなる

Lightning風のサンプルCSS

.pzlc-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.pzlc-card:hover {
  background-color: #f9f9f9;
}

JIN風のサンプルCSS

.pzlc-card {
  border: 2px solid var(--accent-color);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  background-color: var(--background-light);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pzlc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

🎨 活用例：サイトのテーマカラーをCSS変数（--accent-colorなど）で管理すると、全カードに一括反映できて便利です！

エディタ別の使い分けポイント

クラシックエディタでの最適な操作手順

テキストタブに切り替え
- ビジュアルと混同せず、ショートコードを直接貼り付けやすくなります。
ショートコード入力
- [pz-linkcard url="…"] を挿入し、必要に応じて title や description 属性を追加。
ビジュアルタブで確認
- ビジュアルエディタに戻して、カードのプレビューをチェック😊
微調整
- 表示がおかしい場合は再びテキストタブへ戻り、属性や改行の位置を修正。

💡 ヒント：

改行が多いと余計なスペースが生じるため、ショートコードは前後に改行1回だけ入れるとスッキリ表示。
URLのみ貼り付けて自動変換を使う場合は、HTMLタグ（<a>）ではなくテキストリンクを記載。

ブロックエディタでの利用方法

ブロックエディタ（Gutenberg）では、専用ブロックを活用すると直感的に操作できます。

スクロールできます

操作手順	説明
ブロック追加ボタンをクリック	「Pz-LinkCard」ブロックを選択
URLを入力	ブロック内の入力欄にカード化したいURLを貼り付け
設定サイドバーで調整	デザインプリセット／タイトル表示／サムネイル有無などをチェック
プレビュー確認	「プレビュー」機能でフロント画面を表示し、最終仕上がりを確認✨

🔧 おすすめ設定：

「自動変換ブロック」 を使えば、既存テキストリンクを一括でカードに変換可能。
レイアウトを複数カラムに配置する際は、カラムブロック内にPz-LinkCardブロックを入れるとレスポンシブ対応が簡単。

以上のポイントを踏まえれば、どちらのエディタでもスムーズにPz-LinkCardを活用できます！

よくあるトラブルと解決策

カードが表示されないときのチェック項目

以下のポイントを順に確認しましょう。

スクロールできます

チェック箇所	確認内容
プラグインの有効化	Pz-LinkCardが有効化されているか。管理画面▶プラグインで確認 ✅
ショートコード／URLの記述	ショートコードに誤字やスペースがないか。`[pz-linkcard url="…"]`形式か
キャッシュ	キャッシュプラグインやブラウザキャッシュをクリアして最新表示 💦
他プラグインの競合	一度他プラグインを停止し、再度表示を確認（特にキャッシュ系・最適化系）
テーマの影響	テーマのカスタムテンプレートや関数でフィルターがかかっていないか
自動変換設定	自動変換機能を使う場合は、設定画面で「自動変換」がONか確認 🔄

既知の不具合と回避方法

Pz-LinkCard利用時に報告されやすい問題と、その対処例です。

サムネイルが取得できない
- 原因：リンク先サイトのOGPタグ未設定
- 対策：手動で thumbnail="画像URL" を指定、またはOGPタグを設置👍
デザインが崩れる（スタイルの重複）
- 原因：テーマや他プラグインのCSSが干渉
- 対策：カスタムCSSでセレクタを明示的に指定するか、プラグイン設定の「カスタムCSS」欄に上書きルールを追加🎨
ビジュアルエディタボタンが表示されない
- 原因：TinyMCEプラグインの競合
- 対策：該当プラグインを一時無効化、または add_filter('mce_buttons', '…') 部分を見直し🔍
自動変換でリンクが二重になってしまう
- 原因：本文内にすでにショートコードが存在
- 対策：自動変換はON/OFFを切り替えて使い分け。手動挿入と自動変換を同時に併用しない⚠️
リンク切れチェックでエラーが多発
- 原因：サーバー負荷や通信制限
- 対策：チェック間隔を長めに設定、または手動サムネ指定に切り替え⌛

これらを参考に、トラブルが起きても落ち着いて原因を切り分け、適切な対策をとりましょう！ 🚀

振り返りとおすすめの活用例

効果的な導入手順の振り返り
1. プラグインをインストール＆有効化し、初期設定で「シンプル」デザインを選択
2. ショートコード or エディタボタンでリンクカードを挿入し、動作確認
3. 管理画面でデザインやテキスト表示の詳細設定を微調整
4. 必要に応じて独自CSSやプリセット切り替えで見た目をブラッシュアップ
5. 本番公開前にキャッシュクリア＆テストページで最終チェック ✔️

この手順で進めると、初心者でも迷わず一貫したカードデザインを実装できます。

実際の活用シーン紹介

スクロールできます

シーン	活用例
ブログ記事内の参考リンク	関連サイトをカード化し、読者のクリックを誘導📈
商品レビュー	商品ページへのリンクをサムネ付きカードで見栄え良く表示🛍️
メールマガジンやLPリンク	LPへ誘導する際にカードを埋め込み、視認性をアップ🖥️
サイドバーやウィジェット	人気記事への内部リンクカードを並べて、回遊率アップ⏫
SNSまとめ記事	外部記事まとめをカードで一覧表示し、情報を整理して見せる📚

これらの例を参考に、自分のサイトテーマに合わせた使い方を試してみてください。

Pz-LinkCardを活用すれば、読者の目を引くリンク演出が簡単に実現できます！🎉