サルでき流 WordPressではじめる企業サイトの作り方

第43回 中小企業経営者さんのための企業サイト作り 実践編その③「イマドキのスライダーを使いこなす:Slider Revolution」

この記事を読むのに必要な時間:およそ 5.5 分

では,早速,⁠Slider Revolution」の管理画面に移動しましょうか。管理画面は,サイドバーのこの部分にあります。

「Revolution Slider」と逆に書いてありますが……これです

「Revolution Slider」と逆に書いてありますが……これです

ふむふむ。オシャレな雰囲気が漂っていますね。管理画面の見方は,実際に作りながら確認するとして,先に「Slider Revolution」の基本的な仕組みをお話しします。コイツは基本を理解してから画面を見たほうがわかりやすいタイプのプラグインですので。

スライダーの基本的な仕組みは,こんな感じになっています。

  • 土台になる「スライダー」
  • 1枚1枚のアイキャッチに該当する「スライド」
  • スライドの中身を構成する「レイヤー」

むむ?何やら新しい言葉が出てきました。順番に説明しますね。

まずは,土台としての「スライダー」を設定します。1枚もののアイキャッチと同じように,スライダーも場所を確保しないといけませんからね。その「土台」だと思ってください。

次に,確保した土台に対して,⁠スライド」を乗せていきます。⁠スライド」という言葉はプレゼンテーションツール等でよく使いますね。⁠3枚のスライドを1個のスライダーの中に入れる⁠⁠,そんなイメージでOKです。

最後は,スライドを構成するための「レイヤー」です。⁠レイヤー」というのは,主に画像編集系のツールで出てくる仕組みで,⁠透明なフィルム」のようなものです。⁠透明なフィルムを何枚も重ねて,1枚のスライドを作る⁠⁠,こういう感じに使います。

思ったよりも複雑でしたね……複雑ついでに,各段階で設定できることもおさえておきましょうか。せっかくですから,ね。

⁠スライダー」で設定できることは,ザックリ言うと「サイズ」です。アイキャッチの画像サイズを決めるのと同じように,スライダー全体のサイズはここで決めます。

⁠スライド」で設定できるのは,⁠スライドの背景画像」「次のスライドへの切り替え時間」「切り替えるアニメーションの種類」です。急に数が増えましたが,要は1枚ずつのスライドの基本設定ですね。

⁠レイヤー」で設定できるのは,⁠画像」「その画像に対するアニメーションの種類」です。

ここまでをまるっと例えて言うと,スライドの背景に「青空」を設定して,レイヤーに「太陽」「雲」「飛行機」を設定して,1枚のスライドを作り,⁠青空」⁠夕焼け」⁠星空」のスライドを1個のスライダーの中に設定する,と考えてください。

⁠む~なんか複雑~」と考えるより,⁠プログラミングせずに,これらが全部設定できる」と考えると,⁠Slider Revolution」のスゴさがわかるってもんです。レッツポジティブシンキング。

さて,ここまでが概念です。OKですか?ここまでわかれば,後は実際に作りながらで大丈夫です。それでは,イマドキのスライダー作り,やってみましょう!

スライダーを作ってみよう!(基本編)

まずは基本編です。

⁠画像を切り替えるスライダー」を作ってみましょう。

STEP1:スライダーを新規作成する

「Create New Slider」ボタンを押す

「Create New Slider」ボタンを押す

「Slider Title」にスライダーのタイトルを,⁠Slider Alias」にスライダーの短縮名を付けます

「Slider Title」にスライダーのタイトルを,「Slider Alias」にスライダーの短縮名を付けます

「Grid Settings」でサイズを決めます。とりあえず今回は初期設定(幅960ピクセル・高さ350ピクセル)でOKです(⁠⁠Slider Layout」「Auto Responsive」になっていますので,自動調整されます)

「Grid Settings」でサイズを決めます。とりあえず今回は初期設定(幅960ピクセル・高さ350ピクセル)でOKです(「Slider Layout」が「Auto Responsive」になっていますので,自動調整されます)

「Create Slider」ボタンを押す

「Create Slider」ボタンを押す

スライダーができました

スライダーができました

STEP2:スライドを追加する

「Edit Slides」ボタンを押す

「Edit Slides」ボタンを押す

「New Slide」ボタンを押す

「New Slide」ボタンを押す

メディアライブラリから画像を選ぶか,新規に画像をアップロードして,⁠Insert」ボタンを押す

メディアライブラリから画像を選ぶか,新規に画像をアップロードして,「Insert」ボタンを押す

スライドが追加できました。ここで選んだ画像は,スライドの背景画像として設定されます

スライドが追加できました。ここで選んだ画像は,スライドの背景画像として設定されます

STEP3:スライドの動きを設定する

「Edit Slide」ボタンを押す

「Edit Slide」ボタンを押す

「Transitions」プルダウンを開く

「Transitions」プルダウンを開く

「Random Flat and Premium」からチェックを外し,⁠Slide To Left」にチェックを入れる

「Random Flat and Premium」からチェックを外し,「Slide To Left」にチェックを入れる

「Delay」の数値を「2000」にする(単位がミリ秒ですので,スライドが切り替わる間隔が2秒になります)

「Delay」の数値を「2000」にする(単位がミリ秒ですので,スライドが切り替わる間隔が2秒になります)

「Update Slide」ボタンを押す

「Update Slide」ボタンを押す

STEP4:スライドをもう2枚追加する

STEP2とSTEP3を後2回繰り返してください

STEP2とSTEP3を後2回繰り返してください

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。