に簡単で綺麗なスライダーを設置できるプラグインを紹介します。
上のスライダーはプラグイン付属のサンプル画像集ですが、 画像を変更しリンク設定するだけで、商品紹介や各カテゴリーへのジャンプなどにも使えて豪華なページに仕上がりますね。
有料テーマに多いスライダーですが、この無料プラグインを入れてしまえば有料テーマを購入する魅力はなく、seoでもsns連携でも無料テーマの方が優れてるものが多いような気がします。
Master sliderのインストール
↑ここからインストールして有効化して下さい。
メニューバーにMaster Sliderのボタンができました。
settingsはそのままで上のMaster sliderをクリック。
下側の青いボタン +Create New Sliderをクリックします。
好みのスライダーを選択してCreateボタンをクリック。
Master sliderの使い方
編集したいスライダー名をクリックして編集画面を開きます。
赤線で囲んだ部分。
- 目のアイコン 表示の切替え。
- Add Slide 新しいスライド画像を作ります。
- Fillmode 画像の表示方法
↑の画像の下側のタブでVideo and Linkを開きます。
URLの欄へ画像にリンクさせるアドレスを入力します。
隣では同じページで開くか新しいウインドウで開くかなどを選択。
Slider Settings
↑の画像の左上のタブ。
Slider Settingsについての解説です。
General Settings
Slider name 名前を決めます。
Slider width まずはデフォルト値で様子を見て、すき間が気になるようでしたらポストエリアの横幅を入力します。（このブログは横幅が680px）
あとは↑の画像の通りで。
Slider Transition
スライダーの動き方の設定です。
ノーマルかフェード。 横方向、縦方向。などが選べます。
Transition speedでは動く時間を設定します。
静止時間ではありません。 静止時間はSlideタブにあるSlide durationで設定します。
Navigation
スライドの動きや操作の設定です。 好みでどうぞ。
画像はここのスライダーの設定です。
Appearance
Skin では、スライダー上の矢印を変更できます。
あとはそのままで大丈夫です。
プレビューで確認、完成したら。
設定を何度やり直してもSave Changesを押さなければ反映されませんが、Previewでは何度でも確認できます。
完成したら［masterslider id="1"］と書かれたショートコードをペーストします。
YoutubeやVimeoをスライドさせる方法。
私は、Master sliderを使ってYoutubeをスライドさせています。
これと同じもので解説すると、
Youtubeのサムネイルを680×383にリサイズしてスライドに登録します。
YoutubeのURLの書き方。
↑の画像のようにVideo embed srcの欄へ、
//www.youtube.com/embed/ここにyoutubeの動画ID
これでスライダーでは画像だけ読み込み、クリックしてから動画を読み込むため動作が軽くなると思います。
Master sliderの裏技。Youtubeボタンに変更。
デフォルトではビデオの再生ボタンは白丸なので、これをYoutube風にカスタマイズしました。
↑左がデフォルト。右がカスタマイズしたYoutube風です。
CSSスプライトの画像をカスタマイズ
これらのボタンはCSSスプライトとして１つの画像にまとめられてるため、変更するとなるとめんどくさいため画像を作り替えました。
 |
 |
↑左がデフォルト。右がカスタムです。
この右側をここからダウンロードしてから自サーバーへアップロードして下さい。
Slider SettingsのSlider custom styles :からCSSを追加します。
.ms-skin-default .ms-slide .ms-slide-vpbtn, .ms-skin-default .ms-video-btn {
background: url(ここに画像URL)no-repeat 0px -150px;
width: 80px;
height: 56px;
left: 48%;
}
↑2行目の（）内へアップロードした画像URLを記述。
お疲れ様でした。 これでこのブログと同じものが作れたと思います。
これでもまだ機能を追加したいと思う方には有料版のPRO版があるようです。