WordPressサイトにスライダーを設置できるプラグイン「Meta Slider」の使い方

このようなスライダー（スライドショー）なら複数の画像を並べるよりもスマートに見せられます。大きいサイズで、かつスペースを削減しながらアニメーションさせて見せることが可能です。

そこで今回は、ブログ記事やサイト内に簡単にスライドショーを設置できるプラグインをご紹介いたします。

Meta Sliderの機能概要

画像をドラッグ&ドロップするだけで、簡単にスライドショーを設置できるWordPressプラグインです。
また、今回ご紹介する無料版でも次のような実用的な機能をご利用いただけます。

• スライダーのサイズを選べる
• 矢印やナビゲーションの有無を選べる
• スライダーの速度を選べる
• スライダーの向きを選べる
• アニメーションのスピードを選べる
• 編集段階でプレビューできる

操作が簡単な上に、機能面も欲しいポイントがおさえられているのでオススメです。

Meta Sliderのインストール

管理画面から「Meta Slider」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

Meta Slider

プラグインのインストールにつきましてはこちらで詳しく解説しています。

2010.10.10

2021.04.06

WordPressのプラグインをインストールしてみよう

2021/2/16 情報を更新いたしました。 WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインス...

Meta Sliderの基本的な使い方

ここではMeta Sliderを使った基本的なスライダーの作り方と設置方法をご紹介いたします。

スライダーの作り方

プラグインを有効化したら次のメニューが追加されます。

この時点で、スライダーに使う画像を用意できている場合は、上記箇所にドラッグ&ドロップしてすぐに完成します。

メディアライブラリ内に画像がある方は、右側の「Create blank slideshow」をクリックします。

上記のように、次にどこを操作すればいいか親切に示してくれます。

自然にメディアライブラリ内に案内されるので、WordPressに不慣れな方でも操作が簡単です。

任意の画像を選択したら、右下の「Add to slideshow」をクリックします。スライド時に綺麗に見えるので、すべて同じサイズの画像を選択しておくことがポイントです。

上記のように選択した画像が並んで表示されたら、管理用のスライダーの名前を入力して右上の「保存」を押して完成です。

ドラッグ&ドロップで簡単に並び変えられますので、順番も思い通りです。

スライダーの設置方法

完成したスライダーは、ショートコードかウィジェットを用いて任意の箇所に設置いただけます。

ショートコードを使う

ショートコードの場合は、編集画面右下に生成されているものをクリックしてコピペして投稿やページに貼り付ければOKです。

当記事冒頭のスライダーもショートコードを使って設置しています。

ウィジェットを使う

WordPressのメニューの「外観」＞「ウィジェット」に移動すると「Meta Slider」が追加されていますので、任意のウィジェットエリアに追加してください。

作成したスライダーの名称を選択して、「保存」を押すと設置完了です。

サイト内のお好みのウィジェットエリアにこのようにミニスライダーを表示可能です。

一味工夫できるスライダーの詳細設定

Meta Sliderにはより細かく設定できる項目がありますので、それぞれご紹介いたします。

• スライドのスタイルの変更
• 各スライドごと詳細設定
• 高度な設定

スライドのスタイルの変更

スライドの基本的なスタイルは、画面右側のこの部分で変更できます。

• 4種類のスライダータイプ
• 幅・高さ
• フェードかスライド
• 矢印の有無
• ナビゲーションの有無

変更したら上部にあるプレビューボタンですぐに確認できます。

スライダーの幅と高さは正確に調整して、プレビューで確認しておきましょう。画像より小さいと予期せぬ位置でトリミングされてしまうことがあります。

各スライドごとの詳細設定

追加したスライドごとにキャプションやリンクを設定したり、ALTタグやトリミング位置を設定できます。

例えば、キャプションを入れると次のような感じです。

簡単な説明を記載する際にご活用ください。メディアライブラリにアップした画像にキャプションや説明を入力済みの場合は、それらをそのまま活用することも可能です。

トリミング位置については、スライドの高さや幅が画像サイズより小さい時に利用されます。

高度な設定

ショートコードが表示されている箇所の下部に「高度な設定」という項目があります。

ここでスライダーをより細かく設定できます。スライダーのタイプによって項目も変わるので、実用的な機能のみをご紹介いたします。

例えば、次のような項目が用意されています。

• ランダム・・・チェックを入れるとスライド画像がランダムに表示される
• スライドの遅延・・・スライドの速度を調整可能（ms単位：3000ms=3秒）
• アニメーションの速度・・・アニメーションの速度を調整可能（ms単位）
• スライドの方向・・・水平 or 垂直方向から選択可能

画像の種類や設置する意図によって設定を変更いただけます。

例えば何かの説明や参照として使う場合、このような感じです。

一方、デザインやギャラリー・バナー広告などとして使う場合は次のような設定もいいかもしれません。

画像がクロスフェードして切り替わります。ランダム表示にすれば、毎回異なる画像をアピールできます。

いろいろと細かく設定できますが、不要なスライダーの削除ボタンが目立っていなかったでの、ここにメモしておきます。高度な設定の下にあるグレー文字の「DELETE SLIDESHOW」で削除可能です。

まとめ

スライドショーを設置できるWordPressプラグイン「Meta Slider」の使い方をご紹介いたしました。

スライダーに使う画像はすべて同じサイズのものを使い、スライダーの高さと幅を正確に設定すれば誰でも綺麗なスライダーがつくれます。

高度な設定も行うと幅広い使い方ができますので、ぜひ参考にご活用ください。