SWELLリンクリストブロックの使い方｜フッターやサイドバーに配置するカテゴリー一覧の作成に便利！

「記事にリンクを設置したい…」

「リンクリストブロックの設定方法は？」

「リンクを横並びにできる？」

この記事では、そんな方に向けて、SWELLでリンクリストブロックの使い方を解説します。

リンクリストブロックとは…複数のリンクをリスト化して並べられるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• リンク設定ができる
• リンクリストブロックの使い方が分かる
• リンクの横並びやボタン化ができる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ブログ内の回遊率を上げることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

本記事に挿入されているリンクリストは、リンクを設定していないのでクリックしても飛びません。

SWELLリンクリストブロックでできること4選

SWELLのリンクリストブロックでは以下のようなことができます。

それぞれ詳しく解説します。

リストをボタン化できる

SWELLのリンクリストブロックでは、並べたリストをボタン化させることができます。

SWELLボタンブロックのように内部リンクだけではなく、外部リンクも設定できます。

マイクロコピーと合わせて使えば、以下のような訴求文付きのアフィリエイトボタンリンクの作成もできますよ。

_{＼訴求文！／}

• アフィリエイトリンク

リストを横並びにできる

SWELLのリンクリストブロックを使えば、リンクリストを横並びに表示できます。

たくさんのリンクを並べたいときに横並びに配置することで、下にスクロールする手間を省けたり、右側の空白部分をうまく利用することもできるので便利ですよ。

リストにアイコンを配置できる

SWELLのリンクリストブロックは、リスト横に4種類のアイコンを配置できます。

異なる矢印のアイコンを配置できるので、自分の好みに合わせて選ぶことができますよ。

リンクを一括生成できる

SWELLのリンクリストブロックでは、カテゴリーページとタグページのリンクを一括で生成することができます。

わざわざテキストを入力してリンクを貼り付ける作業をしなくてもいいので、時短につながりますよ。

SWELLリンクリストブロックの使い方とカスタム設定7つ+α

SWELLのリンクリストブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式サイト：リンクリストブロックの使い方

ちなみに、リンクリストブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

リンクリストブロックで設定可能な項目は7つあります。

それぞれ詳しく解説します。

スタイルを決める

SWELLでは、リンクリストのスタイルを以下の2種類から選べます。

通常、以下のようにリンクを設定した部分が青色になると思います。

リンク

ですので、デフォルトスタイルだとそれがリンクだと気づいてもらえない可能性もあるなと感じました。

ただ、カーソルをリンクの上に重ねると青色に変化するので、そのときがリンクだと気づいてもらえるきっかけになるでしょう。

もしリンクをたくさん並べる場合は、ボタンスタイルよりもデフォルトスタイルの方がスッキリするのでおすすめですよ。

横並びにするか選ぶ

SWELLでリンクリストを横並びにすることもできます。

横並びにする場合は、テキストをなるべく短くしましょう。

テキストが長ければ横並びにならない場合がありますよ。

ボーダーを付けるか選ぶ

SWELLのリンクリストブロックで、デフォルトスタイルのみボーダーを付けるかどうか選択できます。

ボーダーを付けるとリンク間に空白が生まれ見やすくなりますが、ボーダーを付けなければスッキリしますね。

背景色の塗りつぶしや角丸を設定する

SWELLのリンクリストブロックで、ボタンスタイルのみ背景色の塗りつぶしや角丸を設定できます。

塗りつぶした背景色は自由に変更できます。※後ほど解説。

角丸は0px~100pxの間で自由に変更できます。

ただ、100pxから20pxまでを1pxずつ変更してみましたが、変化が分かりづらかったです。(笑)

20pxから0pxまでを1pxずつ変更していくと、徐々に角ばった形に変化していくのが確認できるでしょう。

アイコン設定を行う

SWELLのリンクリストブロックでは、アイコンの設定を以下の3項目から行えます。

• アイコンのサイズ
• アイコンのスタイル
• アイコンの表示位置

アイコンのサイズを大きくするとテキストも大きくなります。

フォントサイズはデフォルトのまま(=1em)がいいかもしれないですね。

アイコンのスタイルは以下の5種類から選べます。

アイコン無しだとリンクだと気づいてもらえないので、アイコン有りの4種類から選んでください。

アイコンの位置は左右どちらか選べます。

テキストが短いとアイコンとの距離が遠くなるので、左側の位置がおすすめです。

ただ、テキストが長くてアイコンとの距離が短い場合は右側の位置でもいいですね。

カラー設定を行う

SWELLのリンクリストブロックでは、アイコンとボタンスタイルの色を設定できます。

サイトの統一感を出すために、メインカラーと同じ色にすることをおすすめですよ。

使用したい色がなかったり、好きな色を指定して使いたい場合は、カラーピッカーで調べたカラーコードを入力しましょう。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

_{＼クリックで開く／}

【便利機能】リンクの一括生成！

SWELLのリンクリストブロックには一括生成機能があり、カテゴリーページとタグページをリンクとタイトル名付きで呼び出すことができます。

一括生成機能の使い方は下記のとおりです。

【体験談】SWELLリンクリストブロックのおすすめな活用例2つを紹介

当ブログが使用しているSWELLのリンクリストブロックのおすすめな活用方法を2つ紹介します。

それぞれ詳しく解説します。

フッターやサイドバーに設置する

SWELLのリンクリストブロックをフッターやサイドバーなどのウィジェットに設置することができます。

記事を読んだ後に誘導したい記事をフッターや視認性の高いサイドバーに設置すればクリック率の向上が期待できますよ。

_{＼クリックで開く／}

フッターのカスタマイズ方法について詳しく知りたい場合は、下の記事も参考にしてください。

サイトマップを作成する

通常、SWELLではプラグインを導入しないとHTMLサイトマップを作ることができません。

HTMLサイトマップとは…サイト内にある全ての投稿・固定ページを一覧でまとめたページのこと

ただし、リンクリストブロックを使えば、プラグインを導入しなくてもサイトマップを作成することができます。

_{＼クリックで開く／}

作成したサイトマップは、グローバルナビ(ヘッダーメニュー)やフッターに設置しましょう。

【代替案】SWELLリンクリストブロック以外でリンクを並べる3つの方法

SWELLのリンクリストブロック以外でも、下記3つのコンテンツでリンクを並べることができます。

それぞれ詳しく解説します。

リストブロックでリンクを並べる

SWELLで入力したテキストリンクをリストブロックとして並べることができます。

以下は、リストブロックとリンクリストブロックでリンクを並べた場合の比較です。

一番の大きな違いは、リンクを貼ったテキストが青色になるかどうかです。

一般的に皆さん、リンクは青色だと認識しているでしょう。

リンクリストブロックだとテキストが黒のままで、それがリンクだと気づいてもらえない可能性があります。

世間の認識と合わせるためにも、それがリンクだと分かってもらうリストブロックを使うといいでしょう。

_{＼クリックで開く／}

投稿リストブロックでリンクを並べる

SWELLの投稿リストブロックを使うと、ページに内部リンクを並べることができます。

外部リンクは並べられません。

以下は、投稿リストブロックとリンクリストブロックでリンクを並べた場合の比較です。

投稿リストブロックでは、ページ公開日や更新日、著者名やカテゴリー名などの表示を細かく設定できるので、リンクリストブロックとの使い分けができそうですよ。

投稿リストブロックでリンクを並べる方法は、下の記事を参考にしてください。

関連記事ブロックでリンクを並べる

SWELLの関連記事ブロックを使っても、リンクを並べることができます。

以下は、関連記事ブロックとリンクリストブロックでリンクを並べた場合の比較です。

関連記事ブロックでは設定したリンクが青色に変わるので、リンクリストブロックよりもそれがリンクだと認識してもらいやすいですよ。

関連記事ブロックでリンクを並べる方法は、下の記事を参考にしてください。

SWELLリンクリストブロックまとめ

今回は、SWELLでリンクリストブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。