AFFINGER6で外部リンクをブログカード化する方法｜Pz-LinkCardの導入・設定・使い方ガイド

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

AFFINGER6では外部リンクを標準でブログカード化できません。
そこで本記事では、外部リンクもブログカード表示できるプラグイン Pz-LinkCard を使って、導入〜設定〜使い方まで丁寧に解説します。

それではご覧ください。

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

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

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

Pz-LinkCardとは？

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

Pz-LinkCardでできること

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

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

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

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

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

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

ブログカードの作り方について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

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

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

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

WordPressのカスタム投稿タイプとは？使い方と具体例を初心者向けに解説 | osaboo.site

WordPressのカスタム投稿タイプ（Custom Post Type）とは何かを初心者向けに解説。使うメリットや具体例、作成方法、注意点までわかりやすくまとめました。

osaboo.site

Pz-LinkCardの導入方法

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

Menu 『WordPress管理＞ダッシュボード＞プラグイン＞プラグインを追加』をクリックします。

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

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

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

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

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

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

Pz-LinkCardの基本設定

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

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

デフォルトでは、以下のように表示されます。

ここでは、Pz-LinkCardの基本設定を、以下の表示になるように調整していきます。

以下は、埋め込みブロックを使って表示した実際のブログカード例です。「上の画像と比べてみてください」

Flexible Table Blockの導入と使い方【WordPressプラグイン】#AFFINGER6

WordPressで表をカンタンに作れるプラグイン「Flexible Table Block」の導入手順と使い方を初心者さん向けにやさしく解説。AFFINGER6でも使えて便利です！

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

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

Menu 『WordPress管理＞ダッシュボード＞設定＞[PZ]カード設定』をクリックします。

基本タブ

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

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

または、

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

配置タブ

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

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

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

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

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

表示タブ

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

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

文字タブ

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

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

外部リンクタブ

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

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

内部リンクタブ

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

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

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

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

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

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

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

Menu 『WordPress管理＞ダッシュボード＞投稿＞投稿を追加』をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ！AFFINGER6で外部リンクをブログカード化

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

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

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

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

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／