今回は、WordPressテーマ「SWELL」をつかってスライダーパーツを実装する方法を解説していきます。
標準機能で簡単に実装できて、便利にカスタマイズできるパーツが3種類用意されていますので、ご参考ください。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELLで実装できるスライダーの種類
SWELLの標準機能で実装できるスライダーは、現在3種類あります。
- トップページの記事スライダー
- リッチカラムのスライダー表示機能
- テーブルのスライダー表示
まずはそれぞれどのような見た目や仕様になるのか、簡単に見ていきましょう。
トップページの記事スライダー
SWELLのカスタム項目に用意されている「記事スライダー」機能を使うと、トップページ上部（メインビジュアル下）に任意の記事をスライダー表示させられます。
とくに読んでほしい記事をトップページに表示するような用途であれば、この機能を使うと良いでしょう。
リッチカラムのスライダー表示機能
記事中にスライダーを実装したい場合は、リッチカラムブロックを使い、スライダー表示にカスタムします。実際に使ってみると、下記のような仕様に。
画像でも
| メリット | デメリット |
|---|---|
| メリット メリット メリット メリット | デメリット デメリット デメリット デメリット |
こんなテーブル（表）でも
- リスト
- リスト
- リスト
- リスト
こんなリストでも
なんでもスクロール表示できます。
おそらく多くの方がイメージしている「スライダー」は、この機能で実装できるかと思います。
テーブルのスライダー表示機能
詳細な比較表などを作る際に、テーブルをスライダー表示させることもできます。実際に実装すると、下記のような挙動になります。
| 商品 | 特徴 | 価格 | 評価 | 公式サイト |
|---|---|---|---|---|
 商品A | xxxが便利 xxxもできる xxxはできない | 1000円 | リンク | |
商品B | xxxが便利 xxxもできる xxxはできない | 1000円 | リンク | |
商品C | xxxが便利 xxxもできる xxxはできない | 1000円 | リンク |
とくに比較記事などで便利に使える機能です。
SWELLでトップページにスライダーを実装する方法
それでは、トップページにスライダーを実装する方法を解説していきます。
1. 「記事スライダー」のカスタマイズ項目へ
まずはダッシュボードから「外観→カスタマイズ」と進むと、下記の画面へ。
「トップページ」へ進むと下記の画面になるので「記事スライダー」を選びます。
2. 「記事スライダー」のカスタマイズへ
記事スライダーのカスタマイズ項目へ入ると、下記のような画面になります。
ここでカスタムしていきましょう。カスタマイズできる機能は、下記のとおりです。
- 記事のピックアップ方法
-
記事スライダーへ表示する記事の選定方法をカスタムできる項目です。
特定のカテゴリーかタグを設定している記事をピックアップできますので、効率よく使う場合は「記事スライダーに表示させたい記事だけに、専用のタグを設定する」という運用がおすすめです。カテゴリーやタグを指定せず空白にすると全記事から表示されます。
表示順は「ランダム」「投稿日」「更新日」「人気順」から選べます。
- 記事の表示設定
-
記事スライダー表示のデザインをカスタムできる項目です。おもに下記3点を調整できる項目です。
- タイトルや日付の表示 or 非表示
- カテゴリーの表示場所
- 著者表示
- スライド設定
-
スライダーの表示数やアニメーションについてカスタムできる項目です。
- スライダーの枚数設定：1画面に表示される枚数
- アニメーション速度：数字が小さいほど動きが速くなる
- スライドが切り替わる間隔：数字が小さいほど自動スライドの間隔が短くなる
ほか、ナビゲーションやページネーション、スライド間の余白を設定できます。
- その他の表示設定
-
その他スライダーのタイトルやカラーリングなどを調整できる項目です。
左右の幅を設定したり、文字色、背景色、背景画像を設定できたりしますので、よりオリジナリティを出したいときに設定してみてください。
ひととおりカスタマイズして公開すれば、トップページに記事スライダーが表示されます。
SWELLで記事中にスライダーを実装する方法
次に、リッチカラムブロックをつかって記事中にスライダーを表示する方法を解説します。
1. リッチカラムを選択
まずはスライダーを実装したい場所で「リッチカラム」ブロックを選択します。
すると下記のように、リッチカラムが記事に挿入されます。
2. 「横スクロールで表示する」にチェックを入れる
次に、リッチカラムのサイドバー設定項目にある「横スクロールで表示する」へとチェックを入れます。
すると下記のように、スライダー表示へと切り替わります。
3. 自由にコンテンツを作る
あとはスライダー表示させたいコンテンツを自由につくっていきましょう。
通常使えるブロックならほとんど何でもスライダー表示できますので、画像でも、テーブルでも、あとはアイデア次第です。
なお「横幅」をカスタムすれば、各カラムの表示幅を調整できます。1画面に多くのカラムを表示したいなら横幅を狭めに、そうでない場合は広めに取るなど調整してみてください。
SWELLのテーブルをスライダー表示する方法
次に、テーブルをスライダー表示する方法を解説します。
1. テーブルを挿入する
まずは「テーブル」ブロックを挿入します。
あるいは下記のように「パターン」へ進み、テンプレートとして用意されているテーブルを選んでも構いません。
2. 「横スクロール設定」を変更する
スクロールさせたいテーブルを選択して「横スクロール設定」の部分を設定します。
横スクロールの挙動は、下記の4種類から選べます。
- 横スクロールなし
- 横スクロール可能（SPのみ）
- 横スクロール可能（PCのみ）
- 横スクロール可能（SP&PC）
SPはスマホ表示、PCはパソコン表示の指定です。実際の運用では「PCのみ」を使う機会はほぼなく「SPのみ」か「SP&PC」を使うことになります。
テーブルの横幅を設定すると、広くするほど列の幅が広く取られ、狭くするほど列の幅が狭まります。良い見た目になるように設定してみてください。
SWELLで使えるスライダープラグイン
その他、プラグインを使うことでもスライダーを実装できます。ある程度人気で使いやすいスライダープラグインが2つありますので、ご紹介しておきます。
MetaSlider
MetaSliderを使うと、ある程度デザイン性の高いスライダーを簡単に実装できます。
ただし画像がメインになりますので、使いどころは限られますが、プラグインページにデモ動画が掲載されていますので参考にしてみてください。
XO Slider
XO Sliderは、日本製のスライダー実装プラグインです。
画像ギャラリーのようなスライダーを実装できますので、例えば施設紹介をするページなどで便利に使える可能性があります。検討してみてください。
SWELLのスライダー実装方法まとめ
SWELLのリリース初期は、トップページに表示する記事スライダー機能かテーブルのスライダー表示機能のみでしたが、現在はリッチカラムでもスライダーを実装できるようになりました。
リッチカラムのスライダー機能を使えば、プラグインを使わなくても自由度高くスライダーの挙動を実現できますので、ぜひうまく使ってみてください。
