初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

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

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

September 06, 2017 / 4 Comment / 12 views

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

 

今回のチュートリアルでは、高性能なスライダーが簡単に導入できちゃう有料プラグイン、【Slider Revolution】の使い方を、2回にわたってご紹介します。

前回は、Slider Revolutionのダウンロードの仕方とプラグインの初期設定についてご紹介しましたが、いかがだったでしょうか? 今回は実際に、Premium Free Templateを使って、ざっとではありますが使い方についてご紹介して行きたいと思います。

というのも、テンプレートによって操作方法が結構違ったりするので。。もちろん全部作り変えたり、ビデオスライダーを1から作ってみたりなど高性能なカスタマイズ性がこのプラグインの良いところですが、それはみなさんの探究心とレベル次第ということで^^;

 

このチュートリアルは初心者の方でも作れるウェブサイトを目標としているので、今回はテンプレートのテキストと画像を自分の物と入れ替えて、実際にウェブサイトに使えるレベルまで持ってくるということを最終ゴールとします。

安心してください。テンプレートでもかなりかっこいいスライドが仕上がりますよ!ちなみにお恥ずかしい話、このホームページのトップページで使っているSlider revolutionも元のテンプレートの画像と文字を入れ替えただけです笑 自分で言うのも何ですけど、なかなかかっこいいでしょ?(もう一度言いますが、画像を入れ替えただけです)

前回のおさらい

 

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

Slider Revolutionサンプル: https://revolution.themepunch.com/examples/

Slider Revolutionの購入: https://wpbeginnertutorial.com/slider_revolution

※購入の仕方とダウンロードの仕方については、その1で詳しく説明しています。
 



 

Slider Revolutionの基本操作

 

まずは、ダッシュボード>>Slider Revolution>> Slider Revolutionをクリックします。

slider revolution tutorial2

 

今回のデモではWebsite Intro Sliderと言うFree Premium Sliderを使ってみます。Free Premium Sliderのダウンロードの仕方については、前回説明したので、今回は省略します。

使いたいFree Premium Sliderを選択してダウンロードすると、以下の画像のようにリストに加わるので、早速クリックしてカスタマイズしていきたいと思います。

slider revolution tutorial2

 

① スライドの追加と削除

デフォルトでは、スライドショーが3枚になっていますが、下の赤太枠で囲んでいるDeleteをクリックすると、スライドショーを削除することもできます。また、Duplicateをクリックすると、スライドショーを複製することができます。

slider revolution tutorial3

 

② 背景画像の変更

Main Background >> Media Libraryをクリックすると、スライドショーの背景画像を変更することができます。画像は、Shutter Stockや無料ストック画像の中ではなかなかハイクオリティなPexelsから画像をダウンロードしてもいいですし、もちろん会社や自社商品の写真を使っていただくのも大いにありです!ただ、なんども言いますが、特にトップ画像には、高画質・高品質な画像を使用してください。画像はウェブサイトのイメージの大半を占めると言っても過言じゃありませんよ!!画像を選びには時間をたくさんかけてくださいね^^slider revolution tutorial4

 

スクロールダウンすると、画像が変更されたのが確認できます。このたくさん背景画像に重なっているグレイの透明のボックスは、このPremiumテーマに使われているモーショエフェクトのために、画像をクロップする場所を示しています。特に触らなくていいと思いますが、こだわりがある人は大きさや数、また位置を変更することもできます。

slider revolution tutorial2

 

③ テキストの編集

編集したいテキストボックスをクリックすると、黒い半透明のボックスが現れて、文字を変更することができます。試しにWelcom To Our Websiteと打ってみます。

slider revolution tutorial2

 

また赤太枠で囲まれているセクションで、フォントサイズやフォントの種類、色など細かな設定をすることができます。

slider revolution tutorial2

 

さらにStyleと言う水色のアイコンの隣にある^ボタンをクリックすると、赤太枠で囲まれたセクションが現れます。ここで、

さらに細かな設定を行うことができます。例えば、テキストの背景を設定したり、CSSを加えたい方は、Adbanced CSSで自分のカスタムCSSを設定することもできます。

slider revolution tutorial2

 

この調子で、次のテキストボックスも変更していきます。テキスト編集画面の中にある<br />と言うタグは、改行を表します。改行を入れたいところには、この<br />タグをコピーアンドペーストして、挿入してください。slider revolution tutorial2

 

ボタンのカスタマイズもテキストのカスタマイズと同じ要領で、作成できます。ボタンの色は、下の画像のようにBackgroundのタブをクリックすると変更できます。また、下画像内の赤太枠のHoverをクリックすると、ホバー後のボタンをカスタマイズすることもできます。

slider revolution tutorial2

 

さらに赤太枠で囲ってあるデバイスを選択すると、レスポンシブデザインとしてデバイス毎の設定を行うことができます。このプラグインの改善点としてちょっと文句を言わせていただくと、パソコン用にデザインを変更したはいいものの、デバイスを変更した際に、デザイン変更が反映されていないことが多々あります。なので、必ずチェックするようにしたほうがいいと思います。例えば今回でいうと、文字の色を黄色に変えたのに、タブレット用のデザインをチェックすると、文字の色が白のままだったので、マニュアルで変更し直しました。(改善願う!)

slider revolution tutorial2

Add Layerというアイコンをクリックすると、ボタンやテキストなどの新しいレイヤーをスライドに加えることができます。

slider revolution tutorial2

 

ただし注意点として、iMovieなどの動画編集ソフトを使ったことがある人は理解が早いかもしれませんが、全てのレイヤーは下のように全て出現時間が細かく設定されています。なので、Premiumテンプレートを使って、マニュアルでレイヤーを加えた場合は、スクロールダウンして、新しく追加したレイヤーのタイミングを変更するのを忘れないようにしてくださいね。

例えば、新しくボタンをレイヤーに加えたとして、出現タイミングを変更しなかった場合、他のテキストや画像など後から現れるのに、ボタンだけ最初からスライドショーに出現するという謎なスライドショーが出来上がっちゃいます笑

ちなみにタイムラインの変更は、下の画像のように変更したいアイコンをドラッグするとグレイから赤にアイコンの色が変わるので、あとは移動させる位置でドロップするだけです!

slider revolution tutorial2

 

変更が完了したら、Save Slideをクリックして保存します。

slider revolution tutorial2

④ ショートコードを埋め込む

まずは、Slider Settingsタブをクリックして、ショートコードを取得します。

 

セクション2、Slider Title&ShortCodeにある、赤太枠で囲んであるところにあるコードを全てコピーします。

slider-demo2-10

 

あとは貼り付けたいところに、ペーストするだけ!

DIVIを使用している方は、ビジュアルビルダーを立ち上げたあと、新規セクション(通常でもフルワイドでもどちらでも)を作成して、テキストモジュールを挿入して、コンテンツの欄にそのままショートコードを貼り付けてください。

 

また、3と4のセクションではスライダーのタイプや、スライダーの表示される大きさの設定を変更できます。補足しておくと、Full-widthとは、横のみスクリーンいっぱいに表示されるのに対して、 Full-Screenとは、縦横共にスクリーンいっぱいに表示されるという意味です。slider-demo2-10

 

まとめ

 

最初に説明した通り、このプラグインはかなり高性能です。使いこもうと思ったら、初心者にはかなりハードルが高いプラグインだと思います。ですが、背景画像やテキストを変えるだけのシンプルなカスタマイズでも、十分ハイクオリティなスライドショーが作れると思います。

またスライドショーだけではなく、Youtubeとリンクさせて自分の動画をレボルバーのように表示させたりすることも可能です。

今回はざっくりとした説明しかできませんでしたが、またどこかで紹介することがあるかもしれません^^

また英語ではありますが、購入から1年以内でしたら、この開発会社からのフルサポートが受けられます。もしわからないことやトラブルなどあって連絡すると、大体1日以内には返信してきます。

 

いつものようにわからないことや質問などありましたら、コメント欄やメール等にてお気軽にご連絡ください。また今回のプラグインに対しての他のテンプレートのデモリクエスト、また他のプラグイン・テーマについてのチュートリアルリクエストも募集しています^^

それではまた次回! See you later<3

 

この記事をシェアする!

4 Comments

  1. 参考にさせていただいております。

    このスライダーをホームページのトップのヘッダーに
    設定するにはどうしたらいいのでしょうか?

    このような感じです:
    https://www.themepunch.com/

    宜しくお願いいたします。

    1. ショートコードを使用したい箇所に埋め込む必要があります。ショートコードは、作成したスライダーの作業画面にあるSlider Settingのセクション2にある[]で囲まれている部分をコピーアンドーペースとして取得できます。埋め込み方法はビルダーにもよりますが、もしDiviを使用されていましたら、テキストモジュールを使ってください。

  2. はじめまして。度々失礼します。。以前にも質問したのですが、お返事を頂けてなかったので・・・
    Slider Revolutionの使い方、参考にさせて頂いております。

    この↓サイトにあるSlider Revolutionのサンプルを使用しているのですが、
    https://bit.ly/2E5Wy4p
    スライドが始まると画像の下部分が黒っぽくグラデーションが掛かる(ビネット効果?)のですが、この設定はどこで出来るか
    教えて頂くけないでしょうか・・・?

    宜しくお願いいたします。

  3. main backgroundの写真の位置を下に移動したいのですが…
    見せたいところが上で切れてしまいます。
    しかも、スマホで見ると遮るものがあって、見えません。

コメントを残す

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