Meta Slider の設定と使い方

  • LINEで送る

Meta Slider の設定

Meta Slider は、最も人気のある WordPress のプラグインの一つで、早く・簡単にスライドショーを作成することができます。WordPress メディアライブラリーから、スライドキャプション、リンク、SEO等をセットで、画像を選んでページにドラッグ&ドロップするだけです。 Flex Slider, Nivo Slider, Responsive Slider & Coin Sliderの4つの異なるスライダーから選ぶことができます。そして、提供されたショートコードをコピー&ペーストでブログに簡単に表示することが出来ます。

設定の方法

  1. Meta Slider のインストール
  2. Meta Slider の設定

以下のものが含まれています

  • Flex Slider 2 – Responsive, 2 transition effects, carousel mode
  • Nivo Slider   – Responsive, 16 transition effects, 4 themes
  • Responsive Sliders – Responsive & light weight
  • Coin Slider   – 4 transition effects

機  能

  • 単純で使いやすいインターフェース
  • レスポンシブ対応で SEO が最適化されたスライダーを数秒で作成することが出来ます
  • 全幅(ぜんはば)スライダー
  • 画像をドラッグ&ドロップで簡単設定
  • 管理画面でプレビューが可能
  • 高度なイメージを作成する
  • ウィジェットにショートコードを貼り付けるだけで作成できる
  • スライドショーごとにトランジション・エフェクト、スピードなどのオプションもあります
  • 複数のサイトも互換性を持ちます
  • ライトボックスは Meta Slider Lightbox addon にサポートされています

など、ほかにも機能があります。

詳しくは以下のリンクで、

1. Meta Slider のインストール

WordPress の管理画面にアクセスして、左メニューの「プラグイン」の「新規追加」をクリックします。

「プラグインの追加」画面の「プラグインの検索」のテキストエリアに、プラグイン名を入力します。

add-ner-plugin-youyou-wordpress

テキストエリアに「Meta Slider」と入力して、「ENTER」キーを押すと、プラグインの一覧のトップに「Meta Slider」が表示されます。

meta-slider-youyou-wordpress

この「Meta Slider」に「今すぐインストール」ボタンがあります。

meta-slider-install-now-youyou-wordpress

その「今すぐインストール」ボタンをクリックします。 直ぐに、プラグインのインストールが始まります。 インストールが完了すると「有効化」ボタンに変わります。

meta-slider-%e6%9c%89%e5%8a%b9%e5%8c%96%e3%83%9c%e3%82%bf%e3%83%b3-youyou-wordpress
「有効化」ボタンをクリックします。 するとすぐに、プラグインが有効化します。

meta-slidr-%e6%9c%89%e5%8a%b9%e5%8c%96-youyou-wordpress

プラグインが有効化されると、管理画面の左メニューにプラグイン「Meta Slider」が追加されました。

これで、プラグイン「Meta Slider」のインストールが完了しました。

2. Meta Slider の設定

早速、スライダーを作成してみます。 管理画面の左メニューの「Meta Slider」をクリックします。

meta-slider-add-fierst-youyou-wordpress

すると「最初のスライドショーを作成」画面が表示されます。 それでは、「最初のスライドショーを作成」をクリックしてスライドショーを作成します。

2-1. Flex Slider の設定

最初のスライドショーを作成は、「Flex Slider」の設定をします。

meta-slider-flex-slider-youyou-wordpress

まず、「Flex Slider」を作成してみます。 それでは、「スライドを追加」ボタンをクリックして、画像を選択します。

「メディアライブラリ」から選択するか、ファイルから選択します。 まだ、画像が「メディアライブラリ」にないので、ファイルから選択します。

meta-slider-make-slider-1-youyou-wordpress

数枚の画像を選択しました。 右側にスライドショーの設定するメニューがあります。 取りあえずデフォルトの設定のまま、「保存してプレビュー」ボタンをクリックしてみます。 ちなみに、「Flex Slider」 には、「フェード」と「スライダー」の 2種類の 「effects (効果)」があります。

meta-slider-flex-slider-previwer-youyou-wordpress

ポップアップ画面が表示されて、スライドショーを確認することが出来ます。

確認後、「保存」ボタンをクリックして保存します。 次に右メニューの下部にショートコードが表示されるので、それをコピーして投稿または固定ページに貼り付けます。

 

これが実際の画面になります。 これで、「Flex Slider」の設定することが出来ました。

 

2-2. Nivo Slider の設定

次は、「Nivo Slider」の設定をします。 新しいスライドショーを作成するには、「新規スライダー」の「+ 」をクリックします。

そして、新たに画像を「メディアライブラリー」あるいは「ファイル」から選択します。

meta-slider-nivo-slider-webvarious-wordpress

そして右メニューの設定をします。

meta-slider-nivo-slider-01-webvarious-wordpress

 

特に「effects (効果)」のドロップダウンメニュー(16種類)から、ひとつづつ効果を「プレビュー」で確かめながら設定をします。

確認後「保存」ボタンをクリックして保存します。 そして、ショートコードをコピーして投稿または固定ページにペーストします。

これで、「Nivo Slider」の設定が完了しました。

 

2-3. Responsive Sliders の設定

次は、「Responsive Sliders」の設定をします。 今回も「新規スライダー」の「+ 」をクリックします。

そして、「R, Sliders」(Responsive Sliders) ボタンをクリックします。

meta-slider-responsive-slider-youyou-wordpress

そして、「スライダーを追加」をクリックして画像を選択します。

meta-slider-responsive-slider-01-youyou-wordpress

その後、「保存」をしてショートコードをコピーして、投稿または固定ページにペーストします。

なを、「Responsive Sliders」の場合は「effect(効果)」は「フェード」の1種類です。

 

2-4. Coin Slider の設定

それでは、最後の「Coin Slider」の設定をします。 こちらも、同じような設定です。

「新規スライダー」と「+ 」をクリックしてスライダーを追加します。 その後「Coin Slider」をクリックして「スライダーを追加」ぼたんをクリックして画像を選択します。

meta-slider-coin-slider-youyou-wordpress

任意の画像を選んだら、右側のメニューから項目を選択して、好みの設定をします。

meta-slider-coin-slider-101-youyou-wordpress

「幅」「高さ」を設定した後「効果(effects)」は4種類の中から選びます。 その他の設定も好みの設定してください。

設定が終わりましたら、ショートコードをコピーして投稿または、固定ページにペーストします。

 

これで、「Coin Slider」の設定終わりです。  投稿・固定ページのみならず、ウィジェットにも設定して思い通りにカスタマイズして下さい。

尚、「高度な設定」は、js/CSS の知識がある方は、お好みの設定をして下さい。

SNSでもご購読できます。