その他(Othor)

AFFINGER6対応|ブログカード外部URL対応プラグインの購入・導入・使い方を解説

5572_blogcard-external-url

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

AFFINGER6を使用している方向けに、公式サイトで有料提供されている「ブログカード外部URL対応プラグイン」について、購入方法から導入手順、使い方までをわかりやすく解説します。

Question
Question

「有料」→「ブログカード外部URL対応プラグイン
AFFINNGER6で外部リンクをブログカード化できる!

AFFINGER6を使っていると、「外部リンクもブログカードで表示できたらいいのに」と感じることはありませんか。
標準機能では内部リンクのブログカードには対応していますが、外部URLをカード化するには追加の対応が必要です。

この記事では、AFFINGER6公式サイトで有料提供されている「ブログカード外部URL対応プラグイン」について、購入方法から導入手順、基本的な使い方までを初心者の方にもわかりやすく解説します。

Pz-LinkCardなどの無料プラグインとの違いや、公式プラグインならではのメリットもあわせて紹介するので、「どの方法を選べばいいか迷っている」という方にも参考になる内容です。

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

AFFINGER6では外部リンクを標準機能でブログカード化できません。本記事では、Pz-LinkCardを使って外部リンクをカード表示する方法を、導入・設定・使い方まで初心者向けに解説します。

こんな方におすすめ!

  • AFFINGER6で外部リンクをブログカード表示したい
  • Pz-LinkCard以外の方法を検討している
  • 表示崩れや設定トラブルをできるだけ避けたい
  • 公式提供のプラグインを安心して使いたい
  • ブログの回遊率や見た目を改善したい

この記事でわかること!

  • ブログカード外部URL対応プラグインの特徴とできること
  • AFFINGER6公式プラグインを使うメリット
  • プラグインの購入からインストールまでの手順
  • AFFINGER6での基本的な使い方と表示の仕組み
  • 利用前に知っておきたい注意点やよくある疑問

それではご覧ください。

ブログカード外部URL対応プラグインとは?

ブログカード外部URL対応プラグインとは、AFFINGER6で外部サイトのURLをブログカード形式で表示できるようにする公式プラグインです。

AFFINGER6には、投稿同士をカード型で表示できる便利なブログカード機能がありますが、標準状態では内部リンクのみ対応となっており、外部URLを同じデザインでカード化することはできません。

このプラグインを導入することで、外部サイトのURLもAFFINGER6のブログカードデザインに合わせて表示できるようになり、記事の見た目や統一感を保ったまま外部リンクを設置できます。

また、AFFINGER6公式が提供している有料プラグインのため、

  • テーマとの相性を気にせず使える
  • 表示崩れや不具合が起きにくい
  • 将来的なテーマアップデートにも対応しやすい

といった点も大きな特徴です。

外部リンクを多く使うレビュー記事や参考リンクの紹介記事では、リンクの視認性やクリック率を高めたい人にとって有効な拡張機能といえるでしょう。

このプラグインでできること・特徴

ブログカード外部URL対応プラグインを導入すると、AFFINGER6で外部URLをブログカード形式で表示できるようになります。
単にリンクをテキストで貼る場合と比べて、視認性が高く、読者にリンク先の内容を直感的に伝えられるのが大きな特徴です。

外部リンクをブログカード化できる

このプラグインの最大の特徴は、外部サイトのURLをそのまま貼るだけでブログカードとして表示できる点です。
内部リンクと同じカードデザインで表示されるため、記事全体のデザインに統一感が生まれます。

AFFINGER6のデザインと自然に馴染む

公式プラグインのため、AFFINGER6のブログカードデザインと完全に統一されます。
テーマ側のカスタマイズや追加CSSを使わなくても、違和感のない見た目で外部リンクを設置できます。

表示崩れやトラブルが起きにくい

無料の外部リンク用プラグインでは、テーマアップデート後に表示が崩れたり、ブロックエディタとの相性問題が出ることもあります。
その点、公式プラグインはAFFINGER6専用に作られているため、長期的に安心して使えるのもメリットです。

設定がシンプルで初心者でも使いやすい

複雑な初期設定は不要で、導入後すぐに使い始められます。
「外部URLをカード化したい」という目的だけに集中できる、シンプルな仕様になっています。


1425_blogcard-classic-settings-n
AFFINGER6のブログカード 設定・作り方を徹底解説!クラシックエディター編

AFFINGER6のブログカードをクラシックエディターで設定する方法を徹底解説!リスト型・カード型・スライドショーの表示方法や、ショートコードを使った設置手順をわかりやすく説明。ブログのデザインを自由にカスタマイズしましょう!

1226_blogcard-settings-n
AFFINGER6のブログカード 設定・作り方を徹底解説!ブロックエディター編

AFFINGER6のブログカードの作り方を詳しく解説!ブロックエディターを使った、リスト型・カード型・スライドショーの設定方法や、スライドしないカスタマイズ方法もご紹介。ブログのデザインを自由に調整しましょう!

ブログカード外部URL対応プラグインの購入方法

ブログカード外部URL対応プラグインは、AFFINGER6公式サイトでのみ有料販売されています。
WordPress公式ディレクトリや外部マーケットでは配布されていないため、必ず公式サイトから購入しましょう。

購入前に確認しておくポイント

購入手続きを進める前に、以下を確認しておきましょう。

  • AFFINGER6を利用していること
  • プラグインを導入するサイトがAFFINGER6適用済みであること
  • ダウンロードファイル(ZIP形式)を扱える環境であること
  • 本プラグインはAFFINGER6専用のため、他テーマでは利用できません。

公式サイトからの購入手順

公式サイトからの購入の流れをご紹介します。

手順は次の通りです。

それでは順番に見ていきましょう。

AFFINGER6公式サイトにアクセスします。

「STINGER STORE」ページ上部のメニューから 「プラグイン」 をクリックします。をクリックします。

5572-1|STINGER STORE|トップページ

ブログカード外部URL対応プラグイン」の販売ページを開きます。

プラグインのドロップダウンメニューから『外部URLプログカード』をクリックします。

5572-2|STINGER STORE|トップページ|プラグイン

商品内容を確認し、購入手続きを行います。

「ブログカード外部URL対応プラグイン」の販売ページが表示されたら、ページを下にスクロールしながら内容をひと通り確認しましょう。

5572-3|STINGER STORE|ブログカード外部URL対応プラグイン

キャンペーンなどで、少しお得になっている場合があるのでチェックしておきましょう。

5572-4|STINGER STORE|ブログカード外部URL対応プラグイン

内容をひと通り確認したら、『今すぐ手に入れる』 をクリックします。

5572-5|STINGER STORE|ブログカード外部URL対応プラグイン

「ショッピングカート」画面が表示されたら、内容を確認して、『注文画面へ進む』をクリックします。

5572-6|STINGER STORE|ブログカード外部URL対応プラグイン|ショッピングカード

「購入手段選択」画面が表示されたら、「ログインして購入する」側にAFFINGER6購入時の会員情報(メールアドレス・パスワード)を入力し、「ログイン」 をクリックします。

5572-7|STINGER STORE|ブログカード外部URL対応プラグイン|購入手段選択

「支払い方法選択」画面が表示されたら、希望する支払い方法を選択し、「次へ」 をクリックします。

5572-8|STINGER STORE|ブログカード外部URL対応プラグイン|支払方法選択

補足

  • 「支払い方法」
    • クレジットカードまたはPayPay(ペイパル)を選択します。会員登録時の履歴が保存されている場合は、そのまま進むことも可能です。
  • 「確認画面」・「注文完了」
    • 画面の案内に従って決済を進めてください。詳細な説明は省略します。

決済完了後、プラグインのダウンロードリンクを取得する

「STINGER STORE」ページを下にスクロールし、以下の画面が表示される位置まで移動したら 「ご購入履歴」 をクリックします。

5572-9b|STINGER STORE|トップページ|下部

購入履歴画面が表示されたら、「全てのご注文」 の一覧が表示される位置まで下にスクロールします。

5572-10|STINGER STORE|購入履歴

「全てのご注文」一覧から 「af_card_url ブログカード外部URL対応プラグイン」 を選択し、「ダウンロード」 をクリックして任意のデバイスに保存します。

5572-11|STINGER STORE|購入履歴

購入後は、プラグインのZIPファイルをダウンロードできるようになります。

ダウンロードファイルの扱いについて

ダウンロードしたファイル「st_card_url_file.zip」は、一度だけ解凍します。

解凍すると「st_card_url_file」フォルダーが作成され、その中に「st-card-ex.zip」と「必ずお読みください.txt」が入っています。

 このうち、WordPressにアップロードするのは「st-card-ex.zip」のみです。

ダウンロード回数や期間に制限があるため、ファイルは必ず保存しておきましょう。

AFFINGER6への導入手順

購入後にダウンロードした「ブログカード外部URL対応プラグイン」は、WordPress管理画面から通常のプラグインと同じ手順でインストールできます。

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

5424-1|WordPress管理|ダッシュボード|プラグイン|プラグインを追加

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

『プラグインをアップロード』をクリックします。

3824-16|WordPress管理|ダッシュボード|プラグイン|プラグインを追加|プラグインのアップロード

『ファイルを選択』をクリックします。

3824-17|WordPress管理|ダッシュボード|プラグイン|プラグインを追加|プラグインのアップロード|ファイルを選択

デバイスから『st-card-ex.zip』を選択します。(PC側の作業)

『今すぐインストール』をクリックします。

5572-12a|WordPress管理|ダッシュボード|プラグイン|プラグインを追加|プラグインのアップロード|ファイルを選択|今すぐインストール

『プラグインを有効化』をクリックします。

5572-12-1|WordPress管理|ダッシュボード|プラグイン|プラグインを追加|プラグインのアップロード|ファイルを選択|今すぐインストール|プラグインを有効化

Menu 『WordPress管理>ダッシュボード>プラグイン>インストール済みプラグイン』をクリックします。

  • 自動的に自動的にプラグイン画面のプラグイン一覧に遷移します。

「ブログカード外部URL対応プラグイン2」が表示・有効化されていれば完了です。

5572-13|WordPress管理|ダッシュボード|プラグイン|インストール済みプラグイン|ブログカード外部URL対応プラグイン2

特別な初期設定は必要なく、有効化後すぐに使用できます。

ブログカード外部URL対応プラグインの使い方

ブログカード外部URL対応プラグインの使い方はとてもシンプルで、外部URLを貼り付けるだけです。

特別なショートコードや複雑な設定は必要ありません。

ブログカード外部URL対応プラグインの使い方

  • AFFINGER:URLカードブロックの挿入手順
  • AFFINGER:URLカードブロックの設定
  • AFFINGER:URLカードブロックはプレビューで確認する
  • 表示が反映されない場合の確認ポイント

それでは順番に見ていきましょう。

AFFINGER:URLカードブロックの挿入手順

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

この章では、AFFINGER:URLカードブロックの挿入手順をご紹介します。

投稿(エディター)画面を準備

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

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

AFFINGER:URLカードブロックを挿入する箇所をクリックします。

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

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

1126-14a|エディター画面|ブロック挿入ツールを切り替え

ブロックタブ メニューから『AFFINGER:URL カード』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『AFFINGER:URL カード』をクリックして投稿(エディター)画面に挿入します。

5572-14|エディター画面|AFFINGER:URL カード|ブロック

投稿(エディター)画面に以下の「AFFINGER:URL カード」作成画面が表示されます。

5572-15|エディター画面|AFFINGER:URL カード|ブロック|挿入直後

URLの入力を含む各種設定は、すべて画面右側の設定メニューから行います。具体的な設定方法については、次の章で詳しく解説します。

AFFINGER:URLカードブロックの設定

AFFINGER:URLカードブロックの「設定」メニューの詳細設定項目をご紹介します。

メニューの場所は、投稿(エディター)画面の右側に表示される『設定>ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

1126-15a|エディター画面|設定

「ブロック」タブメニューの詳細設定項目が、以下のように表示されます。

5572-16a|エディター画面|AFFINGER:URL カード|設定|ブロックタブ|設定項目詳細

AFFINGER:URLカード

全般

  • URL
    • リンク先URLを入力
  • タイトル書き換え
    • タイトルの上書きが可能
  • 続きを見る
    • テキストを入力すると、その内容がボタンに表示
    • 未入力の場合は、デフォルトでサイトURLが表示
  • サムネイル画像 URL
    • アイキャッチ画像などの任意の画像をURL指定で表示
  • 新しいページで開く
    • ON(デフォルト)
  • nofollow
    • ON(デフォルト)
  • ラベル
    • テキストを入力すると、その内容がラベルに表示
    • ラベルテキスト
    • ラベル背景
  • それぞれをカラーパレットから選択

高度な設定

  • 追加 CSS クラス

AFFINGER:URLカードブロックはプレビューで確認する

投稿(エディター)画面では画像や抜粋の確認はできないので、実際の表示は、必ず プレビュー画面 で確認しましょう。

設定内容と実際のプレビュー表示例

「URL」を設定した場合のプレビュー例

5572-17|AFFINGER:URLカードブロック|「URL」を設定した場合のプレビュー例
  • リンク先のURLページ全体が、ブログカードのサムネイル画像として表示されます。

「URL・続きを見る・サムネイル画像 URL」を設定した場合のプレビュー例

5572-18|AFFINGER:URLカードブロック|「URL・続きを見る・サムネイル画像 URL」を設定した場合のプレビュー例
  • サイトURLは「続きを見る」ボタンに置き換えて表示されます。

「URL・サムネイル画像 URL・ラベル」を設定した場合のプレビュー例

5572-19|AFFINGER:URLカードブロック|「URL・サムネイル画像 URL・ラベル」を設定した場合のプレビュー例
  • 「ラベル」のグローバル設定は、WordPressのカスタマイザーから行います。
    カスタマイザー:オプション(その他)>ブログカード / ラベル

表示が反映されない場合の確認ポイント

URLを貼り付けてもブログカードにならない場合は、次の点を確認してください。

  • URLの前後に余分な文字やスペースが入っていないか
  • 段落ブロックを使用しているか
  • プラグインが有効化されているか

また、キャッシュ系プラグインを使用している場合は、キャッシュの削除後に再確認すると改善することがあります。

ブログカード外部URL対応プラグインとPz-LinkCardの違い・注意点

AFFINGER6で外部リンクをブログカード表示する方法としては、公式の「ブログカード外部URL対応プラグイン」と、無料プラグインの Pz-LinkCard が代表的です。

ここでは、それぞれの違いと、利用する際の注意点を整理します。

機能・特性の違い

ブログカード外部URL対応プラグインは、AFFINGER6専用の公式プラグインです。
外部URLをAFFINGER6標準のブログカードデザインで表示できるため、記事全体のデザインに自然に馴染みます。
設定項目も少なく、導入後すぐに使える点が特徴です。

一方、Pz-LinkCard はテーマに依存しない無料プラグインで、外部リンクをカード形式で表示できるほか、細かなカスタマイズにも対応しています。
その反面、設定項目が多く、テーマによってはデザイン調整が必要になります。

安定性・相性の違い

公式プラグインはAFFINGER6向けに開発されているため、テーマアップデート後も表示が崩れにくく、相性面での不安が少ないのがメリットです。

Pz-LinkCardは多くのテーマで使える汎用プラグインですが、AFFINGER6のデザインと完全に一致させるには、CSS調整が必要になる場合があります。

料金面の違い

  • ブログカード外部URL対応プラグイン:有料(AFFINGER6公式)3480円(税込)
  • Pz-LinkCard:無料

コストを抑えたい場合はPz-LinkCardが選択肢になりますが、「設定や表示トラブルをできるだけ避けたい」「長期運用を前提にしたい」場合は、公式プラグインのほうが向いています。

利用時の注意点

どちらの方法を使う場合でも、併用は避けるのが基本です。
複数のブログカード系プラグインを同時に有効化すると、表示崩れや意図しない挙動が起こる可能性があります。

また、リンク先のサイトがOGP情報を正しく設定していない場合、サムネイル画像やタイトルが正しく取得できないことがありますが、これはプラグイン側の不具合ではありません。

どちらを選ぶべきか

  • 無料で試したい・細かくカスタマイズしたい → Pz-LinkCard
  • AFFINGER6で安定して使いたい・設定をシンプルにしたい → 公式プラグイン

目的に合わせて選ぶことが大切です。

まとめAFFINGER6対応|ブログカード外部URL対応プラグインの購入・導入・使い方を解説

ブログカード外部URL対応プラグインを使えば、AFFINGER6でも外部リンクをブログカード形式で表示できるようになります。
テキストリンクに比べて視認性が高く、記事全体のデザインに統一感を持たせられるのが大きなメリットです。

このプラグインはAFFINGER6公式が提供している有料プラグインのため、表示崩れや相性問題が起きにくく、長期的に安心して使える点も魅力といえるでしょう。

購入から導入、使い方までの手順もシンプルなので、「外部リンクもブログカードで表示したい」「余計な設定やトラブルは避けたい」という方にとって、有力な選択肢のひとつです。

AFFINGER6でブログの見た目や回遊率を改善したい場合は、導入を検討してみてください。

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

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

\初心者でも安心 コスパ最強のWordPressテーマ/

AFFINGER6を見てみる

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

\効果測定に必要なプラグインと機能が詰まった特別セット/

ACTION PACK3を見てみる


-その他(Othor)
-