「SWELLの記事スライダーを、記事の下や固定ページにも置きたい」 「おすすめ記事を、自分で選んだ順番で横に並べたい」
SWELLの記事スライダーは便利ですが、標準ではトップページにしか置けません。記事の選び方や並び順にも決まりがあります。
この記事では、SWELLの記事スライダーでできること・できないことを整理したうえで、トップページ以外にスライダーを置く3つの方法を比べます。
この記事でわかること
- SWELL標準の記事スライダーでできること・できないこと
- トップページ以外にスライダーを置く3つの方法と、それぞれの向き不向き
- コードを書かずに、SWELLの記事下や固定ページへ置く方法
※SWELLの仕様は2026年10月時点の情報です。
SWELLの記事スライダーはトップページ専用
SWELLの記事スライダーは、カスタマイザーの「トップページ」→「記事スライダー」で設定します。設定場所のとおり、表示されるのはトップページだけです。
| 項目 | SWELL標準の記事スライダー |
|---|---|
| 置ける場所 | トップページのみ |
| 記事の選び方 | カテゴリー（1つだけ）またはタグで絞り込み |
| 並び順 | ランダム／投稿日順／更新日順／人気順 |
| 好きな順番に並べる | できない |
| 複数のスライダーを作る | できない |
そのため、次のような使い方は標準機能ではできません。
- 記事の下に「あわせて読みたい」を出す：記事スライダーは個別記事には置けない
- 固定ページ（サービス紹介・LP）に、選んだ記事だけを出す：表示されるのはトップページだけ
- 「この3本を、この順番で」と並び順を決める：並び順は自動（日付・人気・ランダム）
- ページごとに違う記事のスライダーを出す：スライダーはサイト全体で1つ
トップページ以外にスライダーを置く3つの方法
| 方法 | コード | 好きな順番 | 矢印 | 向いている人 |
|---|---|---|---|---|
| ① リッチカラムの横スクロール＋投稿リスト | 不要 | できる（1件ずつ配置） | なし | 1か所だけ、数件並べたい人 |
| ② 投稿リスト＋Swiperのコード | 必要 | できない（自動の並び） | あり | コードを触れる人 |
| ③ 記事用のカルーセルプラグイン | 不要 | できる（ドラッグで並べ替え） | あり | 何か所も置きたい人・手で選びたい人 |
① リッチカラムの横スクロール＋投稿リスト
SWELLの「リッチカラム」ブロックには横スクロールの設定があります。各カラムに「投稿リスト」ブロックを1つずつ入れ、表示する記事をIDで1件ずつ指定すると、横に流れる記事一覧になります。
- コード不要：SWELLの機能だけで完結する
- 記事1件ごとにカラムを作る必要がある：記事が多いと作業が増える
- 矢印ボタンや自動再生はない：横スクロールだけ
- 使い回しにくい：別のページで使うには同じ作業をくり返す
1か所だけ、3〜4件並べたいならこの方法で十分です。
② 投稿リスト＋Swiperのコード
SWELLにはスライダー用のライブラリ「Swiper」が入っています。子テーマの functions.php でSwiperを読み込み、投稿リストブロックにCSSクラスを付けて、JavaScriptでスライダーにする方法です。
- 作り込める：矢印や自動再生まで自由に設定できる
- functions.php・CSS・JavaScriptの編集が必要：書き間違えるとサイトが表示されなくなることもある
- 手で選んだ順番には並べにくい：記事は投稿リストの条件（カテゴリー・タグ・人気順など）で決まる
- テーマを変えると作り直し：SWELLの仕組みに頼った作りのため
コードを触ることに慣れている人向けの方法です。
③ 記事用のカルーセルプラグインを使う
コードを書かずに、記事を手で選んで好きな順番に並べたいなら、プラグインを使うのが早道です。
ここでは、筆者が作っている無料プラグイン「Post Carousel by StellaCodex」を使います。もともと筆者が運営しているSWELLの旅行サイト（timeless-travel.jp）のために作ったものを、誰でも使えるように公開しました。今もそのサイトで使っています。
- コード不要：ショートコードを貼るだけ
- 好きな記事を好きな順番で：検索・カテゴリー・URLで追加して、ドラッグで並べ替え
- 何個でも作れる：記事ごと・ページごとに別の内容を用意できる
- 矢印ボタンつき：スマホ・PCで表示するカード数も変えられる
- テーマを変えても使える：SWELLのファイルを触らないので、アップデートの影響も受けない
SWELLにPost Carouselでスライダーを置く流れ
大まかな流れは次の5ステップです。画面つきの詳しい手順は「WordPressで記事をカルーセル・スライダー表示する方法」で解説しています。
「プラグイン」→「新規追加」で「Post Carousel by StellaCodex」を検索して、インストール・有効化します。
管理画面の「Post Carousels」で新しいカルーセルを作り、表示したい記事をキーワード検索・カテゴリー・URLから追加します。SWELL標準と違い、カテゴリーをまたいで好きな記事を混ぜられます。
いちばん読んでほしい記事を左端に置きます。
カード数、枠線、角丸、画像の比率を設定します。SWELLのカスタマイザーで決めているボタンやカードの角丸に合わせると、サイトになじみます。
作ったカルーセルのショートコードを、置きたい場所に貼ります。
[stellacodex_carousel id="s1"]※ id の部分はカルーセルごとに違います。管理画面に表示されているショートコードをそのままコピーしてください。
SWELLでの置き場所と貼り方
SWELLなら、置きたい場所に合わせて次のように貼り分けられます。
| 置きたい場所 | 貼り方 |
|---|---|
| 特定の記事・固定ページだけ | ブロックエディターで「ショートコード」ブロックを追加して貼る |
| いくつかのページで使い回す | SWELLの「ブログパーツ」にショートコードを入れ、各ページでブログパーツを呼び出す |
| 全記事の下 | 「外観」→「ウィジェット」の記事下のエリアに、ショートコードを入れたブロックを置く |
- ブログパーツに入れておくのがおすすめ：カルーセルの中身を変えると、ブログパーツを使っている全ページにまとめて反映されます
- 記事の中に置くときは見出しの階層に注意：
[stellacodex_carousel id="s1" tag="h3"]のようにtagを付けると、カルーセルのタイトルを h3 で出せます。タイトルが不要ならtitle="hide"を付けます
SWELL標準のスライダーとの使い分け
SWELL標準の記事スライダーをやめる必要はありません。場所で使い分けるのがおすすめです。
| 場所 | おすすめ |
|---|---|
| トップページのメインビジュアル | SWELL標準の記事スライダー（人気順・新着順で自動） |
| 記事の下の「あわせて読みたい」 | Post Carousel（記事ごとに手で選んだ記事） |
| 記事の途中の「先にこちらを」 | Post Carousel（前提になる記事を本文の流れで） |
| 固定ページ（サービス紹介・LP） | Post Carousel（そのページで見せたい記事だけ） |
よくある質問
- SWELL標準の記事スライダーと一緒に使えますか？
-
使えます。トップページはSWELL標準、記事の下や固定ページはPost Carouselというように、場所で使い分けられます。
- SWELLのブログパーツに入れても動きますか？
-
ブログパーツの中にショートコードブロックを置けば表示できます。1つのブログパーツを複数のページで使い回せるので、管理が楽になります。
- functions.php や子テーマを編集する必要はありますか？
-
ありません。プラグインを入れてショートコードを貼るだけです。SWELLのファイルを触らないので、SWELLをアップデートしても設定は消えません。
- 無料版で作れるカルーセルの数に上限はありますか？
-
ありません。カルーセルは何個でも作れます。記事ごと・ページごとに違う内容を用意できます。
- 将来SWELL以外のテーマに変えても使えますか？
-
使えます。ショートコードで表示するので、テーマを変えてもカルーセルを作り直す必要はありません。
- 新着記事を自動で流したり、自動でスライドさせたりできますか？
-
Pro版の機能です。新着・カテゴリー・タグからの自動表示、自動再生、記事の最後への自動差し込みができます。手で選んで並べるだけなら無料版で十分です。くわしくは商品ページで紹介しています。
まとめ
SWELLの記事スライダーはトップページ専用です。トップページ以外に置くなら、次のように選んでください。
- 1か所に数件だけ並べたい：リッチカラムの横スクロール＋投稿リスト
- コードを触れて、作り込みたい：投稿リスト＋Swiperのコード
- コードを書かずに、好きな記事を好きな順番で、何か所にも置きたい：記事用のカルーセルプラグイン
Post Carouselは無料版でも、カルーセルを何個でも作れます。まずはSWELLのブログパーツに1つ作って、よく読まれている記事の下に置いてみてください。