超高性能スライダープラグイン【Slider Revolution】


どうも!すんです。

さて、今回はプラグインの紹介です。
超高性能で優秀なスライダープラグイン
【Slider Revolution】について!です。

価格は「$18」。日本円でだいたい2,100円ちょっと。(2014年11月20日現在)
販売元は「codecanyon」です。

購入について。↓
image1
http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380?ref=wdlny

まずは上記URLにアクセス!販売元のページに飛びます。
そして「Purchase(購入)」をクリック!

…そうなんです。もうすでにお気づきだとは思いますが販売元のサイト。全部英語で書かれています。

ということで購入に関しては…
「Google翻訳」に助けてもらってください。(他人任せ)

私は!このプラグインの凄さと使い方について!だけ!ここに記していきたいと思います。

では、機能面の特徴についてまずはざっくりと。

1.レスポンシブ対応のスライダーです!
2.アニメーションの種類がたくさん!
3.直感的な操作で制作可能!スライダーの制作が超簡単!
4.CSSで、スライダーごとに文字や画像の装飾が可能!

めちゃくちゃざっくり、ピックアップして書き出してみましたがどうでしょう。
とりあえず、超簡単に超高性能なスライダーがつくれる超すごいプラグイン!!!
だということはお分かりいただけたかと思います。

確実に価格以上の仕事をしてくれるプラグインだと、実際に使ってみて私は思いました。

Slider Revolutionの設定画面はこちら!↓
image2

主に使うのはこれ!
「Create New Slider」…新しいスライダーを作成します。何個でも作れますよ!
「Setting」…スライダー全体の設定を行います。
「Edit Slides」…スライダーの中の1枚1枚の画像の追加や編集を行います。

もちろんここも英語。です。

ですがみなさん安心してください!このスライダー、だいたい初期設定のままで
全然問題なく、高機能なスライダーが制作できます。

…私にも作れたので、大丈夫ですよ皆さん。

【1.レスポンシブ対応のスライダーです!】

ここからは機能面の特徴について詳しく!使い方含め紹介していきます。

レスポンシブ対応のスライダー。これはかなり嬉しい機能ですね。
最近はサイトを作る上でもうレスポンシブは必須!!そんな時代です。

では、スライダーを作成してみましょう。
「Create New Slider」をクリック!

image4

まず、スライダーの名前をつけます。
今回は「slider2」とつけて作成してみましょう。

「Slider Title」に「slider2」と入力。その下の
「Slider Alias」にも同じように「slider2」と入力します。

そしてそして「Slider Layout」部分。
はじめから「Auto Responsive」にチェックが入っていますね!!!
オートレスポンシブ。初期設定のまま、いじらずにレスポンシブ対応のスライダーになっちゃうんです。

なので、スライダーの名前をつけるだけ。

名前を付けたら、画面下部の「Create Slider」をクリック!
これでレスポンシブ対応のスライダーの土台が完成しました。

【2.アニメーションの種類がたくさん!】

次は、スライダーの編集をしていきましょう。
スライドさせる画像の設定、アニメーションの設定、文字の装飾を行います。

image5

↑作ったスライダー「slider2」の「Edit Slides」をクリックします。

image6

↑すると、このような画面が。
まだスライダーの中身のスライドが一つもない状態なので、
「New Slide」 をクリックし、新しいスライドを作っていきます。

「New Slide」をクリックするとファイルのアップロード画面に飛ぶので、
スライドさせたい画像を選択し、アップロードしてください。

image7

↑アップロードが完了すると、このようにスライドが生成されます。
複数スライドを作りたい方は、同じ要領でスライドを追加してください。

では、スライドの編集にうつります。「Edit Slide」をクリックします。

image8

な、な、長い…
英語だらけの、というか英語しかない恐ろしいページが現れましたね…

ですが、ここもほとんど初期設定のままで大丈夫!!!いじるところは少しだけです。

アニメーションの設定。やっちゃいましょう!!!

image9

なんと53種類のアニメーションが…!!(数えました)(間違ってたらごめんなさい)
3Dのアニメーションもあるので、皆さん色々試してみてはいかがでしょうか。

ちなみに私のおすすめは、「Random Flat and Premium」です。
色々なアニメーションがランダムで表示されるので、面白いですよー!!!

ちなみにそんなアニメーションがいっぱいのSlider Revolutionのスライダーのデモは、
こちらで見る事が出来ます!(http://themepunch.com/revolution/)

【3.直感的な操作で制作可能!スライダーの制作が超簡単!】

これだけでも、もう十分高性能で超すごいスライダーができてしまうんですが、
スライドに文字とか、載せたいですよね?
さらにはその文字もアニメーションで動かしちゃったりしたいですよね?

ということで次は、
スライドに文字や画像、載せてみましょう。動かしてみましょう。

先ほどのながーーーーい英語だらけの画面の、だいたい中央部分。

image10

このあたりをいじっていきます。

まずは、「Background Position」部分。
この設定は、先ほど設定したスライドの画像の、どの部分を基準にするかという設定です。

「center center」に設定しておくと、画像の中央部分が基準になるので
基本的には「center center」にしておけば間違いないと思います。

そしてそして、

「Add Layer」…スライドにレイヤーを追加します。(文字をのせたい場合はこれ!)
「Add Layer:Image」…画像をのせたい場合はこれ!
「Add Layer:Video」…動画を載せたい場合はこれ!

いやー、動画もスライドに組み込めちゃうんですね…すごい。

今回は、文字について詳しく説明していきます。

「Add Layer」をクリックしてみましょう。

image11

「Caption Text1」という文字が現れました!

この出てきた文字を、のせたい文字に変更してみましょう。
「Slider Revolution」に変更してみます。

そして、「style」部分。ここでは文字のスタイルを変更できます。
このスタイルも種類が豊富!!!ドロップシャドウがついているものや、背景がついているものなど。
もちろん、この「style」の中で自分で色やサイズ、フォントの種類を変えることもできますよー!

今回は、私の独断と偏見で「large_bg_black」を選んでみます!

image12

↑こんな感じになります!

「Align,Position&Styling」部分で、レイヤーの位置を調節することができます。
Offset Xを0に、Offset Yを0にすると、画面中央に配置する事が出来ます。

しかも!!!
このスライダー、配置した文字をドラック&ドロップで、好きな位置に動かす事も
できちゃうんです!!!

直感的な操作で、自由に配置できてしまいます。
なんなんだこのスライダー…凄すぎる…

次は文字のアニメーション!!
これ、初期画面では設定場所が隠れちゃってるんです。

「Layer Animation」、探してクリックしてみてください。
クリックすると、設定場所が表示されます。

image13
↑こんなかんじ!
出てきた時のアニメーションの設定項目で、ここ設定すれば大丈夫!!という項目
「Start Animation」…アニメーションを選んでください。(いっぱいあります)
「Start Easing」…イージングも選べちゃいます。(見本がでてきますよ)
「Start Duration」…アニメーションに使う時間を設定できます。

消える時のアニメーションの設定項目で、ここ設定すれば大丈夫!!という項目
「End Animation」…アニメーションを選んでください。(いっぱいあります)
「End Easing」…イージングも選べちゃいます。(見本がでてきますよ)
「End Duration」…アニメーションに使う時間を設定できます。

アニメーションもイージングも、色々種類があるので
色々試してみると面白いですよー!!

ここまで設定が終わったら、皆さん!忘れずに画面下部の
「Update Slide」押してくださいね!!保存です保存!!

image14

保存しないまま別の画面に移動してしまわないように!!
(私は2、3回やりました)

【4.CSSで、スライダーごとに文字や画像の装飾が可能!】

さて、最後の項目です。
これは少し上級者向け、かもしれません。

レイヤーを追加して文字をスライドにのせ、
スタイルも画面上で変更する事ができましたが、

「スタイルの中に自分好みのやつ、ないんだけど」
「もっと自分が好きなようにしたい!!!」

という方は、この方法をお試しください!!

image15

まず、「Setting」をクリック。

image16

ページのいっちばん下!
「CSS / JavaScript」をクリックすると…

image17

このように、CSSとJavaScriptの追加が可能になります!

スライダーに追加したレイヤー(文字や画像)のclassをうまく利用して、
CSSでカスタマイズしてみてください!

実際にスライダーをWordPressサイトに貼りたいときは、
ショートコードをページに貼るだけ!!!

例えば、今回はスライダーの名前を「slider2」にしましたね。
その場合はショートコードは[slider2]になります。

いかかでしたか?
誤字脱字等、ありましたらぜひ見逃してくださいm(_ _)m

今回紹介したSlider Revolution。
まだまだすばらしい機能が沢山あります。

xmlでインポート / エクスポートできたり、

プラグインのフォルダの「documentation」フォルダの中に
HTML 形式のマニュアル(全て英語)が入っていたり、

先ほどもちょこっとだけ紹介しましたが、スライドに動画を埋め込めたりなどなど。

使いながら「これはやばい…!!!」
っていう機能を見つけたら、また記事にしたいと思います。

「超高性能スライダープラグイン【Slider Revolution】」への2件のフィードバック

  1. 初めまして。中城と申します。
    RevolutionSliderの使い方を検索したら行き着きました。
    もしご存じであれば教えて頂きたいのですが、コンテンツ中程にスライダーを
    設置した場合、そのページが表示された瞬間にアニメーションがはじまり
    コンテンツ中程に行き着いたときにはアニメーションが終わってしまいます。
    スクロールしスライダーのコンテンツが画面に表示されたタイミングで
    アニメーションをスタートさせる方法はありますでしょうか?
    ご存じであれば教えてください。
    よろしくお願い致します。

    1. 初めまして!記事投稿者の村上と申します。
      コメント有り難うございます!

      ページが表示された瞬間にコンテンツ中程に設置したスライダーのアニメーションが始まってしまう、という事ですが、これはRevolutionSliderの各スライダーのSettings画面内にあります「General Settings」内の「Lazy Load」をOnにすることで解決できるかと思います。
      「Lazy Load」をOnにすることで現在見えている画面(可視領域)に表示されるべき画像だけがロードされるようになるので、ページ中程のスライダーに関しても可視領域に入ってからアニメーションがスタートするようになると思います。

コメントを残す

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

*