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

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

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

STEP5:スライドをWebサイトに設置する

「固定ページ」「新規追加」して,⁠記事タイトル」を設定する

「固定ページ」を「新規追加」して,「記事タイトル」を設定する

「Visual Composer」「BACKEND EDITOR」に切り替える

「Visual Composer」の「BACKEND EDITOR」に切り替える

「Add Element」を押し,⁠Revolution Slider」のエレメントを選ぶ

「Add Element」を押し,「Revolution Slider」のエレメントを選ぶ

「Revolution Slider」のプルダウンを開き,先ほど作ったスライダーを選択し,⁠Save changes」ボタンを押す

「Revolution Slider」のプルダウンを開き,先ほど作ったスライダーを選択し,「Save changes」ボタンを押す

「公開」ボタンを押す

「公開」ボタンを押す

STEP6:Webサイトで見てみよう!

おつかれさまでした~!

それでは公開した固定ページを見てみましょう!

おお~!出てきますね~!

おお~!出てきますね~!

スライダーの周りの陰が気に入らない場合は,スライダー設定の「Appearance」の項目で変更できます

スライダーの周りの陰が気に入らない場合は,スライダー設定の「Appearance」の項目で変更できます

コメント欄にかぶってしまった部分は,固定ページの「Visual Composer」で,⁠Gap」のエレメントを設定して調整すればOKです

コメント欄にかぶってしまった部分は,固定ページの「Visual Composer」で,「Gap」のエレメントを設定して調整すればOKです

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

ここからは応用編です。

今度は「レイヤーにボタンを配置したスライダー」に挑戦してみましょう。

STEP1~STEP3までは基本編と一緒です。

ただし,今回は1枚のスライドのみを使いますので,STEP4以降はやらなくてOKです。

STEP4-2:レイヤーを追加する

「Edit Slide」ボタンを押す

「Edit Slide」ボタンを押す

「Transitions」プルダウンを開き,⁠Random Flat and Premium」からチェックを外し,⁠No Transition」にチェックを入れる

「Transitions」プルダウンを開き,「Random Flat and Premium」からチェックを外し,「No Transition」にチェックを入れる

「Add Layer: Image」ボタンを押す

「Add Layer: Image」ボタンを押す

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

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

「Layer General Parameters」から,

「X(座標⁠⁠」と「Y(座標⁠⁠,⁠Width」⁠Height」を設定する

「Layer General Parameters」から,「X(座標)」と「Y(座標)」,「Width」「Height」を設定する

「Layer Animation」から,⁠Start Animation」をプルダウンを開き,⁠Long from Bottom」に変更する

「Layer Animation」から,「Start Animation」をプルダウンを開き,「Long from Bottom」に変更する

「Layer Links & Advanced Params」から,⁠Image Link」「http://maiway.jp(任意のURL⁠⁠,⁠Link Open In」「New Window」を設定する

「Layer Link

「Update Slide」を押す

「Update Slide」を押す

スライダー設定の「Navigation」の項目を開き,

「Bullet Type」「Navigation Arrows」をどちらも「None」に設定する

スライダー設定の「Navigation」の項目を開き,「Bullet Type」と「Navigation Arrows」をどちらも「None」に設定する

スライダー設定の「Single Slide」の項目を開き,⁠Loop Slide」「OFF」に設定し,⁠Save Settings」を押す

スライダー設定の「Single Slide」の項目を開き,「Loop Slide」を「OFF」に設定し,「Save Settings」を押す

著者プロフィール

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

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

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

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

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


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