MENU
カテゴリー

【SWELLブロック】関連記事ブロックで簡単にブログカード作成!

記事上のウィジェットエリア

SWELLでは、関連記事へのリンクをブログカードとして表示するためのショートコードを用意しています。

このショートコードを簡単に利用できるように、ブロックエディター(Gutenberg)では専用ブロックの「関連記事ブロック」を用意しています。

このページでは、その「関連記事ブロック」の使い方を解説していきます。

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

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

目次
目次広告表示エリア

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

SWELLブロック」パネルの中に「関連記事」と書かれたブロックを用意していますので、こちらを使います。

関連記事ブロック

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

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

お好きな方で記事を指定してください。

URLをペーストするか入力して検索」と書かれてしまっていますが、URLはペーストしても記事は検索できませんのでご注意ください。

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

関連記事の検索

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

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

関連記事ブロックの設定パネル
関連記事ブロックの設定パネル

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

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

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

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

テキストリンクで表示

画像を非表示

抜粋文を非表示

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

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

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

キャプションを編集した時の表示
キャプションを編集した時の表示

外部リンクの場合「キャプション」はカード内の右下に表示されます。

入力がない場合は右下にサイト名が表示されます。

リンクを別窓で展開する

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

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

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

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

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

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

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

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

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

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

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

記事下のウィジェットエリア

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

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