【SWELL】記事スライダーの設定と活用方法｜おすすめ記事をスライド表示してサイトをおしゃれに

WordPressテーマ「SWELL」の記事スライダーは、投稿記事をスライダー形式で表示してくれる機能です。

ブログに設置すると、下記のように記事が左にスライドしながら表示され、読んでほしい記事へのアクセスを自然に促せます。

見た目もおしゃれになり、サイト全体の印象もグッと引き上げてくれます。

この記事では、初心者の方でも設定できるように、以下の内容を詳しく解説します。

それでは、さっそく設定方法を見ていきましょう。

1. SWELLで記事スライダーを設定する方法

SWELLの記事スライダーの基本設定は、以下の手順で行います。

1. 記事スライダーを表示する（基本設定）

とりあえず表示させるだけなら、これで基本設定は完了です。

さらに、「特定の記事だけをスライダーに載せたい」「スライドの見た目を調整したい」場合は、追加の設定を行いましょう。

2. 表示する記事を選ぶ

SWELLの記事スライダーは、特定のカテゴリーやタグに絞って表示することができます。
これにより、「おすすめ記事だけを見せたい」「雑記記事は除外したい」といった柔軟な表示が可能です。

ここでは、カテゴリーを使った基本設定と、タグを使った応用設定をステップで解説します。

1.カテゴリーで絞り込む方法

特定のカテゴリーの記事だけを表示したい時は、以下の手順で設定します。

2.タグで絞り込む方法

複数カテゴリーにまたがる「おすすめ記事」をまとめて表示したい場合や、特定の記事を除外したい場合には、タグを使うと便利です。

例えば、「おすすめ」「注目」といったタグを記事につけて、記事スライダーでそのタグを指定します。

この「記事スライダー」の設定画面では、他にも並び順やスライドの速度、タイトル位置などの設定が可能です。

順を追って解説していきますね。

3. 記事スライダーの並び順を設定する

記事スライダーで表示する記事の「並び順」を設定することができます。

並び順は、以下から選べます。

最新情報を重視するなら「投稿日順」、読者に人気の記事を見せたいなら「人気順」、毎回違う印象を与えたいなら「ランダム」がおすすめです。

4. 記事の表示内容を設定する

スライダーに表示した記事の内容を設定することができます。

タイトルや日付などの表示位置の設定

タイトルや日付の位置を「画像の下側」「画像の上に被せる」から選べます。

カテゴリー表示位置の設定

記事のカテゴリーを表示する位置を「表示しない」「サムネイル画像の上」「タイトルの下」から選択します。

日付の表示設定

公開日、更新日の日付を表示するかどうかを選択できます。

著者の表示設定

著者（記事を書いた人）を表示するかどうかを選択できます。

5. スライド設定

スライド設定では、スライドの表示枚数や速度などの設定を行います。

スライダーの枚数設定（PC）

PCで記事スライダーに表示する記事数を1〜6枚から選べます。

※偶数に設定すると、上図のようにスライダーの両端に半分ずつ記事が表示されます。

スライダーの表示枚数（SP）

SP（スマートフォン）での表示枚数は1〜3枚から選べます。

スライドのアニメーション速度設定

スライドのアニメーション速度（スライドが動く速さ）を自由に設定できます。
初期設定は「1500」で、これはスライドが1つ移動するのに約1.5秒かかるという意味です。

数字を小さくするとスライドがスッと速く動き、大きくするとゆっくり動きます。

スライドが切り替わる間隔

スライドが次の記事に切り替わるまでの待ち時間を設定できます。
初期値は「5000」になっており、これは5秒ごとにスライドが切り替わるという意味です。

テンポよく動かしたい場合は数字を小さく（例：3000）、
じっくり見せたい場合は数字を大きく（例：7000）します。

実際の見え方を確認しながら調整してみてください。

その他の設定

さらに、見た目や操作性を調整できる便利なオプションが用意されています。

矢印ナビゲーションを表示する

スライダーの左右に「＜」「＞」の矢印ボタンを表示します。
訪問者が自分で操作してスライドを進めたり戻したりできるようになるので、ユーザーにとっても親切です。

ページネーションを表示する

スライダーの下に小さな丸（ドット）や数字を表示します。
今が何枚目の記事なのか、全体で何枚あるのかが一目でわかるようになります。

スライド間の余白をなくす

スライド同士の間にある余白をゼロにする設定です。
画像をピッタリ並べたい場合に使えます。

6. その他の表示設定

記事スライダー全体の見た目を調整する項目です。

記事スライダーエリアのタイトル

スライダー上部にタイトルを表示できます。
例：「おすすめ記事」「最新情報」など。

上下の余白量

スライダーの上下にどれくらいの余白をつけるかを「なし」「小」「中」「大」から選択します。
ページ内の他の要素とのバランスを見て調整しましょう。

左右の幅（PCサイズ表示時のみ）

PCサイズで表示した時の、記事スライダーの表示幅を
「フルワイド」「左右に少し余白あり」「コンテンツ幅に収める」から選べます。

フルワイド

画面いっぱいに広がる表示です。ダイナミックで迫力が出ます。

左右に少し余白あり

フルワイドよりも少し内側に収まります。
広々した印象はそのままに、サイドに余白ができるのでスッキリ見えます。

コンテンツ幅に収める

本文の幅に合わせて表示されます。ほかのコンテンツと統一感を出したいときにおすすめです。

この設定はPCサイズでのみ有効です。
スマホやタブレットでは自動的にフルワイド表示になります。

記事スライダーエリアの文字色

スライダー内のタイトルや日付の色を指定できます。見出しやページネーションの色も同じ色になります。

※タイトルや日付を「画像の上に被せる」設定にした場合は自動的に白色で表示されます。

記事スライダーエリアの背景色

スライダーの背景色を設定します。

記事スライダーエリアの背景画像

スライダー全体の背景に画像を設定できます。

背景画像の透過設定（不透明度）

背景画像をどのくらい透過させるかを指定します。1から0の間で調整します。

ここまでで、SWELLの記事スライダーの基本設定はすべて完了です。

表示記事の絞り込みや見た目の調整までできたので、トップページでしっかり記事を見せられる状態になりました。

続いて、記事スライダーをサイトの顔「メインビジュアル」として活用する方法もご紹介します。

記事スライダーをメインビジュアルとして活用する

SWELLの記事スライダーは、カスタマイズ設定だけで、メインビジュアルのよう大きく見せることができます。

今回ご紹介するのは、PCでは画面上部に2枚、スマホでは1枚ずつスライドする記事スライダーを設置して、メインビジュアルのように見せる方法です。

それでは、このスライダーを作るための具体的な設定手順を、詳しく見ていきましょう。

記事スライダーをメインビジュアルにする方法

お疲れ様でした！
これで、メインビジュアルのようなインパクトのある記事スライダーの完成です。

まとめ

今回は、SWELLの記事スライダーの基本設定と、メインビジュアルとしての活用方法をご紹介しました。

SWELLの記事スライダーは、難しい知識がなくても直感的に操作できるのがポイントです。
最初は「難しそう…」と思っていた方も、実際にやってみると案外簡単だったのではないでしょうか？

ぜひ、SWELLの記事スライダーを活用して素敵なトップページを作ってみてくださいね。