アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年ほど、100本以上の記事を書きながらSWELLの設定や記事の見せ方を試してきました。
その中で、投稿リストブロックは「記事を見やすく並べるだけでなく、読者に次の記事を読んでもらうためにも使える」と感じています。
SWELLで記事一覧を作りたいけれど、
「投稿リストブロックの設定項目が多くて、どこを触ればいいのかわからない……」
と感じていませんか？
投稿リストブロックを使えば、新着記事、人気記事、関連記事、カテゴリー別の記事一覧などをかんたんに表示できます。
ただし、なんとなく記事を並べるだけでは、読者の回遊率は上がりません。
大事なのは、「どの記事を見せるか」「どの記事へ誘導するか」を決めてから、投稿リストを配置することです。
投稿リストブロックは、記事一覧を見やすく並べるためだけの機能ではありません。
読者に次の記事を読んでもらい、レビュー記事や商品ページへ自然に進んでもらうための大事な導線です。
この記事では、SWELL投稿リストブロックの基本機能、表示設定、Pickupタブでの記事の絞り込み、タブブロックと組み合わせた記事一覧の作り方まで解説します。
記事一覧をきれいに整えながら、ブログ全体の回遊率も高めていきましょう。
SWELL投稿リストブロックとは？記事一覧を作れる便利な機能です
SWELLを始めたばかりの方に、とても便利な機能をご紹介します。
それが「投稿リストブロック」です。
ブログの記事一覧を見やすく表示できる機能なので、まずはその基本を見ていきましょう。
投稿リストブロックでできること
ブログを始めると「人気の記事を上に持ってきたい」「新しい記事を目立たせたい」と思うことがありますよね。
そんなときに活躍するのが投稿リストブロックです。
最大24個まで記事を表示でき、新着順や人気順、ランダムなど、好きな順序で記事を並べることができます。
タブをクリックしてみてください。
記事の公開日や更新日、著者の名前なども表示できるので、読者に分かりやすい記事一覧が作れます。
さらに、特定の記事だけを表示したり、表示したくない記事を隠したりすることもできますよ。
5つの標準レイアウトの特徴と使い分け
投稿リストブロックには、以下の５種類のデザインパターンが用意されています。
タブをクリックして違いを確認してみてください。
- 写真を大きく見せられる「カード型」
- すっきりと整理された「リスト型」
- 左右で記事が交互に並ぶ「リスト型（左右交互）」
- 写真とテキストのバランスが良い「サムネイル型」
- 文字だけのシンプルな「テキスト型」
例えば、写真がきれいな料理ブログならカード型が映えますし、情報をたくさん載せたい場合はリスト型が使いやすいでしょう。
スマートフォン（SP）での見やすさを重視するなら、テキスト型がおすすめです。
投稿リストブロックのメリット
投稿リストブロックの一番うれしいところは、難しいプログラミングの知識がなくても、クリックするだけで見やすい記事一覧が作れることです。
カテゴリーやタグで記事を絞り込んだり、表示する順番を変えたり、デザインを選んだりと、すべての設定が簡単な操作で行えます。
パソコン（PC）とスマートフォン（SP）で別々のデザインにできるのも便利ですよ。
「もっと読む」ボタンを付けたり、記事の説明文の長さを調整したりもできるので、読者が次の記事に進みやすくなります。
ブログ初心者の方でも、見やすい記事一覧を簡単に作れるのが投稿リストブロックの魅力です。
投稿リストブロックは「記事回遊の導線」として考えよう
投稿リストブロックは、記事一覧を見やすく並べるためだけの機能ではありません。
本当に大事なのは、読者に次に読んでほしい記事を見せることです。
たとえば、レビュー記事を読んでほしいなら、その前に悩みを解決する記事や比較記事を並べると自然です。
初心者向けの記事を読んでいる読者には、いきなり商品レビューを見せるより、基礎知識の記事や失敗しやすいポイントの記事を見せたほうが読まれやすくなります。
投稿リストを置く前に、次の3つを決めておきましょう。
- どんな読者に見せるのか。
- 次にどの記事を読んでほしいのか。
- 最後にどの記事や商品ページへ進んでほしいのか。
この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リンクの文言は、ただ「もっと見る」にするより、読者の次の行動がわかる言葉にしたほうがクリックされやすくなります。
たとえば、以下のように変えられます。
- SWELLの使い方をもっと見る。
- ブログ収益化の記事をもっと見る。
- レビュー記事をまとめて読む。
- 初心者向けの記事一覧を見る。
- おすすめ記事を続けて読む。
読者は、次に何が読めるのかわからないリンクをクリックしません。
投稿リストの下に置く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タブブロックを使いこなそう！タブ切り替え記事一覧を作る手順で詳しく解説しているので、参考にしてみてください。
タブブロックに投稿リストを挿入する
続いて、タブブロックの中に投稿リストを設置していきましょう。
①記事一覧を表示させたいタブの中の段落をクリックします。
②次に、画面左上の「+」をクリックしましょう。
左のSWELLブロックから「投稿リストブロック」を探しクリックします。
すると、タブの中に新着記事一覧が表示されます。
サイドバーで自分のサイトにあった投稿リストに変更しましょう。
今回は、3投稿、カード型、公開日・更新日を表示することとしました。
「人気記事一覧」のタブに人気記事一覧を挿入しましょう。
今度は、3投稿、リスト型、人気順、更新日を表示しました。
以上で、「タブブロック」と「投稿リストブロック」を使った紹介記事一覧が完成します。
まとめ：投稿リストは記事を並べる機能ではなく、読者を動かす導線です
今回は、SWELL投稿リストブロックの使い方を解説しました。
投稿リストブロックを使えば、新着記事、人気記事、関連記事、カテゴリー別の記事一覧などをかんたんに作れます。
レイアウトはカード型、リスト型、リスト型左右交互、サムネイル型、テキスト型から選べます。
表示する投稿数、記事の並び順、公開日や更新日の表示、抜粋文の文字数、MOREリンクなども細かく調整できます。
また、Pickupタブを使えば、投稿ID、投稿タイプ、カテゴリー、タグ、著者などで表示する記事を絞り込めます。
ここまで設定できれば、読者に見せたい記事一覧をかなり自由に作れるはずです。
ただし、投稿リストブロックは「きれいな記事一覧を作る機能」として使うだけではもったいないです。
大事なのは、読者に次にどの記事を読んでほしいかを決めることです。
- 新着記事を見せたいのか。
- 人気記事を見せたいのか。
- 関連記事を見せたいのか。
- レビュー記事へ進んでほしいのか。
この目的が決まると、投稿リストブロックの設定も自然に決まります。
投稿リストブロックを使って、読者が次の記事へ進みやすい記事一覧を作っていきましょう。
投稿リストを整えたら、ブログ全体の導線も見直しましょう
SWELLの投稿リストブロックを使えば、新着記事、人気記事、関連記事などを見やすく表示できます。
読者に次の記事を読んでもらいやすくなるので、回遊率を高めるうえでも便利な機能です。
ただ、記事一覧をきれいに並べただけで、収益が伸びるわけではありません。
大事なのは、「どの記事を見せるのか」「どの記事へ誘導するのか」「最終的にどの商品につなげるのか」を設計することです。
ブログを書いているのに収益につながらない。
レビュー記事を書いたのに、クリックも成約もあまり発生しない。
そんな場合は、記事数やデザインではなく、「読者が商品を買うまでの導線」が弱いのかもしれません。
そこで、ブログ収益化の導線を見直せる無料チェックシートを用意しました。
読者理解、記事設計、レビュー記事、CTA、リスト獲得、教育導線まで、40項目で確認できます。
投稿リストを整えたあとは、ブログ全体が「読者を次の行動へ進める流れ」になっているかを確認してみてください。
＼ 記事を書いているのに売れない原因を40項目でチェック ／
