【SWELL】記事内にスライダーを簡単に追加する方法【Smart Slider 3】

2022年5月30日2026年3月26日

※この記事は2022年公開の旧記事をリライトしたものです。
以前紹介していた「XO Slider」はセキュリティ上の問題でWordPress公式から公開停止となり、現在はダウンロードできません。
代わりに「Smart Slider 3」を使った方法を紹介します。

エル子

SWELLのメインビジュアルにはスライダーを設定できるけど、記事の中にもスライダーを入れたいんです…。何かいい方法ありますか？

tomo

それなら「Smart Slider 3」っていう無料プラグインがおすすめだよ！高機能なのに操作がわかりやすくて、SWELLとの相性もいいんだ。インストールから使い方まで一緒に見ていこう！

(スポンサーリンク)

Smart Slider 3ってどんなプラグイン？

Smart Slider 3は、世界中で80万以上のサイトで使われているスライダープラグインです。

XO Sliderと比べると設定項目は多いですが、その分カスタマイズの自由度が段違いに高いです。具体的にはこんな特徴があります。

ドラッグ＆ドロップで操作できる：直感的にスライドを作成・編集できる
テンプレートが豊富：無料版でも多数のテンプレートから選べる
レスポンシブ対応：スマホ・タブレットでも自動で最適化される
ブロックエディター対応：SWELLのブロックエディターから直接挿入できる
画像だけでなく動画にも対応：YouTubeのURLを貼るだけで動画スライドが作れる

無料版だけでも十分すぎるくらいの機能があるので、まずは無料版で試してみてください。

Smart Slider 3のインストール方法

STEP① プラグインの新規追加画面を開く

WordPress管理画面の左メニューから「プラグイン」→「プラグインを追加」をクリックします。

STEP② 「Smart Slider 3」を検索する

右上の検索欄に「Smart Slider 3」と入力します。

「Smart Slider 3」が表示されたら、「今すぐインストール」をクリックしてください。

STEP③ プラグインを有効化する

インストールが完了したら「有効化」をクリックします。

有効化すると、管理画面の左メニューに「Smart Slider」という項目が追加されます。これでインストールは完了です。

Smart Slider 3でスライダーを作成する方法

STEP① Smart Sliderのダッシュボードを開く

管理画面の左メニューから「Smart Slider」をクリックします。

初回は簡単なチュートリアルが表示される場合がありますが、スキップしても問題ありません。ダッシュボードが表示されたら「新規プロジェクト」をクリックします。

STEP② プロジェクトの種類を選ぶ

「Create a New Project」の画面が表示されます。

ここでは以下の3つから選べます。

テンプレートから作成：テンプレートから選んで作る
自分で新規プロジェクトを作成：ゼロから自分で作る
自分のファイルをインポートする：他のサイトで作ったスライダーを読み込む

初めての場合は「Create a New Slider」で進めるのが一番シンプルです。

STEP③ スライダーの基本設定をする

スライダーの名前を入力します（「トップページ用」など自分がわかる名前でOK）。

レイアウトは以下の3種類から選べます。

シンプル：一般的なスライダー（おすすめ）
カルーセル(有料版)：画面横幅いっぱいに表示
ショーケース(有料版)：固定幅で中央表示

無料版では「シンプル」しか選べないのでシンプルを選択します。設定したら「作成」をクリックします。

STEP④ スライドを追加する

スライダーの編集画面が開きます。画面左側にある「＋」アイコンをクリックして、スライドを追加します。

「画像」を選択すると、メディアライブラリから画像を選べます。

スライドに表示したい画像を選択して追加してください。
この操作を、スライドの数だけ繰り返します。3〜5枚くらいが見やすいです。

STEP⑤ スライドにリンクを設定する（任意）

各スライドの画像をクリックすると、編集画面が開きます。

「コンテンツ」タブからURLを入力すれば、画像をクリックしたときに指定のページに移動させることができます。おすすめ記事への誘導に便利です。

設定しなくても問題ないので、必要に応じて設定してください。

STEP⑥ スライダーの動き方を調整する

スライダー編集画面の下部にある「アニメーション」や「自動再生」から、スライダーの動き方を調整できます。

よく使う設定はこのあたりです。

自動再生：自動で切り替えるかどうか（ONにすると自動で流れる）
Duration：自動切り替えの間隔（ミリ秒。8000＝8秒がおすすめ）
Main Animation：切り替え時のアニメーション（Horizontal (水平方向)がスタンダード）

細かい設定は後からいくらでも変更できるので、最初はデフォルトのままでもOKです。

設定が終わったら、右上の「保存」をクリックして保存します。

SWELLの記事内にスライダーを設置する方法

スライダーが完成したら、記事内に挿入しましょう。

ブロックエディターから直接挿入する

記事の編集画面で、スライダーを挿入したい位置にカーソルを置きます。

ブロックの追加（＋ボタン）をクリックし、検索欄に「Smart Slider」と入力すると、専用ブロックが表示されます。

ブロックを選択すると、作成済みのスライダー一覧が表示されるので、挿入したいスライダーを選択するだけです。

プレビューで確認する

挿入したら、プレビューで表示を確認しましょう。

スマホでの見た目も確認しておくのがおすすめです。Smart Slider 3はレスポンシブ対応なので、基本的にはそのまま最適化されますが、画像のサイズによっては調整が必要な場合もあります。

XO Sliderから乗り換える場合の注意点

以前この記事で紹介していたXO Sliderは、2024年9月にセキュリティの問題でWordPress公式リポジトリから公開停止になりました。

すでにXO Sliderを使っている方は、以下の手順で移行してください。

Smart Slider 3をインストール・有効化する（上記の手順を参照）
Smart Slider 3で同じスライダーを作り直す（画像はメディアライブラリにあるのでそのまま使える）
記事内のXO Sliderのショートコードを、Smart Slider 3のショートコードに差し替える
XO Sliderを無効化・削除する

XO Sliderで作成したスライダーのデータは、プラグインを削除するとなくなります。念のため、使用していた画像が全てメディアライブラリに残っていることを確認してから削除してください。

よくある質問

Q. Smart Slider 3は無料で使えますか？

はい、無料版で十分な機能が使えます。有料版（Pro）にするとテンプレートの種類が増えたり、レイヤー機能が使えたりしますが、記事内にスライダーを設置する程度なら無料版で問題ありません。

Q. SWELLとの相性は大丈夫ですか？

問題ありません。Smart Slider 3はWordPressの主要テーマと幅広く互換性があり、SWELLで使っても表示崩れや不具合は確認されていません。ブロックエディターにも対応しているので、SWELLとの相性は良いです。

Q. スライダーを入れるとサイトが重くなりませんか？

スライダーに使う画像のファイルサイズが大きいと、表示速度に影響します。目安として、1枚あたり200KB以下に圧縮しておくのがおすすめです。画像の圧縮は「Converter for Media」などのプラグインで自動化できます。

Q. 記事内だけでなく、トップページのヘッダーにも使えますか？

使えます。
ただし、SWELLにはメインビジュアルのスライダー機能が標準で搭載されているので、トップページのヘッダーにはSWELL標準機能を使う方がシンプルです。
Smart Slider 3は記事内やウィジェットエリアなど、SWELL標準機能ではカバーしにくい場所に使うのがおすすめです。

まとめ

この記事では、SWELLの記事内にスライダーを追加する方法として「Smart Slider 3」の使い方を紹介しました。

ポイントをまとめると、こうなります。

Smart Slider 3は無料で高機能なスライダープラグイン
ドラッグ＆ドロップで操作できるので、コードの知識は不要
SWELLのブロックエディターから直接挿入できる
以前紹介していたXO Sliderは公開停止のため、乗り換えがおすすめ

スライダーを使うと、記事の見た目がぐっとリッチになります。おすすめ記事への誘導や、ポートフォリオの見せ方にも使えるので、ぜひ試してみてください。

エル子

XO Sliderより設定項目は多いけど、その分いろんなことができるんですね！