【期間限定 1/7(水) まで】エックスサーバー最大30%OFFキャンペーン実施中!

【SWELL非公式マニュアル】関連記事ブロックの使い方

SWELLでは、関連記事へのリンクをブログカードとして表示するためのショートコードが用意されています。
このショートコードを簡単に利用できるように、ブロックエディター(Gutenberg)では専用ブロックの「関連記事ブロック」を用意しています。この記事では、その「関連記事ブロック」の使い方を紹介します。

記事のタイトルから検索して自動でショートコードを作成してくれる機能もあります。

ちなみに関連記事のブログカードとは、これのことです

目次

\ 初心者におすすめ /

以下の3つを利用すると
最短最速でブログ収益化ができます

【レンタルサーバー】

エックスサーバー

【WordPressテーマ】

SWELL

【SEOツール】

ラッコキーワード

上記のリンクを選択すると、各サービスの詳しい記事に移動します。

「関連記事ブロック」の使い方

SWELLブロック」パネルの中に「関連記事」と書かれたブロックがあります。

関連記事ブロック
SWELL公式サイト

このブロックを選択すると、以下のようなブロックが挿入されます。

SWELL公式サイト

左側に「投稿IDを直接入力するエリア」、右側には「タイトルから記事を検索できる入力エリア」があります。

 記事タイトルから検索する様子

関連記事の検索
SWELL公式サイト

「関連記事ブロック」の少し特殊な設定項目

「関連記事ブロック」を選択している間、エディターの右側に次のような設定パネルが表示されます。

関連記事ブロックの設定パネル
SWELL公式サイト:関連記事ブロックの設定パネル

この「関連記事設定」パネルから設定できる項目についても紹介します。

ブログカードの表示方法を選択する

ブログ設定パネルではまず下記の項目が選択できます。

  1. テキストリンクで表示するか
  2. 画像の表示非表示
  3. 抜粋分の表示非表示
テキストリンクで表示
画像を非表示
抜粋文を非表示

「あわせて読みたい」の文字を変更する

設定パネルの「キャプション」と書かれた入力エリアに任意の文字列を入力すると、「あわせて読みたい」と表示されている部分の内容を変更できます。

例えば、「参考にどうぞ」と入力して保存すると、以下のような表示になります。

キャプションを編集した時の表示
SWELL公式サイト:キャプションを編集した時の表示

リンクを別窓で展開する

リンク設定パネルで「新しいタブで開く」のスイッチをオンにすると、そのブログカードのリンクは別窓で表示されます。

ただし、この設定は内部リンクのみ有効です。次に紹介する外部サイトへのブログカードの場合、強制的に「別窓表示」がオンとなります。

外部サイトへのリンクをブログカード化する

エディター側に設置されている入力エリアは「投稿ID」と「投稿タイトルの検索」でしたが、これらは内部リンク先を指定・検索するためのものです。

当初は内部リンクにのみ対応していたブログカード化機能ですが、ver. 1.2.4から、外部サイトへのリンクにも対応できるようになりました。

そこで、「関連記事ブロック」でも、外部サイトのURLを指定することができるようになっています。

パネルにある「外部サイトのURL」と書かれた入力エリアに、URLを設定するだけです。

この項目が有効になっている場合、IDの指定などは無効になり、URLへのリンクが優先されます。

ver.2.4.1.1現在では、外部リンクはエディター側の「外部リンク」で設定できます。

ver. 2.1.0 からrel属性の設定項目を追加しました

ブログカードを表示できる「関連記事ブロック」にて、サイドバーにrel属性を指定できる設定項目が追加されました。

SWELL公式サイト

SWELL公式マニュアル:【SWELLブロック】関連記事ブロックで簡単にブログカード作成!

この記事を書いた「ブルー」です。
プログラマー×ブロガー
へなちょこシステムエンジニアが副業ブログで月収10万円を達成。エックスサーバー、SWELL、ラッコキーワードを使った稼げるブログを作る方法を解説します。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次