SWELLで記事スライダーを設置する方法と見せ方のコツ

2026年10月28日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

人気ブログのトップページで、記事がスライドしながら流れていくのを見たことはありませんか。動きがあるだけで、ブログ全体がぐっと華やかに見えますよね。SWELLなら記事スライダーを、コードなしで設置できます。

この記事では、SWELLで記事スライダーを設置する方法を手順付きで解説します。私が実際につまずいたポイントや、表示する記事の選び方もお伝えしますね。読み終えるころには、トップページで読ませたい記事を目立たせられますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

トップページで記事をスライドさせたいにゃ。

たいがブログ

動きがあると目を引きますよね。SWELLなら簡単に設置できますよ。

ニャフィ

好きな記事だけを表示させることもできるのかにゃ？

たいがブログ

タグを使った記事の選び方も含めて、順番にご紹介しますね。

▼あわせて読みたい：スライダーのように画像が多いトップページほど、サーバーの速さが快適さを左右します。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLの記事スライダーとは？設置前に知っておきたい基本

記事スライダーは、トップページのヘッダー下に記事のアイキャッチを横並びで流して表示する機能です。自動でスライドするので、限られたスペースで複数の記事を見せられますよ。

設定はすべてカスタマイザーの「トップページ」から行います。どの記事を表示するかを先に決めておくと、作業がスムーズに進みます。

記事スライダーとピックアップバナーの違い

どちらもトップページで記事を目立たせる機能ですが、スライダーは動きで目を引き、バナーは固定で確実に見せるという違いがあります。私は両方試した結果、収益記事はバナー、新着や人気記事はスライダーと使い分けるのが一番しっくりきました。

表示する記事は「タグ」で選ぶのがおすすめ

スライダーに出す記事は、カテゴリーやタグで絞り込めます。カテゴリーで指定すると関係の薄い記事まで混ざりやすいので、「pickup」のような専用タグを作って付ける方法が便利です。以前使っていた別のテーマではスライダー用にプラグインが必要で、SWELLの標準機能の充実ぶりに驚きました。

SWELLで記事スライダーを設置する方法

ここからは、実際に記事スライダーを表示させる手順を見ていきましょう。先に表示したい記事にタグを付けてから、カスタマイザーで設定する流れです。

カスタマイザーは右側のプレビューで変化を確かめながら調整できます。公開前に見た目を確認できるので安心ですよ。

表示する記事のアイキャッチを整えておく

スライダーにはアイキャッチが大きく表示されるため、画像のない記事が混ざると一気に見栄えが落ちます。私は設定直後、アイキャッチ未設定の古い記事がスライダーに出てしまい、慌てて差し替えた経験があります。事前のチェックを忘れずに。

表示枚数はスマホ基準で決める

パソコンで見やすい枚数でも、スマホでは1枚が小さくなりすぎることがあります。スマホでは1〜2枚程度に抑えると、タイトルまでしっかり読めますよ。読者の多くはスマホから訪れることを意識しましょう。

STEP

表示したい記事に専用タグを付ける

スライダーに出したい記事の編集画面を開き、右サイドバーの「タグ」に「pickup」などの専用タグを付けて更新します。

STEP

カスタマイザーの記事スライダーを開く

管理画面の「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」の順に開きます。

STEP

スライダーを表示する設定にする

記事スライダーを設置するかどうかの項目で、表示する設定を選びます。まずはトップページのみに表示するのがおすすめです。

STEP

表示する記事の条件を指定する

記事の選び方でタグを指定し、STEP1で付けたタグを入力します。並び順や表示枚数もここで調整しましょう。

STEP

公開してスマホ表示を確認する

「公開」をクリックして設定を保存し、スマホでトップページを開いてスライダーがきれいに動くか確認して完了です。

記事スライダーをもっと効果的に見せるコツ

スライダーを表示できたら、次は読者がクリックしたくなる見せ方を整えていきましょう。ちょっとした設定の違いで、スライダーの印象は大きく変わります。

意識したいのは、「目を引く」と「読みやすい」のバランスです。動きを派手にしすぎないことが、結果的にクリックにつながります。

スライドの速さはゆっくりめに設定する

私は最初、スライドの切り替えを速めにしたところ、タイトルを読み終える前に次の記事へ流れてしまい、クリックがほとんど生まれませんでした。タイトルを無理なく読める速さに落としてからは、スライダー経由で読まれる記事が増えています。速さより読みやすさを優先しましょう。

表示速度への影響も意識しておく

スライダーは複数の画像を読み込むため、表示する記事を増やしすぎるとページが重くなりがちです。以前使っていた別のテーマではスライダー用プラグインを入れていて、トップページの表示がもたつくのが悩みでした。SWELLの標準機能なら余計なプラグインが不要なぶん、軽さを保ちやすいのも魅力です。

▼あわせて読みたい：スライダーで目立たせる記事も、検索で読まれる記事であってこそ活きてきます。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLの記事スライダー設置でよくある質問

タグを指定したのに記事が表示されません。: 入力したタグの名前やスラッグに誤りがないか確認しましょう。記事側でタグを付けたあと「更新」を押し忘れていないかも、あわせてチェックしてみてください。
スライダーに表示する記事は何本くらいがいいですか？: 5〜8本程度がおすすめです。少なすぎると同じ記事ばかり流れ、多すぎると表示が重くなります。読ませたい記事を厳選しましょう。
設定を変えても表示が変わりません。: カスタマイザーで「公開」を押したか確認しましょう。保存済みなら、キャッシュを削除してブラウザを再読み込みすると反映されることが多いですよ。
スライダーとピックアップバナーは併用できますか？: 併用できます。ただし両方を並べるとトップページが縦に長くなるので、役割を分けて使うのがコツです。私は新着をスライダー、収益記事をバナーにしています。