無料で画像やビデオをスライドさせるMaster Sliderの解説

WordPressに簡単で綺麗なスライダーを設置できるプラグインを紹介します。
上のスライダーはプラグイン付属のサンプル画像集ですが、 画像を変更しリンク設定するだけで、商品紹介や各カテゴリーへのジャンプなどにも使えて豪華なページに仕上がりますね。
有料テーマに多いスライダーですが、この無料プラグインを入れてしまえば有料テーマを購入する魅力はなく、seoでもsns連携でも無料テーマの方が優れてるものが多いような気がします。

スポンサーリンク

Master sliderのインストール

↑ここからインストールして有効化して下さい。

メニューバーにMaster Sliderのボタンができました。
settingsはそのままで上のMaster sliderをクリック。

Master slider

下側の青いボタン +Create New Sliderをクリックします。

Master slider

好みのスライダーを選択してCreateボタンをクリック。

Master slider

Master sliderの使い方

編集したいスライダー名をクリックして編集画面を開きます。

Master slider

赤線で囲んだ部分。

  • 目のアイコン 表示の切替え。
  • Add Slide  新しいスライド画像を作ります。
  • Fillmode   画像の表示方法

↑の画像の下側のタブでVideo and Linkを開きます。

Master slider

URLの欄へ画像にリンクさせるアドレスを入力します。
隣では同じページで開くか新しいウインドウで開くかなどを選択。

Slider Settings

↑の画像の左上のタブ。

Slider Settingsについての解説です。

General Settings

Masterslider General Settings

Slider name 名前を決めます。

Slider width まずはデフォルト値で様子を見て、すき間が気になるようでしたらポストエリアの横幅を入力します。(このブログは横幅が680px)

あとは↑の画像の通りで。

Slider Transition

Masterslider Slider Transition

スライダーの動き方の設定です。

ノーマルかフェード。 横方向、縦方向。などが選べます。

Transition speedでは動く時間を設定します。
静止時間ではありません。 静止時間はSlideタブにあるSlide durationで設定します。

Navigation

Masterslider Navigation

スライドの動きや操作の設定です。 好みでどうぞ。
画像はここのスライダーの設定です。

Appearance

Masterslider Appearance

Skin では、スライダー上の矢印を変更できます。
あとはそのままで大丈夫です。

プレビューで確認、完成したら。

Masterslider

設定を何度やり直してもSave Changesを押さなければ反映されませんが、Previewでは何度でも確認できます。

完成したら[masterslider id="1"]と書かれたショートコードをペーストします。

YoutubeやVimeoをスライドさせる方法。

私は、Master sliderを使ってYoutubeをスライドさせています。

石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

これと同じもので解説すると、
Youtubeのサムネイルを680×383にリサイズしてスライドに登録します。

YoutubeのURLの書き方。

Masterslider youtube

↑の画像のようにVideo embed srcの欄へ、
//www.youtube.com/embed/ここにyoutubeの動画ID

これでスライダーでは画像だけ読み込み、クリックしてから動画を読み込むため動作が軽くなると思います。

Master sliderの裏技。Youtubeボタンに変更。

デフォルトではビデオの再生ボタンは白丸なので、これをYoutube風にカスタマイズしました。

Masterslider youtube

↑左がデフォルト。右がカスタマイズしたYoutube風です。

CSSスプライトの画像をカスタマイズ

これらのボタンはCSSスプライトとして1つの画像にまとめられてるため、変更するとなるとめんどくさいため画像を作り替えました。

skin1
light-skin-custom

↑左がデフォルト。右がカスタムです。

この右側をここからダウンロードしてから自サーバーへアップロードして下さい。

Slider SettingsSlider custom styles :からCSSを追加します。

Masterslider カスタマイズ

↑2行目の()内へアップロードした画像URLを記述。

お疲れ様でした。 これでこのブログと同じものが作れたと思います。

これでもまだ機能を追加したいと思う方には有料版のPRO版があるようです。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る