当ページのリンクには広告が含まれています。

AFFINGER6で外部リンクをブログカード化!Pz-LinkCardの導入・設定・使い方

AFFINGER6で外部リンクをブログカード化!Pz-LinkCardの導入・設定・使い方

【2024年3月15日更新】記事が読みやすくなるように、全体を調整しました。

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

AFFINGER6で外部リンクをブログカード化できるプラグイン Pz-LinkCardの導入・設定・使い方をご紹介します。

AFFINGER6の標準装備では一部を除いて外部リンクの埋め込みができません。

テキストリンクはできるけどカード化することができないんですね。

今回ご紹介する「Pz-LinkCard」を使えば…ほぼ標準の内部リンク

無料で!!簡単に外部リンクをブログカードかできるプラグインがこれ!
\\Pz-LinkCard//
内部・外部リンクの両方できるよ!^^/

osaboo
osaboo

ちなみに…公式サイトにて「ブログカード外部URL対応プラグイン」があります。
筆者的にはPz-LinkCard で賄えるかと…)

こんな方におすすめ!

  • AFFINGER6で外部リンクをブログカード化したい
  • ブログカードのスタイルは、リスト型でOK
  • ブログカード化を無料でやりたい
  • サイトをちょっとカッコよくしたい

Pz-LinkCardとAFFINGER6標準機能での表示の違い

Pz-LinkCard で作ったブログカードはこちら

(外部リンク)リスト型の表示が可能です。

Pz-LinkCard
このプラグインは、ブログカード形式のリンクを表示することができます。テキストのみのリンクにさようなら。

(外部リンク)カード型の表示はNG。(2カラム)

Pz-LinkCard
このプラグインは、ブログカード形式のリンクを表示することができます。テキストのみのリンクにさようなら。
Pz-LinkCard
このプラグインは、ブログカード形式のリンクを表示することができます。テキストのみのリンクにさようなら。

※「クラシック・カラム」ブロックどちらを使っても上記のようになってしまいます。注意

CSSとかで修正は効くけど…おすすめできない。

osaboo
osaboo

(内部リンク)リスト型

Ad Invalid Click Protector【アドセンス狩り対策プラグイン】の導入設定方法!
WordPressでGoogleアドセンス広告を貼れるようになったら、まず!アドセンス狩り対策をしましょう。アドセンス狩り対策のおすすめプラグイン『Ad Invalid Cli...

(内部リンク)カード型の表示はNG。(2カラム)

Ad Invalid Click Protector【アドセンス狩り対策プラグイン】の導入設定方法!
WordPressでGoogleアドセンス広告を貼れるようになったら、まず!アドセンス狩り対策をしましょう。アドセンス狩り対策のおすすめプラグイン『Ad Invalid Cli...
Ad Invalid Click Protector【アドセンス狩り対策プラグイン】の導入設定方法!
WordPressでGoogleアドセンス広告を貼れるようになったら、まず!アドセンス狩り対策をしましょう。アドセンス狩り対策のおすすめプラグイン『Ad Invalid Cli...

注意 Pz-LinkCardは、外部・内部リンクとも、1カラムでの使用のみ可能です。

AFFINGER6の標準機能で作ったブログカードはこちら(内部リンクのみ)

(クラシックブロックで作ったリスト型デザイン)1カラム

18869_wordpress-how-to-set-ad-invalid-click-protector-1
Ad Invalid Click Protector【アドセンス狩り対策プラグイン】の導入設定方法!

WordPressでGoogleアドセンス広告を貼れるようになったら、まず!アドセンス狩り対策をしましょう。アドセンス狩り対策のおすすめプラグイン『Ad Invalid Click Protector』の導入・設定方法を初心者目線で丁寧に解説。

続きを見る

(クラシックブロックを使った内部リンクのカード型デザイン)2カラム
「Pz-LinkCard」ではできません。

18869_wordpress-how-to-set-ad-invalid-click-protector-1
Ad Invalid Click Protector【アドセンス狩り対策プラグイン】の導入設定方法!

WordPressでGoogleアドセンス広告を貼れるようになったら、まず!アドセンス狩り対策をしましょう。アドセンス狩り対策のおすすめプラグイン『Ad Invalid Click Protector』の導入・設定方法を初心者目線で丁寧に解説。

AFFINGER6 ブログカードの作り方【徹底的に調べてみた!!】
【2024年版】AFFINGER6 ブログカードの作り方!「徹底的に調べてみた」リニューアル

AFFINGER6を使用したブログカードの作り方と表示の状態を細かく噛み砕いて紹介します。ブロック・クラシック両方のエディタに分けて画像付きで説明します。リスト型・カード型・スライドショー等また、スライドショーをスライドさせない方法も盛り込みました。

(記事一覧ブロックで作ったリスト型デザイン)1カラム

18869_wordpress-how-to-set-ad-invalid-click-protector-1
Ad Invalid Click Protector【アドセンス狩り対策プラグイン】の導入設定方法!

WordPressでGoogleアドセンス広告を貼れるようになったら、まず!アドセンス狩り対策をしましょう。アドセンス狩り対策のおすすめプラグイン『Ad Invalid Click Protector』の導入・設定方法を初心者目線で丁寧に解説。

※ AFFINGER6-EX専用のブロックです。 抜粋はAFFIBGER管理の設定で非表示にしています。

ブログカードについてもっと詳しく知りたい方は 「こちら!」をご覧ください。

微妙に違う内部リンクの表示が確認できたかな?

osaboo
osaboo

この記事でわかること!

  • Pz-LinkCardとは?
  • Pz-LinkCardの導入方法
  • Pz-LinkCardの設定方法
  • Pz-LinkCardの使い方
  • まとめ!

それではご覧ください!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

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

Pz-LinkCardとは?

WordPress:グレーロゴ

WordPressプラグイン
Pz-LinkCardとは?

Pz-LinkCardとは、リンクをブログカード形式で表示できるWordPressプラグインです。

内部リンク(自サイトのリンク)と外部リンク(外部サイトのリンク)の両方に対応しています。
専用コードでURLを指定することでブログカード形式で表示できます。

機能紹介

  • 自サイト・外部サイトを問わずURLの指定でブログ記事等のページをブログカード形式で表示できる
    (リスト型のみの対応)
  • リンク先の情報がキャッシュされる
    (データ取得時間が軽減されるので動作が重くならない)
  • ブログカード形式の表示オプションが豊富
    (表示スタイルのカスタマイズが容易 且つ、自由度が高い)
  • 日本語に100%対応している

Pz-LinkCardの導入方法

Wordpress-01-nega

WordPressプラグイン
Pz-LinkCardの導入方法

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

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

WordPress管理-ダッシュボード-プラグイン-新期追加
yajirusi-sita-80x40

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

手順は以下の通りです。

  1. プラグイン検索欄に『Pz』と入力して検索します。
    • Pz-LinkCardのインストール画面が表示されます。
  2. 『今すぐインストール』をクリックします。

❶と❷を処理します。

プラグインを追加:Pz-LinckCard
yajirusi-sita-80x40

インストールが完了すると以下の画面に表示が切り替わります。

『有効化』をクリックします。

プラグインを追加:Pz-LinckCard|有効化

有効化が完了すると以下のようにインストール済みプラグインの欄に Pz-LinkCard が追加されます。

Pz-LinkCard 有効状態

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

Pz-LinkCardの設定方法

Wordpress-01

WordPressプラグイン
Pz-LinkCardの設定方法

この章では、Pz-LinkCardの設定方法をご紹介します。
設定できる箇所が多いので個々のサイトに合った自由な設定ができると思います。

当サイトで重要視している「3つのタブ項目」の設定に絞ってご紹介します。参考

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

『WordPress管理>ダッシュボード>設定>Pz カード設定』をクリックします。

WordPress管理:設定|Pz カード設定

リンクカード設定の画面が表示されます。

リンクカード設定:基本タブ

基本タブを開くと以下の画面が表示されます。

かんたん書式設定:『ノーマル(はてなブログカード風)』を選択します。

タブの項目設定が終了したら『変更を保存』をクリックします。

リンクカード設定:基本タブ

※ 当サイトのでは、AFFINGER 6の標準機能で表示されるブログカードに近い表示を採用しています。

リンクカード設定:配置タブ

配置タブを開くと以下の画面が表示されます。

画面中央の赤枠部で4方向の余白と幅(表示幅全体)を設定します。幅はメインエリアの幅と同等が良いと思います。

タブの項目設定が終了したら『変更を保存』をクリックします。

リンクカード設定:配置タブ

※ 当サイトのでは、AFFINGER 6の標準機能で表示されるブログカードに近い表示を採用しています。

メインエリア幅?という方は…こちらをご覧ください。「サイト内の配置や寸法等がわかります」

AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる!ベストな設定値は?】
AFFINGER6でデフォルトのサイト幅はちょっと狭いと感じませんか?!AFFINGER6なら超簡単にサイト全体の幅やmainエリア(記事)の幅を変更できるんです。Googl...

※ このリンクは「Pz-LinkCard」で作成しています。

リンクカード設定:表示タブ

表示タブを開くと以下の画面が表示されます。

重要視しているポイント

  • 抜粋文を表示する:『ON』参考
  • マウスが上に乗った時:『浮かせる(薄色)』参考
  • サムネイル:『幅:300』『高さ158』参考
  • 続きを読むボタン:『シンプルなボタン』

レイアウト:『抜粋文・サムネイル・マウスが上に乗った時』を設定します。(重要視しているポイントを参照)

続きを読むボタン:『シンプルなボタン』を選択します。(重要視しているポイントを参照)

タブの項目設定が終了したら『変更を保存』をクリックします。

リンクカード設定:表示タブ

※ 当サイトのでは、AFFINGER 6の標準機能で表示されるブログカードに近い表示を採用しています。

Pz-LinkCardの設定は かなり細かくいろいろなことができます。この記事で、ご紹介した部分以外でも「文字色やリンク」の詳細設定は必須です。設定項目は多いですが設定自体は簡単なので最初に設定しておきましょう。

\あなたのサイトに合った格好いい設定にしてくださいね。/

Pz-LinkCardの使い方

エディター(記事編集)画面で左上の『ブロック挿入ツールを切り替え』をクリックすると以下の画面が表示されます。

▶︎ クリックすると『ブロック挿入ツールを切り替え』ボタンの位置が表示されます。
投稿画面:ブロック挿入ツールを切り替え

ブログカードを挿入する位置を指定して、ブロックタブメニューのテキストから『クラシック』を選択します。

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

ブロック挿入ツール:ブロックタブ|クラシック
yajirusi-sita-80x40

エディター(記事編集)画面に以下のようなクラシックエディターのメニューが表示されます。

『リンクカードを挿入』アイコンをクリックします。

クラシックブロック:リンクカードを挿入
yajirusi-sita-80x40

URLの入力枠と挿入ボタンが 表示された ピックアップ画面に切り替わります。

『リンク先のURL』を入力して『挿入』をクリックします。

クラシックブロック:リンクカードを挿入|URL挿入
yajirusi-sita-80x40

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

クラシックブロックでリンクカードを挿入中のエディター画面です。

クラシックブロック:リンクカードを挿入|URL挿入後|エディター画面

クラシックブロックでリンクカードを挿入後のエディター画面です。(URLが表示されます)

クラシックブロック:リンクカードを挿入|URL挿入後|エディター画面2

Pz-LinckCard挿入後のプレビューです。(URLがブログカードで表示されます)

Pz-LinckCard挿入|プレビュー(サンプル)

Pz-LinckCard の実際のリンクです。

osaboo.com
WordPressテーマ:SWELLの『初期設定・カスタマイズ・使い方』を主に紹介するブログサイト。Mac・iPhone等のお役立ち情報も配信!!

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

まとめ!AFFINGER6で外部リンクをブログカード化!Pz-LinkCardの導入・設定・使い方

WordPressプラグイン「Pz-LinckCard」の「導入・設定・使い方」をご紹介しました。AFFINGER6の外部リンクをブログカード化できる便利なプラグインです。有料のプラグインを購入する前に!是非、お試しください。^^/

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

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

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

-プラグイン_WordPress
-,