SWELLの記事スライダーの設定方法｜初心者でもできる表示設定とカスタマイズ

SWELLで記事スライダーを使いたいけれど、以下のような悩みはありませんか？

記事スライダーは、トップページに表示する記事をコントロールできる便利な機能ですが、設定項目が多いため、最初は少し分かりづらく感じることもあります。

ただ、基本的なポイントさえ押さえれば、難しい操作は必要ありません。

カスタマイザーから設定するだけで、表示する記事の選択から見た目の調整まで簡単に行えます。

この記事では、SWELLの記事スライダーについて

を、初心者の方でも迷わないように順番に解説します。

記事を読みながら設定を進めていけば、トップページに見やすく整った記事スライダーを設置できるようになりますよ。

まだSWELLを導入していない方は、先に以下の記事をチェックしておくとスムーズです。

購入したら、初期設定も忘れずに！

SWELLの記事スライダーでできること

SWELLの記事スライダーを使うと、トップページの上部などに記事をスライド形式で表示できます。

表示する記事の条件や見た目も設定できるので、トップページで読んでほしい記事を目立たせたいときに便利です。

具体的には、次のようなことができます。

では、それぞれ順番に見ていきましょう。

記事スライダーはトップページに設置できる

SWELLの記事スライダーは、トップページに設置できる機能です。

トップページの目につきやすい場所に記事を表示できるので、読者に見てもらいたい記事を自然に目立たせやすくなります。

たとえば、新着記事を並べたり、特定のテーマの記事へ誘導したりする使い方ができます。

ブログの入り口で注目記事を案内しやすくなるため、回遊につなげたいときにも使いやすい機能です。

表示する記事はタグ・カテゴリーなどで絞り込める

表示する記事は、タグやカテゴリーといった条件を指定して絞り込めます。

そのため、ただ新着記事を並べるだけでなく、見せたい記事を目的に合わせて表示しやすくなります。

たとえば、特定のタグを付けた記事だけを表示したり、特定のカテゴリーの記事をまとめて見せたりできます。

「まずはこのテーマの記事を読んでほしい」といった場合にも、トップページから案内しやすくなります。

デザインや表示数も調整できる

記事の選び方だけでなく、見た目も調整できます。

表示数やデザインを整えることで、ブログ全体の雰囲気に合わせたトップページを作りやすくなります。

たとえば、表示する記事数を設定したり、見せ方を整えたりすることで、画面をすっきり見せやすくなります。

記事を増やしすぎると見づらくなることもあるため、見やすさとのバランスを取りながら設定するのがポイントです。

SWELLの記事スライダーは、細かい設定項目が豊富に用意されており、サイトデザインに合わせて柔軟にカスタマイズできます。

SWELLの記事スライダーの設定場所

SWELLの記事スライダーの設定は、カスタマイザー画面からおこないます。

設定項目は細かく用意されていますが、最初に開く場所はシンプルです。

では、順番に見ていきましょう。

カスタマイザーの「トップページ」から設定する

記事スライダーの設定は、WordPress管理画面のカスタマイズ画面からおこないます。

「外観」⇒「カスタマイズ」をクリックしてください。

カスタマイザーを開いたら、「トップページ」⇒「記事スライダー」を順番にクリックします。

ここまで進めると、記事スライダーの設定画面が表示されます。

まず確認したい基本設定

記事スライダーの設定画面では、表示する記事の条件やデザインなどをまとめて調整できます。

項目は多めですが、リアルタイムでプレビューが反映されるため、変更した内容をその場で確認しながら調整できます。

まずは設定画面を開いて、どんな項目があるかをひと通り見ておきましょう。このあとの設定も進めやすくなりますよ。

SWELLの記事スライダーの設定方法

SWELLの記事スライダーは、表示するかどうかを切り替えたうえで、どの記事を表示するかを設定できます。

主な設定項目は、記事のピックアップ方法と並び順です。

まずは記事スライダーを設置する設定に変更し、そのあとでタグ・カテゴリー・並び順を調整していきましょう。

では、順番に見ていきます。

記事のピックアップ方法を選ぶ

まずは、記事スライダーを表示するかどうかを設定します。

記事スライダーの表示は、「設置しない」と「設置する」の2つから選択できます。

SWELLでは初期状態で「設置する」が選択されています。

記事スライダーを使う場合はそのままで問題ありません。表示させたくない場合だけ、「設置しない」を選択してください。

次に、記事スライダーにどの記事を表示するかを設定します。

記事のピックアップ方法は、「タグ」または「カテゴリー」による絞り込みが可能です。

タグで絞り込む場合の設定方法

タグで絞り込む場合は、指定したタグのスラッグを入力します。ここで入力するのはタグ名そのものではなく、英数字で設定されているスラッグです。

タグを選択した場合、指定したタグのスラッグ（英数字で表したもの）を入力することで、そのタグが付いた記事のみを表示できます。

ピックアップ対象のタグ名に「taga」を入力すると、スラッグ「taga」に紐づいている記事が表示されます。

カテゴリーで絞り込む場合の設定方法

一方、カテゴリーで絞り込む場合はカテゴリーIDを入力して記事を選びます。

タグのときのように文字列を入れるのではなく、数字のIDで設定する点が違いです。

新着記事・人気記事を表示する場合の考え方

「カテゴリー」または「タブ」で絞り込んだ記事を、どんな順序で表示するかは「並び順」で設定します。

記事の並び順は「ランダム」「投稿日」「更新日」「人気順」から選択できます。

新着記事を優先して見せたい場合は、投稿日や更新日を選ぶと使いやすいです。

反対に、よく読まれている記事を目立たせたい場合は、人気順を選ぶとトップページの導線を作りやすくなります。

どの並び順が合うかは、トップページで何を読んでほしいかによって変わります。

新しい記事を見せたいブログなら投稿日、定番記事を読んでほしいなら人気順、というように目的に合わせて選ぶのがおすすめです。

SWELLの記事スライダーの表示設定

記事スライダー内の各項目は、表示の有無や表示位置などを細かく設定できます。

具体的に設定できるのは以下の項目です。

では、順番に見ていきましょう

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

タイトルや日付の表示位置は「画像の下側」または「画像の上に被せる」から選択できます。

カテゴリー表示位置

カテゴリーの表示位置には「表示しない」「サムネイル画像の上」「タイトルの下」の3つの選択肢があります。

日付の表示設定

日付表示では公開日と更新日について、チェックボックスで表示・非表示を切り替えられます。

記事の新しさをアピールしたい場合は、更新日の表示が効果的です。

著者の表示設定

著者名についてもチェックボックスで表示・非表示を切り替えられます。

スマホ表示で見やすくするポイント

記事スライダーは、表示項目を増やしすぎると画面がごちゃついて見えることがあります。

特にスマホでは表示スペースが限られるため、タイトル・カテゴリー・日付・著者名をすべて出すより、必要な情報に絞ったほうが見やすくなります。

たとえば、カテゴリーを表示しない設定にしたり、日付は更新日のみにしたりすると、情報量を抑えられ見やすくなります。

タイトルを画像の下に表示するか、画像の上に被せるかでも印象が変わるので、実際のプレビューを見ながら調整しましょう。

SWELLの記事スライダーのデザイン調整

SWELLの記事スライダーでは、表示枚数やアニメーションだけでなく、余白・幅・色・背景画像まで細かく調整できます。

見た目を整える項目は多いですが、すべてを大きく変える必要はありません。まずは表示枚数や余白など、印象が変わりやすい部分から調整するようにしましょう。

では、順番に見ていきましょう。

スライド設定で見た目を整える

「スライド設定」では、表示枚数や動き方やナビゲーションの有無などを調整できます。

記事スライダーの印象を決める基本設定なので、まずはここから整えていきましょう。

スライダーの枚数（PC）

ＰＣでのスライドの表示枚数は１枚から６枚で設定できます。

スライダーの枚数（SP）

スマホでのスライドの表示枚数は１枚から3枚で設定できます。

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

「スライドのアニメーション速度」では、横にスライドするスピードを設定できます。

数字が小さいほど、横に動くスピードが速くなります。

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

「スライドが切り替わる間隔」では、スライドが動き出すまでの時間を設定できます。

数字が小さいほど止まっている時間が短くなります。

矢印ナビゲーションの表示の有無

「矢印ナビゲーションを表示する」は、初期設定ではチェックが外れています。

ぺージネーションの表示の有無

「ページネーションを表示する」は初期設定ではチェックが付いています。

スライド間の余白の有無

「スライドの余白をなくす」は初期設定ではチェックが外れています。

初期設定ではスライド間に少し余白があり、チェックを入れると下図のように余白がなくなります。

その他の表示設定で読みやすいデザインにする

「その他の表示設定」では以下の項目が用意されており、外観をさらに細かく調整することができます。

まずは余白・幅・文字の見やすさを意識すると、見た目を整えられ読みやすいデザインになります。

タイトルの有無

記事スライダーの上部にタイトルを表示するかどうかを設定できます。

上下の余白量

記事スライダー上下にある縦方向の余白を「なし」・「小」・「中」・「大」の4段階で調整できます。

下図の青枠の部分の縦方向の余白が変更できます。

左右の幅

スライダーの横幅は、「コンテンツ幅に収める」・「左右に少し余白あり」・「フルワイド」から選択できます。

コンテンツ幅に収める

左右に少し余白あり

フルワイド

文字・背景色の設定

記事スライダーの文字色と背景色もカスタマイズできます。

文字色の変更

文字色を変更すると、ページネーションも色も連動します。

背景色の変更

背景画像の設定

スライダーエリアへ背景画像も設定でき、透過度は0〜1の範囲で変更できます。

透過度を下げると背景画像が薄くなり、文字が読みやすくなります。

背景画像は「画像を選択」から設定します。

背景画像の透過設定は、1が透過していない状態です。

数字が小さくなるほど画像が薄くなり、例えば透過設定を0.2に設定すると下図のようになります。

設定を増やしすぎないほうがよい理由

記事スライダーは細かく調整できる反面、設定を増やしすぎると全体の印象がまとまりにくくなることがあります。

たとえば、表示枚数・余白・横幅・色・背景画像を一度に大きく変えると、どの設定で見た目が変わったのか分かりにくくなります。

そのため、最初は表示枚数・余白・横幅のように変化が分かりやすい項目から調整し、必要に応じて色や背景画像を加えていくのがおすすめです。

特に背景画像は便利ですが、透過度を上手く調整しないと文字が読みにくくなることもあるため、プレビューを見ながら少しずつ整えるようにしましょう。

SWELL標準機能で記事スライダーをおしゃれに見せる方法

SWELLの記事スライダーは、CSSを使わなくても見せ方をかなり調整できます。

SWELLの標準機能のみを使用して、記事スライダーをより効果的に活用する2つの方法をご紹介します。

メインビジュアル風に見せる方法

記事スライダーをメインビジュアル風に見せるには、まずトップページのメインビジュアルを非表示にします。

フルワイドで表示する方法

上記のカスタマイズを、よりメインビジュアルに近い見た目にしたい場合の手順を紹介します。

ヘッダーを記事スライダーの上に被せて、記事スライダーの表示幅もフルワイドに設定します。

実際に調整するときの注意点

記事スライダーは標準機能だけでもかなり見た目を変えられますが、設定を一度に大きく変えすぎると、どこで印象が変わったのか分かりにくくなります。

そのため、まずはメインビジュアルを非表示にする、スライダーの枚数を1枚にする、余白をなくすといった基本設定から整えるのがおすすめです。

また、フルワイド表示にする場合は、ヘッダー背景の透明化や文字色の変更もあわせて確認しておくと、全体の見た目がまとまりやすくなります。

背景と文字色の組み合わせによっては読みにくくなることもあるので、プレビューを見ながら少しずつ調整するようにしましょう。

SWELLの記事スライダーがうまく表示されないときの確認ポイント

記事スライダーが表示されない場合は、設定ミスや条件の指定ミスであることがほとんどです。

難しい原因は少ないので、まずは基本的な設定から順番に確認していきましょう。

ひとつずつ見ていけば、ほとんどの場合は解決できます。

設定条件が合っているか確認する

まず確認したいのが、記事スライダー自体が有効になっているかどうかです。「設置する」が選択されていないと、スライダーは表示されません。

WordPress管理画面の外観＞カスタマイズ＞トップページ＞記事スライダーにて「記事スライダーを設置するかどうか」で「設置する」が選択されているかどうか確認してください。

👉「記事のピックアップ方法を選ぶ」を確認

タグ・カテゴリー指定が正しいか確認する

記事が表示されない場合は、絞り込み条件のミスもよくあります。

タグで絞り込む場合は、タグ名ではなくスラッグ（英数字）を入力しているかを確認してください。

たとえば「SWELL」というタグでも、スラッグが「swell」なら、その値を入力する必要があります。

👉「タグで絞り込む場合の設定方法」を確認

カテゴリーで絞り込む場合は、カテゴリーID（数字）を入力しているかを確認しましょう。

👉「カテゴリーで絞り込む場合の設定方法」を確認

表示まわりの設定を見直す

表示設定によっては、記事は表示されていても見えにくくなっているだけの場合があります。

また、スライド設定や余白設定によって、見え方が変わることもあります。

設定を変更したら、カスタマイザーのプレビューで実際の表示を確認しながら調整していきましょう。

まとめ

今回は、SWELLの記事スライダーの設定方法からデザイン調整までを解説しました。

この記事で紹介した内容を、あらためてまとめると次の4つです。

SWELLの記事スライダーは、難しい設定をしなくても、基本設定だけで十分使いやすい機能です。

そのため、ブログ初心者でもトップページを整えやすいのが大きなメリットです。

記事スライダーを活用すると、読者に見てほしい記事を目立たせることができます。結果として、回遊しやすいブログになり、サイト全体の見やすさも向上します。

まずはこの記事の手順を参考にしながら、基本設定から1つずつ整えていきましょう。

少し調整するだけでも、トップページの印象は大きく変わります。

SWELLをまだ使うか迷っている方や、ほかの機能もあわせて知りたい方は、以下のレビュー記事も参考にしてみてください。

今回は以上です。

最後までお読みいただきありがとうございました。