人気No.1超高性能スライダープラグイン【Slider Revolution】 の使い方 – 初心者のためのWordpress完全マニュアル

誰でも作れる低予算のウェブサイト作り

TUTORIAL BLOG


このブログでは、初心者でも分かりやすいよう、WORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、オススメのプラグインの紹介や使い方、SEO対策やアフィリエイトの運営方法まで、STEP BY STEPで紹介しています。

人気No.1超高性能スライダープラグイン【Slider Revolution】 の使い方

September 05, 2017

いつも【初心者のためのWordpress完全マニュアルブログ】をご覧いただきありがとうございます。
Webサイトは誰でも作れる!このブログでは、Web開発知識や経験のない初心者の方でも、ドラッグ&ドロップなどの簡単操作でできるウェブサイト作りを提案しています。

 

今回は、かなり高性能なスライダーが簡単に導入できちゃう有料プラグイン、【Slider Revolution】の使い方についてご紹介します。

なぜDIVIのデフォルトモジュールにスライダーがついているのに、わざわざプラグインを購入しないといけないんだ!!(`Д´#)

と思った方もいらっしゃることでしょう・・

正直に言います。DIVIのスライダーモジュールは最悪です笑

いや最悪という訳ではないですが、本当に基本的なスライダー機能しか搭載しておらず、カスタマイズもできません。

ちなみにこのウェブサイトのトップページにある、マウスを当てるとボックスが3Dにぐるぐる動くオシャレなランディングページもこのSlider Revolutionを使ってあります。

お値段は$25、日本円にして約3,000円ですが、このプラグインとにかくめちゃくちゃ高性能です。カスタマイズ性もかなりあり、JavaScriptの知識がなくたって、かなり高性能のスライダーが設定1つでできてしまいます。

とは言っても初心者の方にとっては、このカスタマイズというのがかなりの曲者。。正直設定が多すぎると、触る気にも慣れない。。

 

ご安心ください!

このプラグインのすごい所は、一旦購入するとサンプルのFree Premium Sliderが使い放題なのです。

詳しくはこちらをクリックして、サンプルをご覧ください。

$25でこのFree Premium Sliderというタグがついているサンプルは使い放題という素晴らしいサービスがもれなくついてきます。

あなたのやることは、この中からお気に入りを選んで、あとは画像をちょいちょいと変えて、テキストをちょいちょいと入れ替えるだけ。

もちろんこだわりのある上級者の方は、タイミングの調整や、なんなら自分のカスタムスライダーを1から作ることもできます。(トップページのスライダーは、画像とテキストを変えただけです。。すみません。。)

ランディングページはいわば、看板と同じ!
とにかくこだわればこだわるほど、訪問者の興味を惹きつけてくれますよ!!
 



 

Slider Revolutionのダウンロードとセットアップ

 

① まずはSlider Revolutionを購入しよう。

こちらをクリックして、まずはSlider Revolutionを購入画面にアクセスします。

slider revolution tutorial 1

 

Buy Nowをクリックすると下の画面の様に、アカウントの登録や、お支払い情報に進むので、必要事項を全て記入後、お好きなお支払い方法を選択して購入画面に進みます。slider revolution tutorial 1

 

② プラグインをダウンロードする。

購入が完了すると、登録したアドレスにCode Canyonというサイトからメールが届きます。My Downloadというボタンをクリックします。

slider revolution tutorial 1

 

緑のDownloadボタンをクリックすると、下の様なドロップダウンメニューが現れるので、一番上のAll Files & Documentationをクリックします。

クリックすると、自動でZipファイルがダウンロードされます。

slider revolution tutorial

 

ダウンロードが終わったら、Zipファイルを開いて、revslider.zipというファイルがあるのを確認します。このZipファイルがプラグインのファイルになります。

slider revolution tutorial

 

③ プラグインを追加する。

あとはいつのもの要領で、ダッシュボードからプラグイン>>新規追加>>プラグインのアップロードからrevslider.zipをアップロードします。

プラグインを有効化すると、左のサイドバーにSlider Revolutionという項目が追加されます。

slider revolution tutorial

Slider Revolution >> Slider Revolutionをクリックして、設定画面に行きます。

 

④ プラグインをアクティベートする。

まずは、Plugin ActivationのセクションにあるRegister Slider Revolutionをクリックして、Purchase Codeを登録します。

 

その肝心のPurchase Codeはどこにあるのかというと、先ほど届いたメールアドレスの中にあります。

下の画像の黒く塗りつぶしてある部分を全てコピーアンドペーストします。slider revolution tutorial

 

無事コードが認証されると、下の画像の様にPlugin Activatedにチェックがつき、赤から緑のボタンに変化します。slider revolution tutorial

 

これは人によって違うかもしれませんが、System Requirementsのセクションに行くと、赤いボタンでProblem Foundという表示がされています。

バツマークがついている項目の横にあるCheck Nowをクリックして、問題を解決します。

slider revolution tutorial

 

項目に全てチェックがつくと、画像の様にNo Problemsという緑の表示に変わります。

slider revolution tutorial

 

⑤ 好きなPremium Free Sliderをインストールする

スクロールアップすると、スライダーを追加するセクションが一番上にあるので、Add Slider From Templateを選択してPremium Free Sliderを追加してみましょう。

slider revolution tutorial

 

Add Slider From Templateをクリックすると、テンプレートが一覧表示されるので、好きなテンプレートを選択してください。

slider revolution tutorial

 

テンプレートをクリックすると、下の画像の様に表示されるので、Install Sliderボタンをクリックします。

slider revolution tutorial

 

Install Sliderをクリックすると、下の画面の様なポップアップウィンドウが出るので、Onlineをクリックします。

slider revolution tutorial

 

Revolution Sliderに今ダウンロードしたテンプレートが加わるので、クリックしてカスタマイズ画面に進みます。

slider revolution tutorial

 

少し長くなってしまったので、次回のブログにてスライダーレボリューションの基本的な使い方についてご紹介します^^

 

ここまでの手順で何か分からないところ等ございましたら、お気軽にコメント欄やメールにてお問い合わせください。

また、Wordpressに関して使ってみたいけど、使い方が分からないプラグインやテーマ、こんな事してみたいけどどういうプラグインを使ったらいいか分からない等のリクエストもどしどし受け付けてます!

お気軽にご連絡ください!

 

次回: 人気No.1超高性能スライダープラグイン【Slider Revolution】 の使い方 その2 〜基本操作編

この記事をシェアする!

3 Comments

  1. はじめまして。Slider Revolutionの使い方についてお尋ねしたいのですが、有料テーマに含まれていたサンプルを元にSlider Revolutionを作成しているのですが、画像が表示されると下部分から黒くグラデーションが入るので(ビネットというのでしょうか・・?)これを無効にしたいのですが、どこで設定できるか解りますか?

    サンプルはこちらを使用しています。
    https://bit.ly/2E5Wy4p

    教えて頂けましたら幸いです。

  2. こんにちは、実は外国人向けの不動産サイトを作ることになってwordpressのテーマを色々探してるとき凄いお洒落なテーマを発見したので
    即効購入したのはいいんですがそのTOP画像がSlider Revolutionで作られたスライド画像だったんです。
    初めて目にしたSlider Revolutionなんでまさか日本語の解説サイトがあるとは思ってもみなかったです。
    今悪戦苦闘の真っ最中なんで早く続き読みたく思わずコメントしてしまいました。
    続き期待していますね^^

    1. コメントいただきありがとうございます!
      しばらく本業が忙しく放置していたのですが、意外と色んな方に見ていただいているのでびっくりしています。
      また時間が空くようになってきたので、復活させたいと思います。
      今後ともよろしくお願いいたします。

コメントを残す

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

Powered by Shutterstock