SWELL投稿リストブロックの使い方｜記事一覧の作り方と導線設計まで解説

SWELLで記事一覧を作りたいけれど、

「投稿リストブロックの設定項目が多くて、どこを触ればいいのかわからない……」

と感じていませんか？

投稿リストブロックを使えば、新着記事、人気記事、関連記事、カテゴリー別の記事一覧などをかんたんに表示できます。

ただし、なんとなく記事を並べるだけでは、読者の回遊率は上がりません。

大事なのは、「どの記事を見せるか」「どの記事へ誘導するか」を決めてから、投稿リストを配置することです。

投稿リストブロックは、記事一覧を見やすく並べるためだけの機能ではありません。

読者に次の記事を読んでもらい、レビュー記事や商品ページへ自然に進んでもらうための大事な導線です。

この記事では、SWELL投稿リストブロックの基本機能、表示設定、Pickupタブでの記事の絞り込み、タブブロックと組み合わせた記事一覧の作り方まで解説します。

記事一覧をきれいに整えながら、ブログ全体の回遊率も高めていきましょう。

SWELL投稿リストブロックとは？記事一覧を作れる便利な機能です

SWELLを始めたばかりの方に、とても便利な機能をご紹介します。

それが「投稿リストブロック」です。

ブログの記事一覧を見やすく表示できる機能なので、まずはその基本を見ていきましょう。

投稿リストブロックでできること

ブログを始めると「人気の記事を上に持ってきたい」「新しい記事を目立たせたい」と思うことがありますよね。

そんなときに活躍するのが投稿リストブロックです。

最大24個まで記事を表示でき、新着順や人気順、ランダムなど、好きな順序で記事を並べることができます。

タブをクリックしてみてください。

記事の公開日や更新日、著者の名前なども表示できるので、読者に分かりやすい記事一覧が作れます。

さらに、特定の記事だけを表示したり、表示したくない記事を隠したりすることもできますよ。

5つの標準レイアウトの特徴と使い分け

投稿リストブロックには、以下の５種類のデザインパターンが用意されています。

タブをクリックして違いを確認してみてください。

投稿リストブロックのメリット

投稿リストブロックの一番うれしいところは、難しいプログラミングの知識がなくても、クリックするだけで見やすい記事一覧が作れることです。

カテゴリーやタグで記事を絞り込んだり、表示する順番を変えたり、デザインを選んだりと、すべての設定が簡単な操作で行えます。

パソコン（PC）とスマートフォン（SP）で別々のデザインにできるのも便利ですよ。

「もっと読む」ボタンを付けたり、記事の説明文の長さを調整したりもできるので、読者が次の記事に進みやすくなります。

ブログ初心者の方でも、見やすい記事一覧を簡単に作れるのが投稿リストブロックの魅力です。

投稿リストブロックは「記事回遊の導線」として考えよう

投稿リストブロックは、記事一覧を見やすく並べるためだけの機能ではありません。

本当に大事なのは、読者に次に読んでほしい記事を見せることです。

たとえば、レビュー記事を読んでほしいなら、その前に悩みを解決する記事や比較記事を並べると自然です。

初心者向けの記事を読んでいる読者には、いきなり商品レビューを見せるより、基礎知識の記事や失敗しやすいポイントの記事を見せたほうが読まれやすくなります。

この3つが決まっていると、投稿リストブロックはただの記事一覧ではなく、読者を次の記事へ案内する導線になります。

逆に、なんとなく新着記事や人気記事だけを並べても、読者は次の行動に進みにくいです。

記事を増やす前に、記事同士の流れを整えていきましょう。

SWELL投稿リストブロックの表示設定

これから投稿リストブロックの表示設定（Settingタブ）を、順番に解説していきます。

初めて使う方でも迷わないよう、一つずつ丁寧に説明しますので、画面を見ながら進めていきましょう。

表示する投稿数を設定する

投稿リストブロックでは、表示する記事の数を1から24まで自由に設定できます。

デフォルトでは3記事が表示されますが、用途に応じて簡単に変更可能です。

例えば、サイドバーなら3〜5記事程度、トップページなら6〜12記事程度がおすすめです。

記事数を多くしすぎると、ページの読み込みが遅くなる場合があるので、必要最小限の数に抑えるのがコツです。

レイアウトを選択する

レイアウトは、カード型、リスト型、リスト型（左右交互）、サムネイル型、テキスト型の5種類から選べます。

タブをクリックしてみてください

目的や好みに合わせて、切り替えてみましょう。

投稿の表示順序を設定する

記事の並び順は、新着順、更新日順、人気順、ランダムの4種類から選択できます。

それぞれ、次のような場合に使うといいですよ！

サイトの目的に合わせて使い分けてみましょう。

公開日・更新日・著者名・PV数を表示する

記事一覧には、公開日、更新日、著者名、PV数など、記事に関する情報を表示できます。

デフォルトでは公開日のみが表示されますが、チェックボックスをオンにすることで、他の情報も追加できます。

更新日を表示すると記事の鮮度がわかりやすくなります。

また、著者を表示すれば複数人でブログを運営している場合に便利です。

PV数を表示すれば人気記事が一目でわかります。

サムネイル型レイアウトを選んでいる場合は、タイトルの表示/非表示も設定できますよ。

カテゴリーの表示位置を設定する

カテゴリー表示は「表示しない」「サムネイル画像の上」「日付の横」の3つの位置から選べます。

デフォルトは「サムネイル画像の上」で、カテゴリーが目立つ配置になっています。

「日付の横」にすると、すっきりとした印象になるので、デザインを重視する方におすすめ！

「表示しない」を選ぶと、最もシンプルな表示になります。

ブログのデザインや、カテゴリーをどの程度強調したいかによって、適切な位置を選んでみましょう。

タイトルのHTMLタグを設定する

タイトルには「h2」「h3」「h4」「div」のいずれかのHTMLタグを設定できます。

例えば、記事一覧の上に「新着記事」という見出しを「h2」で作った場合、記事タイトルは「h3」にするのがおすすめです。

見出しの階層を正しく設定することで、検索エンジンにもサイトの構造が伝わりやすくなります。

迷ったら「h3」を選んでおけば、多くの場合問題ありません。

PC・スマホのカラム数を設定する

パソコン（PC）とスマートフォン（SP）で、それぞれ何列で記事を表示するかを設定できます。

パソコン（PC）では1列、2列、3列から選べます。3列だと多くの記事を一度に表示できますが、1列にすると記事の情報をじっくり読んでもらえます。

スマートフォン（SP）では1列か2列を選べます。

画面が小さいので、基本は1列表示がおすすめですが、写真を見せることが重要なブログなら2列も検討してみましょう。

抜粋文の文字数を設定する

記事の説明文（抜粋文）の長さを0、40、80、120、160文字から選べます。

デフォルトは0文字で、説明文は表示されません。

記事の内容を少し紹介したい場合は、40〜80文字程度がちょうどよいでしょう。

スマートフォン（SP）では画面が小さいので、パソコン（PC）より短めに設定するのがコツです。

文字数を増やすと情報は増えますが、その分表示も縦に長くなるので、バランスを考えて設定しましょう。

MOREリンクを設定する

記事一覧の下部に「もっと見る」などのリンクボタンを追加できる機能です。

ボタンのテキストは自由に変更でき、リンク先のURLも設定できます。

たとえば「記事をもっと読む」というボタンを作って、ブログのアーカイブページにリンクさせると、読者が他の記事も見やすくなります。

カテゴリーページへのリンクを設置して、特定のテーマの記事をまとめて見てもらうのもおすすめです。

MOREリンクは、ただ「もっと見る」と表示するだけではもったいないです。

読者に次に読んでほしい記事や、確認してほしいページへ進んでもらうための導線として考えると、投稿リストブロックの使い方が変わります。

MOREリンクの文言は、ただ「もっと見る」にするより、読者の次の行動がわかる言葉にしたほうがクリックされやすくなります。

たとえば、以下のように変えられます。

読者は、次に何が読めるのかわからないリンクをクリックしません。

投稿リストの下に置くMOREリンクは、「読者をどこへ進めたいのか」を言葉にする場所です。

投稿リストやMOREリンクを整えても、ブログ全体の記事の流れが弱いと、読者はなかなか次の行動に進みません。

記事数を増やすべきか、今ある記事の流れを直すべきか迷う方は、以下の記事も参考にしてください。

SWELL投稿リストブロックの表示条件設定

Pickupタブでは、どの記事を表示するかを細かく設定できます。

記事のIDやカテゴリー、投稿者など、様々な条件で記事を絞り込む方法を紹介します。

投稿IDで表示記事を絞り込む

投稿IDを使うと、特定の記事だけを表示したり、表示しないようにしたりできます。

投稿IDは記事の編集画面のURLの中に表示される番号のことです。

投稿IDは投稿一覧のページの「ID」で確認できます。

例えば、おすすめの記事２つだけを表示したい場合は、それぞれの記事のIDをカンマ（，）で区切って「投稿IDを直接指定」欄に入力します。

逆に、古い記事を表示したくない場合は「除外する投稿ID」に入力すれば非表示にできます。

複数の記事を指定する時も、投稿IDをカンマで区切るだけでOKです。

投稿タイプで表示記事を絞り込む

「投稿」と「固定ページ」のどちらの記事を表示するか選べます。

普段書くブログ記事は「投稿」として扱われ、「プロフィール」や「お問い合わせ」などのページは「固定ページ」になります。

例えば、「プロフィール」や「お問い合わせ」などのページをまとめて表示したい時は「固定ページ」を選びます。

ブログ記事の一覧を作るなら、そのまま「投稿」を選んでおけば大丈夫です。

基本的な使い方はとても簡単なので、気軽に試してみてください。

カテゴリー・タグで表示記事を絞り込む

カテゴリーやタグを使って、表示する記事を絞り込むことができます。

例えば「カテゴリー1」カテゴリーの記事だけを表示したり、「タグA」というタグが付いた記事だけを集めたりできます。

さらに、「カテゴリー1」カテゴリーの中でも「タグA」のタグが付いた記事だけを表示するといった、複雑な条件設定も可能です。

「IN（該当する）」を選ぶと条件に合う記事を、「NOT IN（該当しない）」を選ぶと条件に合わない記事を表示できます。

著者で表示記事を絞り込む

複数の人でブログを運営している場合、著者ごとに記事を表示できます。

「著者で絞り込む」から表示したい著者を選ぶだけなので、設定はとても簡単です。

チームでブログを運営している方は、ぜひ活用してみてください。

タブで切り替えできる記事一覧リストの作り方

冒頭でご紹介した以下の記事紹介一覧は、「タブブロック」と「投稿リストブロック」の2つのブロックで作成されています。

タブブロックを設置する

まずはタブブロックを設置していきましょう。

タブブロックの使い方については、SWELLタブブロックを使いこなそう！タブ切り替え記事一覧を作る手順で詳しく解説しているので、参考にしてみてください。

タブブロックに投稿リストを挿入する

続いて、タブブロックの中に投稿リストを設置していきましょう。

まとめ：投稿リストは記事を並べる機能ではなく、読者を動かす導線です

今回は、SWELL投稿リストブロックの使い方を解説しました。

投稿リストブロックを使えば、新着記事、人気記事、関連記事、カテゴリー別の記事一覧などをかんたんに作れます。

レイアウトはカード型、リスト型、リスト型左右交互、サムネイル型、テキスト型から選べます。

表示する投稿数、記事の並び順、公開日や更新日の表示、抜粋文の文字数、MOREリンクなども細かく調整できます。

また、Pickupタブを使えば、投稿ID、投稿タイプ、カテゴリー、タグ、著者などで表示する記事を絞り込めます。

ここまで設定できれば、読者に見せたい記事一覧をかなり自由に作れるはずです。

ただし、投稿リストブロックは「きれいな記事一覧を作る機能」として使うだけではもったいないです。

この目的が決まると、投稿リストブロックの設定も自然に決まります。

投稿リストブロックを使って、読者が次の記事へ進みやすい記事一覧を作っていきましょう。

---

投稿リストを整えたら、ブログ全体の導線も見直しましょう

SWELLの投稿リストブロックを使えば、新着記事、人気記事、関連記事などを見やすく表示できます。

読者に次の記事を読んでもらいやすくなるので、回遊率を高めるうえでも便利な機能です。

ただ、記事一覧をきれいに並べただけで、収益が伸びるわけではありません。

大事なのは、「どの記事を見せるのか」「どの記事へ誘導するのか」「最終的にどの商品につなげるのか」を設計することです。

ブログを書いているのに収益につながらない。

レビュー記事を書いたのに、クリックも成約もあまり発生しない。

そんな場合は、記事数やデザインではなく、「読者が商品を買うまでの導線」が弱いのかもしれません。

そこで、ブログ収益化の導線を見直せる無料チェックシートを用意しました。

読者理解、記事設計、レビュー記事、CTA、リスト獲得、教育導線まで、40項目で確認できます。

投稿リストを整えたあとは、ブログ全体が「読者を次の行動へ進める流れ」になっているかを確認してみてください。

＼ 記事を書いているのに売れない原因を40項目でチェック ／