AFFINGER7で外部リンクをブログカード化する方法｜Pz-LinkCardの設定手順

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7では外部リンクをブログカード化できない？

AFFINGER7には内部リンク（サイト内リンク）をブログカード化する機能がありますが、外部リンクを自動でカード化する標準機能はありません。

そのため、外部サイトへのリンクをカード形式で表示したい場合は別途プラグインが必要です。

Pz-LinkCardとは？

Pz-LinkCard は、外部リンク・内部リンクをブログカード形式で表示できるWordPressプラグインです。
URLを指定するだけで、カード形式のリンクが簡単に作れます。

Pz-LinkCardでできること

• 外部リンク・内部リンクのブログカード化対応
• 見出し画像（サムネイル）・タイトル・抜粋文の表示
• 表示スタイルのカスタマイズの自由度が高い
• キャッシュ機能で高速表示

Pz-LinkCardの注意点（表示スタイル）

Pz-LinkCardは表示スタイルの自由度が高い一方で、設定次第ではレイアウトが崩れたり、読みづらくなることがあります。特に注意したいのは、余白・サムネイルサイズ・文字量のバランスです。

カードの横幅をサイトデザインに合わないサイズにすると、スマホ表示で窮屈に見えたり、本文よりもカードが目立ちすぎる原因になります。また、サムネイルを大きくしすぎると、リンク先の情報より画像が強調されてしまい、クリック率が下がることもあります。

以下にサンプル画像を掲載していますが、リスト型でサイト幅に合わせて表示すれば、レイアウトは比較的きれいに整います。
一方で、カード型表示はカラム数を画面幅に応じて自動調整できないため、表示環境によってはレイアウトが崩れやすい点に注意が必要です。

特にサイト幅やスマホ表示では、カードの並びが不自然になり、余白やサイズ感に違和感が出ることがあります。そのため、安定した表示を重視する場合は、リスト型表示を選ぶほうが無難です。

リスト型のブログカードプレビュー

2カラムで作ったカード型のブログカードプレビュー

サムネイル画像の表示設定は、AFFINGER管理での設定が優先されます。

関連記事 ブログカードの作り方について こちらの記事で詳しくご紹介しています。

ちなみに、公式サイトでは「ブログカード外部URL対応プラグイン」も提供されています。
興味のある方は、あわせて確認してみてください。

関連記事 ブログカード外部URL対応プラグインについて こちらの記事で詳しくご紹介しています。

以下は、「ブログカード外部URL対応プラグイン」を使用して表示したブログカードのサンプルです。

Pz-LinkCardの導入方法

この章では、Pz-LinkCardの導入方法をご紹介します。

Menu『WordPress管理画面 → プラグイン → プラグインを追加』をクリックします。

「プラグインを追加」の画面が表示されます。

プラグイン検索の窓に『Pz-LinkCard』と入力して検索します。

『Pz-LinkCard』を選択して以下を処理します。

• 有効化をクリックするとプラグイン画面に遷移します。

プラグイン画面で「Pz-LinkCard」を確認し、『自動更新を有効化』をクリックします。（任意）

以上でインストールは完了です。

Pz-LinkCardの基本設定

この章では、Pz-LinkCardの基本設定をご紹介します。

ここでは、AFFINGER7の内部リンク（埋め込み）で表示されるスタイルに近づけるための設定をご紹介します。

Pz-LinkCardは、初期設定のままだと以下のように表示されます。

以下は、埋め込みブロックで表示したブログカードの例です。上の画像と比較して、表示の違いを確認してみてください。

それでは、設定していきましょう。

まずは、「Pzカード設定」画面を開きます。

Menu『WordPress管理画面 → 設定 → [PZ]カード設定』をクリックします。

基本タブ

「Pzカード設定」画面で『基本』タブを開きます。

• 簡単書式設定で『なし（デフォルト）』または『ノーマル（はてなブログカード風）』を選択します。
• 『変更を保存』

または、

「Pzカード設定」画面で各タブの設定を変更したら、最後に必ず「変更を保存」をクリックして更新します。

配置タブ

「Pzカード設定」画面で『配置』タブを開きます。

デフォルトでは、余白・サムネイル・全体のサイズが、次のように設定されています。

• メインエリア幅と同じ値にすると自然な表示になります。

この記事のサンプルでは、赤破線部内の数値に変更しています。「参考にしてください」

• サイトの横幅やサムネイルの大きさは、ご自身のサイトデザインに合わせて調整してください。

表示タブ

「Pzカード設定」画面で『表示』タブを開きます。

ほぼデフォルトでOKです。
この記事のサンプルでは、一番上の「URLを表示する位置」を『なし』にしています。

文字タブ

「Pzカード設定」画面で『文字』タブを開きます。

この記事のサンプルでは、すべてデフォルト設定のまま使用しています。

外部リンクタブ

「Pzカード設定」画面で『外部リンク』タブを開きます。

この記事のサンプルでは、枠線の色と背景色を変更しています。

内部リンクタブ

「Pzカード設定」画面で『内部リンク』タブを開きます。

この記事のサンプルでは、枠線の色と背景色を変更しています。（※ 外部リンクと同色に変更）

要所となる基本設定は以上です。

Pz-LinkCardの使い方AFFINGER7で外部リンクをブログカード化する方法

• 作業は投稿（エディター）画面での作業になります。

「Pz-LinkCard」は、クラシックブロックから挿入します。

投稿（エディター）画面を準備

Menu『WordPress管理画面 → 投稿→ 投稿を追加』をクリックします。

投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）

クラシックブロックを挿入する箇所をクリックします。（Pz-LinkCardを挿入する箇所）

ブロック挿入ツールを切り替え

『+』をクリックします。

ブロックタブメニューから『クラシック』を選択

ブロック挿入ツールが「×」に切り替わり、ブロックタブのメニューが表示されます。

テキストから『クラシック』を選択して投稿（エディター）画面に挿入します。

『クラシック』をクリックします。

クラシックブロック挿入完了

投稿（エディター）画面に『クラシックブロック』が挿入されます。

挿入直後では、以下のように表示されます。

クラシックエディタのメニューから、『リンクカードを挿入』アイコンをクリックします。

ポップアップメニューが表示されたら、入力欄に『URL』を入力し、『挿入』をクリックします。

以下のように表示されれば完了です。

エディター画面では、リンク先のURLとコードが以下のように表示されます。

プレビューで確認すると、以下のようなカードスタイルで表示されます。

以上で、Pz-LinckCardを使ったブログカードが記事に挿入されました。

まとめ！AFFINGER7で外部リンクをブログカード化する方法｜Pz-LinkCardの設定手順

この記事では、AFFINGER7で外部リンクをブログカード化する方法として、Pz-LinkCardの導入から設定、使い方までを順番に解説しました。

Pz-LinkCardを使えば、外部URLでも視認性の高いブログカードを簡単に作成でき、リンクのクリック率向上や記事の見た目改善につながります。一方で、表示スタイルやカード型レイアウトには注意点もあるため、サイト幅やスマホ表示を意識した設定が重要です。

また、外部URL対応プラグインを使うことで、標準では対応していない外部リンクもブログカード化できる点も紹介しました。設定後は、必ずプレビューで表示崩れがないか確認するようにしましょう。

AFFINGER7で外部リンクを多く扱う場合は、Pz-LinkCardをうまく活用することで、読みやすく、伝わりやすい記事構成が実現できます。
今回の内容を参考に、自分のサイトに合った表示スタイルを見つけてみてください。