SWELL投稿リストブロックの使い方｜カスタマイズで記事の並び順やレイアウト変更もかんたんに設定できる！

「好きな記事を好きな順番で並べたリストを作りたい…」

「投稿リストブロックの設定や活用方法は？」

「投稿リストにカテゴリータグを表示させるには？」

この記事では、そんな方に向けて、SWELLで投稿リストブロックの使い方とカスタマイズ方法を解説します。

投稿リストブロックとは…指定した記事を好きな順番で一覧表示できるSWELL専用カスタムブロック

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

• 自分好みにカスタマイズした投稿リストを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ユーザーに読んでほしい記事のクリック数を増やすことができました。

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

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

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

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

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

5種類のレイアウトにカスタマイズできる

SWELLの投稿リストブロックでは、レイアウトを以下の5種類にカスタマイズできます。

サムネイル画像の有無や大小、タイトルの表示位置などの違いがあり、自分の好みに合わせて自由に選べます。

カテゴリータグ表示を含む8項目でカスタマイズできる

SWELLの投稿リストブロックでは、以下の8項目でカスタマイズできます。

カスタマイズ項目によってはテキストと一緒にアイコンも設置してくれるので、分かりやすくおしゃれですね。

記事を新着・人気順で表示できる

SWELLの投稿リストブロックでは、以下のとおり表示する記事の順番を自由にカスタマイズできます。

また、表示させたい順番に記事の投稿IDを入力することで、おすすめ順に並べることもできますよ。※後ほど解説。

表示する記事やカテゴリー・タグページを自由に選べる

SWELLの投稿リストブロックでは、投稿IDを入力することで表示する記事を指定したり、任意のカテゴリーやタグページに属する記事だけを表示させることもできます。

先ほど紹介した「投稿の表示順序」の設定と組み合わせれば、カテゴリー・タグごとの新着記事や人気記事、おすすめ記事を作成することもできますよ。

SWELL投稿リストブロックの使い方

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

公式サイト：【SWELLブロック】投稿リストブロックの使い方

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

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

投稿リストブロックのカスタマイズは、以下の2ヶ所で行います。

それぞれ詳しく紹介していきます。

SWELL投稿リストブロックのカスタマイズ方法【Settings編】

SWELLの投稿リストブロックの「Settings」で設定可能な項目は10つあります。※「Pickup」編はこちら 

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

表示する投稿数を決める

SWELLの投稿リストブロックでは、表示する記事数を1~24ページまで選べます。

また、「先頭固定記事を追加する」をオンにすることで、先頭固定表示に設定した記事を投稿リストの始めに表示させることができます。※Pickup設定で投稿IDを直接指定した場合のみ

このとき、設定した投稿数+1ページで記事数が表示されます。例：投稿数3で「先頭固定記事を追加する」をオンの場合、記事数が4ページで表示される。

記事を先頭固定表示に設定する方法は、以下の2ヶ所から行えますよ。

レイアウトを選択する

SWELLでは、投稿リストのレイアウトを以下の5種類から選べます。

レイアウトそれぞれの特徴は以下のとおりです。

レイアウトの種類	特徴
カード型	記事タイトルとサムネイル画像を表示できるリスト
リスト型	左側にサムネイル画像、右側に記事タイトルが並んでいるリスト
リスト型(左右交互)	記事タイトルとサムネイル画像が左右交互に縦一列で並んでいるリスト
サムネイル型	記事の横幅いっぱいに広がるサムネイル画像だけのリスト
テキスト型	記事タイトルだけのシンプルなリスト

私はよくカード型の投稿リストを使用していますが、テキスト型のシンプルさやリスト型(左右交互)のおしゃれさも良いですね。

投稿の表示順序を決める

SWELLの投稿リストブロックでは、投稿の表示順序を以下の4種類から選べ、それぞれ降順・昇順の指定もできます。

例えば、人気順・降順に設定して、自サイト内でPV数の多い順に記事を表示させたり、

新着順・昇順に設定し、投稿記事数が多くなってきて下に埋もれている古い記事を表示させることもできますよ。

各種表示設定を行う

SWELLの投稿リストブロックで、以下5つの表示設定も行えます。

これら5つの表示設定を投稿リストのレイアウトごとで行うと以下のようになります。

私の場合…

著者名は、ユーザーに覚えてもらいたいので必ず表示させています。

公開日と更新日は、新しい日付であれば表示させてもいいと思いますが、日付が古くなるとユーザーに古い情報だと思われてしまう可能性があるので気をつけましょう。

PV数の表示はなくても良いと思いますが、お好みでどうぞ。

カテゴリータグの表示位置を決める

SWELLの投稿リストブロックでは、カテゴリータグの表示有無や表示位置を設定できます。

※上の画像はレイアウト「カード型」の場合です。

カテゴリー表示位置を「サムネイル画像の上」にしたときに設置されるカテゴリータグがおしゃれなので、おすすめですよ。

タイトルのHTMLタグを選ぶ

SWELLの投稿リストブロックで、記事タイトルのHTMLタグを設定することができます。

タイトルのHTMLタグとは…その記事タイトルの構造がどういう要素なのかを検索エンジンに指示する印のこと

設定できる項目は以下の4つです。

タイトルのHTMLタグをh2~h4に設定すると、その記事タイトルがH2~H4見出しであると検索エンジンに指示できますが、目次にタイトルが反映されることはありません。

タイトルのHTMLタグについてよく分からない人は、とりあえず「h2」or「div」を選びましょう。

投稿の表示列数を決める

SWELLの投稿リストブロックは、デバイス別で投稿のカラム数を以下のように設定できます。

投稿リストのレイアウトが「カード型」「サムネイル型」のみ有効です。

投稿リストのレイアウト「カード型」を例に、デバイス別で投稿の表示列数を以下に示しました。

スマホはPCと比べて画面が小さいので、デバイス別で表示列数を設定できるのは非常にありがたい。

また、工夫次第では投稿リストを4列表示にしたり、レイアウト「リスト型」「リスト型(左右交互)」「テキスト型」でも投稿リストを横並びにしたりできますよ。※後ほど解説します。

メタディスクリプションの文字数を指定する

SWELLの投稿リストブロックでは、記事のメタディスクリプションの文字数を0~160文字の40文字間隔で設定でき、デバイス別で指定することも可能です。

メタディスクリプションとは…記事の内容を簡潔にまとめた文章のこと。投稿リストの記事タイトル下に表示される。

投稿リストのレイアウトが「カード型」「リスト型」「リスト型(左右交互)」のみ有効です。

表示されるメタディスクリプションは、記事始めのテキストが抜粋されます。

表示させるメタディスクリプションを自分で設定したい場合は、プラグイン「SEO SIMPLE PACK」を導入すれば設定できます。

SEO SIMPLE PACKの説明とプラグインの導入方法については、以下の記事にまとめてますのでご覧ください。

SEO SIMPLE PACKの導入・有効化を終えたら、記事編集ページの最下部にある「SEO SIMPLE PACK 設定」内の「このページのディスクリプション」にテキストを入力すると設定した内容が表示されますよ。

MOREリンクを設定する

SWELLの投稿リストの下にMOREリンクを設定できます。

表示テキストとURLを自由に設定できるので、例えば投稿と関連性のあるカテゴリーページやタグページへのリンクを設定したり、LPや収益用記事へのリンクを設定するといいでしょう。

ちなみに、後ほど紹介する「投稿リストブロックのカスタマイズ方法【Pickup編】」で表示する記事を投稿IDで絞り込まなければ、MOREリンク未設定でも自動でカテゴリーページが設定されます。

最後の投稿を非表示にするかどうか選ぶ

SWELLで、投稿リスト最後の記事を非表示にするかどうかをデバイスごとに設定できます。

例えば、表示する投稿数を4記事にした場合、最後の投稿を非表示にすると1記事分マイナスされ、3記事で表示されるということです。

正直、私はこの設定を使うことはないかな～と思ってましたが、先頭固定記事を追加する際に必要だと感じました。

なぜなら、表示する投稿数を3記事にしても先頭固定記事を追加すると1記事分プラスされ、4記事になってしまうからです。※Pickup設定で投稿IDを直接指定した場合のみ

ただ、最後の投稿を非表示にすれば1記事分マイナスされ、3記事に戻すことができますよ。

SWELL投稿リストブロックのカスタマイズ方法【Pickup編】

SWELLの投稿リストブロックの「Pickup」で設定可能な項目は4つあります。※「Settings」編はこちら 

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

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

SWELLの投稿リストブロックでは、投稿IDを入力することで任意の記事を表示させるかどうか指定できます。

表示させたい順に投稿IDを入力することで、順番通りに記事を並べることができますよ。

複数の投稿IDを入力する際は、「,（半角）」で区切ってください。

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

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

「投稿IDで絞り込む」で設定した場合、表示されません。

SWELLの投稿リストブロックで、表示する投稿タイプを以下の3つから選べます。

• すべて
• 投稿
• 固定

とくに設定する必要はなさそうです。

タクソノミーの条件設定を行う

「投稿IDで絞り込む」で設定した場合、表示されません。

SWELLの投稿リストブロックでは、以下の4項目でタクソノミーの条件設定を細かく行えます。

タクソノミーとは…カテゴリーやタグといった分類のこと

タームとは…タクソノミーの中に作られた項目のこと

難しい言葉が並んでたり、設定が少し複雑なので、当ブログを例にCocoonカテゴリーにある記事のみを表示させる設定方法を2つ紹介します。

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

「投稿IDで絞り込む」で設定した場合、表示されません。

SWELLの投稿リストブロックで、表示する記事を著者名で絞り込むことができます。

こちらも作成したユーザー名が1つのみの場合、使う機会はありません。

SWELL投稿リストブロックでおすすめな5つの活用例

SWELLの投稿リストブロックの使い方とカスタマイズ方法が理解できたら、ここで投稿リストブロックのおすすめな活用方法を5つ紹介します。

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

投稿リストを4列表示にする

SWELLの投稿リストブロックでは、PCでは最大3列、スマホでは最大2列までしか表示できません。

ただ、リッチカラムブロックと併せて使えば、以下のように投稿リストを4列表示にすることができます。

サムネイル画像や文字サイズが小さくなり過ぎないよう、PCでは最大4列表示、スマホでは最大2列表示がおすすめですよ。

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

投稿リストを横並びにする

SWELLでは、投稿リストのレイアウトが「カード型」「サムネイル型」でしか横並びにできません。

「カード型」「サムネイル型」で横並びにする方法はこちら 

ただ、リッチカラムブロックを使えば「リスト型」「リスト型(左右交互)」「テキスト型」でも横並びにすることができます。

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

新着記事と人気記事を2列表示にする

SWELLの投稿リストブロックを用いて、以下のような新着記事と人気記事を2列表示したリストを作ってみましょう。

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

テキスト型とカード型を組み合わせて設置する

SWELLで、以下のようなテキスト型とカード型の投稿リストを組み合わせて設置してみましょう。

カード型の投稿リストを設置した段落の下に、テキスト型の投稿リストを設置すれば完成です。

サイトマップを作成する

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

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

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

投稿リストブロックでサイトマップを作成する場合、表示できる投稿数は最大24までです。

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

SWELL投稿リストブロック以外でも投稿リストが作れる！

SWELLでは投稿リストブロック以外でも投稿リストを作れるブロックが2つあります。

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

関連記事ブロックで投稿リストを作成する

SWELLの関連記事ブロックに表示したい記事リンクを1つずつ入力することで、テキスト型とリスト型の投稿リストが作れます。

ここで投稿リストブロックと関連記事ブロックの違いを以下にまとめました。

	投稿リストブロック	関連記事ブロック
記事タイトルの変更	できない	できる
サムネイル画像の変更	できない	できる
メタディスクリプションの文字数	最大160文字	最大87文字
各種設定項目	公開日・著者名・カテゴリー名の表示可	キャプション(=ラベル)の設定可

関連記事ブロックではキャプション(=ラベル)のテキスト入力や記事タイトルの上書きができるので、投稿リストブロックとの使い分けができそうですよ。

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

関連記事ブロックの使い方をより詳しく知りたい場合は、下の記事を参考にしてください。

リンクリストブロックで投稿リストを作成する

SWELLのリンクリストブロックに記事タイトルを入力し、その上に記事リンクを貼ることで、テキスト型の投稿リストが作れます。

ここで投稿リストブロックとリンクリストブロックの違いを以下にまとめました。

	投稿リストブロック	リンクリストブロック
記事タイトルの変更	できない	できる
表示できる記事数	最大24記事	無制限
各種設定項目	公開日・著者名・カテゴリー名の表示可	アイコンの設定可

リンクリストブロックでは表示できる記事数が無制限、かつ記事タイトルを自由に設定できるので、投稿リストブロックとの使い分けができそうですよ。

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

SWELL投稿リストブロックまとめ

今回は、SWELLで投稿リストブロックの使い方とカスタマイズ方法を紹介しました。

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

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