この記事では、SWELLのサイト型トップページによく使われている「タブで切り替えできる記事一覧リスト」の作り方を、初心者さん向けにわかりやすく解説します。
こんな感じの表示、よく見かけませんか?
こちらは、「タブブロック」と「投稿リスト」の2つのブロックを組み合わせて作られています。
一見難しそうに見えますが、作り方がわかれば意外と簡単にできますよ。

このふたつのブロックの使いかたを詳しく解説します!
この記事を読めばすぐにあなたのブログでも実践できますよ。
この記事の内容は2022年12月時点の情報です。
[SWELLバージョン: 2.7.2.1]
最新情報についてはSWELL公式サイトをご確認ください。
SWELLタブブロックの表示パターン
まずは、タブの見た目の違いから見ていきましょう。
SWELLのタブブロックは3パターンのスタイルがあります。
タブのイメージがしやすいようにひとつずつ紹介していくので、実際にタブをクリックして動きを確認してみてくださいね。
ノーマルなタブ

こちらは基本となるノーマルなタブブロックです。
色は黒のみで、シンプルな見た目ですね!
ふきだしタブ

ふきだしタブ1
続いてこちらが人気のふきだしタブ。SWELLらしい可愛いデザインで、使っている方も多いですよね!
タブの色はサイト全体のメインカラーが適用されます。
下線タブ

最後はこちらの下線タブ。シンプルかつおしゃれで見やすいですね!
こちらも色はサイト全体のメインカラーが適用されます。
タブブロックの使いかた|SWELL
タブの表示パターンが確認できたところで、ここからはタブブロックの使いかたを4つのステップで解説していきます。


初期設定ではタブが2つなので、タブを増やしたい時は【+】ボタンで増やしていきます。
タブをダブルクリックすると、タブ名が編集できます。

冒頭で紹介した3つの表示パターンから好きなスタイルを選択します。

最後にタブ自体のサイズを設定します。
デフォルトでは【テキストに合わせる】になっていますが、タブごとに文字数が異なるとサイズがバラバラで見た目が悪くなってしまいます。
【端まで並べる(均等幅で)】か【固定幅】だと綺麗に揃えられるのでおすすめです。
タブの文字数によっても変わるのでバランスを見て設定してください。

PCではどれも綺麗に表示されますが、スマホで見ると列が不自然に2段になっていたり見た目が整っていないことがあります。
スマホでの見え方の確認をお忘れなく!
投稿リストの基本の作りかた|SWELL
続いては、タブブロックの下に表示する投稿リストの作りかたを解説します。
設定が少しややこしいところもあるので、まずは基本的なステップから解説していきます!
基本の作り方
表示させたいタブをクリックし、投稿リストブロックを挿入していきます。


投稿リストをクリックするだけで、自動で新着記事一覧が表示されます。
このあとは細かい設定で自分のサイトに合った投稿リストに変えていきましょう。

投稿リストの表示には、以下の2つの設定が必要です。
- 記事の表示スタイルを決める【Settings】
- どの記事を表示させるか決める【Pickup】
Settingsで決めること
記事一覧の表示の仕方の設定
・レイアウト
・記事を表示する順序
・表示する投稿数
・「もっと見る」のリンク先URL指定など
Pickupで決めること
どの記事を表示させるのか
・1記事ごとに投稿IDで指定
・カテゴリーごとに表示
・タグごとに表示 など
【Setting】の表示レイアウトは感覚でお好みのものを選んでください。
【Pickup】の「どの記事を表示させるのか」については、パターンごとにやり方が変わってくるので詳しくは次のステップで解説します。
投稿リストの表示別に4パターンの設定方法を解説|SWELL
ここからは、投稿リストの表示パターン別に、以下の4つの設定方法を詳しく解説していきます。
①の新着記事の表示は少し説明が長いので、②以降から見たい方は各番号のタイトルをクリックでジャンプできます。
この先は、前述の基本の作り方のSTEP3からの続きと思ってください。
①ブログ内の全ての記事を新着順に表示させる方法
「もっと見る」のリンク先URLページを先に作るとスムーズ!

新着順の投稿リストの下に、「もっと見る」というボタンリンクを設定します。
このボタンの表示自体は前述の投稿リストの設定【settings】から簡単にできます。
ただ問題は、このリンク先URLのページをどこから持ってくるのか?というところが初めてだとちょっと引っかかるかもしれません。

初心者さんでもわかりやすく初歩からの解説をしていくので、ちょっと長くなりますが手順どおりにやってみてくださいね。


このリンク先となるページは、固定ページから作成します。
なので一旦投稿リストの編集画面からは離れて、ダッシュボードから【固定ページ】→【新規追加】まで進んでください。
(編集中ページの下書き保存はお忘れなく!)
WordPressの固定ページの仕組みがいまいちわからない…という方へ(もうわかるよ!という方は「ー」を押して閉じてください)

普段固定ページをあまり触っていない方は「固定ページって一体なんなの?」と疑問に思いますよね。
私も最初は理解できずモヤモヤしていました。
どのカテゴリーにも含まれない独立した単体のページです。
自由な目的やレイアウトでつくれる真っ白なページをイメージしてみてください。
固定ページの疑問をQ&Aでまとめました。

固定ページの使いかたはわかりましたか?
それではさっそく、ここから固定ページを作っていきましょう。

タイトルはなんでもいいんですが、わかりやすくNewpostにします。(本文はこのあとの設定で勝手に記事一覧が反映されるので空欄でOKです。)
最終的に記事一覧のページタイトルとして表示されるので、それらしいタイトルにしておいてください。

もしタイトルを日本語で「新着記事」などにした場合は、パーマリンクを英字に直してくださいね。

タイトルに入れた文字がそのままパーマリンクに入っているはずなので、確認してURLをコピーしてください。
今は親切に公開後にURLコピーボタンが出てくるので、そこでコピーでOKです。

投稿リストの【settings】に戻って、MOREリンクの表示設定をします。
固定ページで作ってコピーしたNewpostのURLをここに貼り付けてください。
表示テキストに、「もっと見る」「Read more」などお好きな文言を入れたら、投稿リストの編集はこれにて終了です。
ただ、実はこの段階ではURLを踏んでも1つも投稿がされていない空白のページになっちゃうんです。

この「Newpost」に投稿一覧を自動で反映させる設定を解説します。
ただ、これはサイト型トップページの編集がすべて完成したあとにサイト全体でやる設定なので、最後の最後でOKです。

【外観】→【カスタマイズ】→【WordPress設定】→【ホームページ設定】へ進みます。
↓
ホームページ設定をそれぞれ以下のように選択してください。
【ホームページの表示】→【固定ページ】
【ホームページ】→【メインページ】
【投稿ページ】→【Newpost】
初めてこの設定をする時は、+新規固定ページを追加 から作った固定ページを追加してください。
メインの固定ページができていない段階では新着記事一覧のリンクの表示はできないので、最後に完成したら忘れずホームページ設定をやってくださいね。

お疲れさまです!これで新着記事一覧のページの反映ができました。
初心者さん向けにわかりやすくと思ったら、かなり説明が長くなってしまいました…すみません!
②カテゴリーごとに記事を表示させる方法
カテゴリーごとの表示は一番かんたん!
①と比べたらめちゃくちゃ簡単なのがカテゴリーごとの表示です。

投稿リストの設定画面【Pickup】から、表示したいカテゴリーをクリックして指定してください。
クリックすると該当のカテゴリーの記事が自動で表示されます。
【Settings】で、好きなレイアウトも選択しておきましょう。

カテゴリーを指定した場合は、自動でカテゴリーページのURLを取得されるのでMOREリンクのURLは入れる必要がありません。
「もっと見る」などの表示テキストだけ入力して完了です!

めちゃくちゃ簡単で泣きそう。
③タグごとに表示する設定方法
カテゴリーの場合とほとんど同じ!

カテゴリーの時と同じく、Pickupの設定画面から、【タグ】をクリックし、希望のタグを選ぶと自動で該当のタグの記事が表示されます。
レイアウトは【settings】で選んでくださいね。

タグの場合も、カテゴリーと同様にMOREリンクが自動で取得されるのでここまで終われば完了です!
④見せたい記事だけを個別でピックアップする方法
最後に、アクセスを集めたい記事など、特定の記事のみ表示する方法を解説します。

ダッシュボードの投稿を開くと出てくるいつもの記事一覧ページの右端に、数字のIDが表示されています。
表示させたい記事のIDをすべてメモしておいてください。

投稿リストの設定画面【Pickup】から、さきほどメモした投稿IDを入れていきます。
複数ある場合はカンマで区切ってください。
IDを入力した分だけ自動で記事が表示されます。

目立たせたい記事はこの方法でトップページに登場させちゃいましょう!
まとめ|SWELLタブブロックと投稿リストの使いかた
今回は、SWELLのタブブロックと投稿リストの使いかたを解説しました。
設定の方法はわかりましたか?
少しややこしいですが、仕組みがわかればできると思うので、ゆっくりやってみてくださいね。
最後までご覧いただきありがとうございました!
SWELLのサイト型カスタマイズまとめ記事はこちらから
個別記事はこちらから
