AFFINGER6で記事内に別記事を表示する方法｜初心者向けに３つの方法を解説！

AFFINGER6（アフィンガー6）では、記事の途中や最後に、別の記事を分かりやすく表示 することができます。

この機能を活用すると、

• 読者に次に読んでほしい記事を自然に案内できる
• 回遊率・滞在時間を大きく伸ばせる
• 関連記事よりも「意図した記事」を確実に見せられる

といったメリットがあります。

しかし初心者の方の中には、

• 記事内に別記事をどうやって表示するの？
• ブログカードみたいに表示したい
• どの方法を使えばいいのか分からない

と悩んでいる方も多いのではないでしょうか。

この記事では、AFFINGER6初心者でも迷わずできるように、記事内に別記事を表示する3つの方法と、その使い分けまでを丁寧に解説します。

記事内に別記事を表示する目的とは？

記事内に別記事を表示する一番の目的は、読者を迷わせず、次の行動へ自然に誘導すること です。

たとえば、

• 手順解説のあとに「次に読むべき記事」を案内する
• 初心者向け記事から、詳しい解説記事へ誘導する
• 収益記事・重要記事をピンポイントで見せる

といった使い方ができます。

AFFINGER6で記事内に別記事を表示する3つの方法

AFFINGER6では、主に次の 3つの方法 が使えます。

1. URLを貼り付けて表示（埋め込み）
2. 「AFFINGER：記事一覧」ブロックを使う
3. ショートコードを使って表示する

それぞれ順番に解説します。

方法①：URLを貼り付けてブログカード風に表示する【一番簡単】

もっとも簡単なのが、記事URLをそのまま貼り付ける方法 です。

設定手順

1. 記事編集画面で「＋」をクリック
2. 「WordPress埋め込み」ブロック を選択
3. 表示したい記事のURLを貼り付ける
4. 自動的にブログカード風に変換される

記事の入力画面ではデフォルトの少し大きめな表示になっていますが、自動でブログカードデザインに変換されます。

記事入力画面での実際表示

埋め込みにラベルを付けることができる

キャプションを編集するとラベルとして表示させることができます。

実際には下のようにラベルが表示できます。

ラベルの背景色やテキスト色を変更する方法

ラベルの背景色やテキスト色を変更することも可能です。

「外観」→「カスタマイズ」→「オプション（その他）」→「ブログカード / ラベル」で変更可能です。

枠線	枠線の色を変更可能
枠線を太くする	枠線を太くすることが可能
ラベル背景色	背景色を変更可能
ラベルテキスト色	ラベルのテキスト色を変更可能
ラベルデザイン	ラベルデザインを３パターンに変更可能

ラベルの色などを変更したら「公開」をクリックして保存するのを忘れないようにしてください。

ラベルの設定方法についての詳細はこちらの記事をご覧になってください。

関連記事：

埋め込みのメリット・デメリット

【メリット】

• 操作がとにかく簡単
• ブログカード風で分かりやすい

【デメリット】

• 表示デザインの細かい調整はできない
• 複数記事の一覧表示には向かない

方法②：「AFFINGER：記事一覧」ブロックを使う【おすすめ】

AFFINGER6の標準機能として用意されているのが、「AFFINGER：記事一覧」ブロック です。

設定手順

1. 記事編集画面で「＋」をクリック
2. AFFINGERブロック → 記事一覧 を選択
3. 表示したい記事IDを入力
4. 表示形式を選択

記事IDを入力し、表示形式を選択すればOK。

記事IDをカンマで区切って入力することで複数の記事を表示させることができます。

記事IDの確認方法

記事IDは記事一覧から確認することができます。

表示形式の種類

表示形式は３タイプを利用できます。（EX版限定を含め）

①　ランキング	表示記事に番号を付けることができます。
②　カード化	記事をカード化して表示することができます。（※EX版限定）
③　スライドショー	記事をスライドショー表示させることができます。（※EX版限定）

記事IDをカンマで区切って入力することで複数の記事を表示させることができます。

①　ランキングタブをONにするとこんな感じです。

②　カード化を有効化するとこんな感じです。

カード化はAFFINGER６ EX版限定の機能になります。

③　スライドショーを有効にするとこんな感じです。

スライドショーもAFFINGER６EX版限定の機能です。

記事一覧ブロックのメリット・デメリット

【メリット】

• 表示する記事を自由に指定できる
• 複数記事をまとめて表示できる
• AFFINGER6との相性が良い

【デメリット】

• 記事IDの指定が必要

方法③：ショートコードで表示する

AFFINGER6では、ショートコード を使って記事内に別記事を表示することもできます。

埋め込みや記事一覧ブロックでの表示の方が簡単なので、正直使いません。

念のため手順を解説しておきます。

設定手順

1. 記事編集画面で「＋」をクリック
2. 「クラシック」ブロック を選択
3. タグ→「記事一覧/カード」→「記事一覧」を選択
4. ショートコードに記事IDを入力

まず、クラシックブロックを選択してタグをクリックします。

「記事一覧/カード」→「記事一覧」をクリックします。

記事一覧のショートコードが表示されます。

表示させたい記事IDを入力すればOKです。

st-postgroup id="記事ID,記事ID,記事ID”	表示させたい記事IDをカンマで区切って入力
rank="yes"	ランキングを表示させたいとき”yes"を入力

実際の表示は「AFFINGER:記事一覧」と同じになります。

ショートコードのメリット・デメリット

【メリット】

• クラシックエディタに慣れている方向け

【デメリット】

• 初心者には解りにくい

記事内に別記事を表示するおすすめ位置

読者の回遊率や滞在率をアップさせる為のポイントです。

• 手順解説の直後
• 記事のまとめ前
• 記事の最後（読了後）

のような位置に関連記事を表示させることが効果的です。

まとめ｜記事内に別記事を表示して回遊率を上げよう

• AFFINGER6なら記事内に別記事を簡単に表示できる
• 初心者は「URL埋め込み」か「記事一覧ブロック」がおすすめ
• 意図した導線を作れるのが最大のメリット

記事内誘導をうまく使えば、回遊率・滞在時間・収益性 を大きく向上させることができます。

まずは、一番読んでほしい記事を1つ表示する ところから始めてみてください。

AFFINGER6に興味のある方は公式サイトをチェックしてみてください。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。