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

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

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

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

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

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

前回のおさらい

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

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

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

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



 

Slider Revolutionの基本操作

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

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

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

①　スライドの追加と削除

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

②　背景画像の変更

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

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

③　テキストの編集

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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