SWELLの「関連記事ブロック」使い方完全ガイド|内部リンク・外部リンクをブログカードで設置する方法

2283_related-articles-block

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

SWELLの「関連記事ブロック」の使い方を初心者さん向けに解説します。

Question

関連記事ブロック?…ブログカード?

  • SWELLブロック:関連記事

SWELL専用のブロックエディターです。
内部リンクと外部リンクを簡単にブログカードとしてとして記事に挿入できるブロックエディター機能です。

関連記事を適切に表示すると回遊率や滞在時間が伸び、SEOにも好影響を与えます。

SWELLの関連記事ブロックは使いやすくデザイン性も高いので、内部リンクの強化や外部紹介の見栄え向上に最適です。

この記事では基本の設置手順から、ブログカードのカスタマイズ、実務的な運用ポイントまで実例つきで解説します。

こんな方におすすめ
  • SWELLで関連記事ブロックの使い方を知りたい
  • 内部リンク・外部リンクをブログカードで見やすく表示したい
  • 記事同士を自然につなげてSEO効果や回遊率を高めたい
  • ブロックエディターの操作にまだ慣れていない初心者さん
この記事でわかること
  • SWELL関連記事ブロックの基本的な使い方
  • 内部リンクと外部リンクをカード化する方法
  • ブログカードのデザインや表示スタイルを変更する手順
  • 記事ごとの個別設定と、全体に適用できるグローバル設定の違い

それではご覧ください。

目次 "Contents"

関連記事ブロックとは?

関連記事ブロックは、投稿や固定ページ内に「関連記事」を一覧表示するためのブロックです。

SWELLではブログカード形式で表示でき、内部リンクや外部ページの紹介に便利です。

SWELLブロック:関連記事では以下のようなリンク表示ができます。

ブログカード:外部リンクはこんな感じです。(デフォルト)

  • 枠線は CSSで加工しています。

ブログカード:内部リンクはこんな感じです。(デフォルト)

  • 枠線は CSSで加工しています。

ブログカードのスタイル変更するとこんな感じです。(スリム)

ブログカードのスタイル変更するとこんな感じです。(テキスト)

SWELLブロック:関連記事とは…
「WordPressの埋め込みブロック」をSWELL専用に簡単に使いやすくした機能と考えると理解しやすい思います。
最大の特徴は、内部リンクと外部リンクどちらでも同じ手順でブログカード化ができることです。
また、内部リンクの検索に長けているので 作業がシンプルになり作業効率は向上します。
(内部リンクの検索については次の章で詳しくご紹介します)

「デフォルト・スリム・テキスト」の3種類のスタイルがワンタッチ変更でききます。

関連記事ブロックの基本的な使い方

ここでは、関連記事ブロックの基本的な使い方をご紹介します。

関連記事ブロックの挿入手順と記事挿入後にできるカスタマイズ(表示設定)の2つのセクションに分けてご紹介します。

関連記事ブロックの挿入手順

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

投稿(記事編集)画面を準備

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

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

関連記事を挿入する箇所をクリックします。

STEP

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

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

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

ブロックタブメニューから『関連記事』を選択

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

SWELLブロックから『関連記事』を選択して投稿画面に設置します。

『関連記事』をクリックします。

2283-1|エディター画面|関連記事
STEP

関連記事ブロック挿入完了

投稿(エディター)画面に『関連記事ブロック』が表示されます。

2283-2|エディター画面|関連記事ブロック|挿入直後

これで準備OKです。
続いて、「内部・外部リンク」それぞれをカードリンクかする手順を見ていきましょう。

内部リンクをブログカードで設置する方法

ここでは、内部リンクをブログカード化する手順を2通りご紹介します。

内部リンクをブログカードで設置する方法
  • 検索またはURLを入力
    • 投稿記事のタイトルの一部または全部『単語』を入力
  • 投稿またはタームのIDを直接入力
    • 投稿記事の『ID』を入力
2283-3|エディター画面|関連記事ブロック|メニュー詳細

❶ 検索またはURLを入力

自サイトの各ページを手軽に検索できます。検索欄に関連記事のタイトルに含まれるキーワードを入力すると、該当する投稿をすぐに見つけられます。投稿やタームの「ID」をわざわざ確認する必要はありません。

検索欄にキーワードを入力し、表示される候補(ドロップダウン)から該当する記事を選択しします。

2283-4a|エディター画面|関連記事ブロック|メニュー詳細

❷ 投稿またはタームのIDを直接入力

投稿やタームの「ID」を入力すれば、内部リンクをブログカードとしてすぐに作成できます。IDを把握しているときは、この方法が一番カンタンで効率的です。

投稿ID:投稿(記事)や固定ページに自動的に付けられる『ID』番号のことです。(半角数字)
タームID:カテゴリやタグのページに自動的に付けられる『ID』番号のことです。(半角数字)
※ ターム:条件

IDの確認方法(投稿IDの場合)参考

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

画面右側のID番号を控えます。(固定ページ・カテゴリーページ・タグページ等 同じ要領で確認できます。)

2283-5|WordPress管理|ダッシュボード|投稿|投稿ID

投稿またはタームのIDを直接入力してします。

2283-5a|エディター画面|関連記事ブロック|メニュー詳細

外部リンクをブログカードで設置する方法

ここでは、外部リンクをブログカード化する手順をご紹介します。

外部リンクをブログカードで設置する方法
  • 外部サイトのリンク先URLを入力
2283-7|エディター画面|関連記事ブロック|メニュー詳細

・検索またはURLを入力

外部サイトのリンク先URLを入力します。 ※ 検索機能は内部リンク専用なので 外部リンクには適応しません。

検索欄に外部サイトのURLを入力し、Enterキーを押します。

2283-8|エディター画面|関連記事ブロック|メニュー詳細
yajirusi-sita-80x40
2283-9a|エディター画面|関連記事ブロック|メニュー詳細

内部リンク・外部リンクの共通設定

ここでは、内部リンク・外部リンクの共通設定をご紹介します。

初期設定では、内部リンクは同じタブで開き、外部リンクは新しいタブで表示される仕様になっています。

ここでは、この動作を切り替える方法をご紹介します。

STEP

リンクを選択

ブログカードを選択し、ツールバーの『リンク』アイコンをクリックしてリンク詳細メニューを開きます。

2283-10|エディター画面|関連記事ブロック|メニュー詳細
STEP

リンクを編集

リンク詳細メニューで「リンクを編集」アイコンをクリックし、ドロップダウンメニューを開きます。

2283-11|エディター画面|関連記事ブロック|メニュー詳細
STEP

高度

「高度」メニューから、次の操作を行います。

  • 「新しいタブで開く」のチェックをONまたはOFFに切り替えます。
  • 「保存」をクリックして設定は完了です。
2283-12|エディター画面|関連記事ブロック|メニュー詳細

ブログカード表示のカスタマイズ(見た目調整)

ブログカードの見た目をカスタマイズできる設定箇所は2か所あります。

記事ごとの個別調整と、サイト全体に適用する基本(グローバル)設定の2種類があり、ここでは両方の操作方法を詳しく解説します。

ブログカード表示のカスタマイズ(見た目調整)
  • エディター画面で記事ごとに設定
  • SWELL設定 → エディタ設定で基本(グローバル)設定

❶ エディター画面で記事ごとに設定

この設定では、投稿や固定ページに挿入した関連記事(ブログカード)の見た目やデザインを変更できます。

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

2283-13|エディター画面|関連記事ブロック|設定|ブロックタブ

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

563-6a|エディター画面|設定

ブロックタブメニュー詳細設定項目

2283-14|エディター画面|関連記事ブロック|設定|ブロックタブ|詳細設定項目
関連記事
スタイル
  • デフォルト
  • スリム
  • テキスト
設定(デフォルトのみ)
  • 画像を非表示にする
    • ON / OFF
  • 抜粋文を非表示にする
    • ON / OFF
キャプション(デフォルトのみ)
  • 内部リンク(あわせて読みたい)を変更
  • 外部リンク(サイト名)を変更
  • 自動表示されるキャプションを任意に変更できます。
ページタイトル(上書き用)
  • 任意のテキスト
  • 自動表示されるタイトルを任意に変更できます。
上書き用画像
  • URLやメディアから選択
  • リンク先の画像を任意に変更できます。
2283-15|エディター画面|関連記事ブロック|設定|ブロックタブ|詳細設定項目
デバイス制御

表示するデバイス 『SP/PC』選択/切替

ブロック下の余白量

0〜6em

  • ドロップダウンメニューから選択できます。
高度な設定
追加 CSS クラス
  • 関連記事のスタイルを「スリム・テキスト」に設定すると、サブメニューの表示内容が切り替わります。
2283-16|エディター画面|関連記事ブロック|設定|ブロックタブ|詳細設定項目
スタイル
  • デフォルト
  • スリム
  • テキスト
設定(スリム・テキストのみ)
ページタイトル(上書き用)
  • 任意のテキスト
  • 自動表示されるタイトルを任意に変更できます。
上書き用画像
  • URLやメディアから選択
  • 「スリム・テキスト」では画像が表示されないため、ここで画像を設定しても確認できません。
アイコン設定
  • 2種類のアイコンから選択

❷ SWELL設定 → エディタ設定で基本(グローバル)設定

SWELL設定 → エディター設定での変更は、全ての関連記事ブロックに反映されます。

SWELL設定 → エディター設定では、デフォルトで表示される「タイプとキャプション」が設定できます。

内部リンク・外部リンクともに、3つのパターンから選択できます。さらに、内部リンクのキャプションは自由に変更可能です。

SWELL設定 → エディタ設定で基本(グローバル)設定
  • SWELL設定のエディター設定を開く
  • 『その他』のタブを選択
  • タイプ1〜3の好みのタイプを選択
  • キャプションを変更
STEP
SWELL設定のエディター設定を開く

Menu『WordPress管理>ダッシュボード>SWELL設定>エディター設定』をクリックします。

2283-17|WordPress管理|ダッシュボード|SWELL設定|エディター設定
STEP
『その他』のタブを選択

SWELL設定のエディター設定画面が表示されます。

  • 『その他』のタブを開きます。(以下の画面が表示されます)
  • 『タイプ1』をクリックすると「タイプ1〜3」を選択できるドロップダウンメニューが表示されます。
  • 『キャブション』は投稿(エディター)画面でブログカードごとに変更できます。
2283-18|SWELL設定|エディター設定
❷ 詳細
タイプ1〜3の好みのタイプを選択

『タイプ1』の表示イメージ

2283-19|SWELL設定|エディター設定|その他|ブログカード|タイプ1

『タイプ2』の表示イメージ

2283-20|SWELL設定|エディター設定|その他|ブログカード|タイプ2

『タイプ3』の表示イメージ

2283-21|SWELL設定|エディター設定|その他|ブログカード|タイプ3
❸ キャプションについて
キャプションを変更

キャブション』は投稿(エディター)画面でブログカードごとに変更できます。

関連記事ブロックのカスタマイズイメージ(表示スタイル)

関連記事ブロックのカスタマイズイメージ(表示スタイル)をまとめました。

以下はカスタマイズの参考イメージです。

デフォルト

画像を非表示にする

抜粋文を非表示にする

まとめSWELLの「関連記事ブロック」使い方完全ガイド|内部リンク・外部リンクをブログカードで設置する方法

SWELLの関連記事ブロックは、内部リンク・外部リンクを簡単にブログカード化できる便利な機能です。記事同士を自然につなげることでSEO対策にも効果的で、読者の回遊率アップにも役立ちます。ブログ初心者にもおすすめのブロックエディター機能です。この記事がお役に立てば嬉しいです。

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

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"