![](https://cxg-design.jp/wp-content/uploads/2023/12/52aed89a0114180197b0b28715c54394.png)
SmartSliderで全面モーション付きのスライダーを作成
以前にも紹介したSmartSlider3ですが、今回はPro版の機能を一部紹介いたします。
無料版のSmartSlider3は全面スライダーはできませんでしたが、有料のPro版では、選択できます。また、文字などに、フェードインなどのモーションをつけることができます。文字を入れる場合はテキスト入力し、レスポンシブレイアウトで見せるようにします。今回のDEMOはバイクの詳細ページを元に作成しました(モーションが付くので動くものをテーマに)。
メインは2カラムで左にスライダー、右にアコーディオンで詳細情報を載せました。アコーディオンにすることで見た目がすっきりするので、情報が多い場合よく使用します。今回は、数が多いので、まとめて管理できる「Easy Accordion」というプラグインを使用しました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/6aa1d348a61d7a58c89cd975d600533e.png)
出典 : Easy Accordion
ファイルを新規グループを作成し、アコーディオンを必要数作成。テーブルは、ブロックエディターで作成したものをコピペしました。スタイルを設定画面下の部分で設定すれば簡単にシンプルなアコーディオンが作成できます。
![](https://cxg-design.jp/wp-content/uploads/2023/12/87a16e8c67e15ff9d3fbb70fcd4379b3.png)
「Description」の「テキスト」にコードをコピペ
![](https://cxg-design.jp/wp-content/uploads/2023/12/0231444891df7841401a04d44c1832d7.png)
「TYPOGRAPHY」で文字の色やサイズの設定
ギャラリーは、プラグイン「Modula」を使用しました。
6枚写真を選択し、「Gallery Type」を「Masonry」に設定します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/756995b1c5e7b076fcf30989064617f1.png)
写真を選択し「Gallery Type」を「Masonry」に設定
では本題です。今回のデモではバイクと見出し、テキストをPC、SPでレイアウト変更するため、背景の上にカラムを設置しました。今回は、「レイアウト」から「全画面」を指定します。背景写真をスライドページとして設定していきます。
![](https://cxg-design.jp/wp-content/uploads/2023/12/f9f00232716d8c2a0e99f8407941ee2b.png)
「レイアウト」を「全画面」に指定
![](https://cxg-design.jp/wp-content/uploads/2023/12/f380625186fa8d979ab64823b2fb3a6f.png)
バックの写真を指定
では、スライドの設定をしていきます。まず1枚目のスライドをクリックし、編集画面に移行します。
まず、「見出し」をクリックし、「コンテンツ」で型番を入力します。「スタイル」でフォントの種類とポイント数を指定します。次に左のサイドバーから「テキスト」を選択し、キャプションを入力します。最後に「画像」をクリックし、バイクの透明背景画像を選択します。すべて、左右中央揃えになっていれば完了です。
![](https://cxg-design.jp/wp-content/uploads/2023/12/0987824b3dd6a2a7872e774f714ba90d.png)
「見出し」をクリックし「コンテンツ」で入力。「スタイル」でサイズ、フォントを設定。
![](https://cxg-design.jp/wp-content/uploads/2023/12/cd59bac3107842c46f951f11c9ae8655.png)
「テキスト」をクリックし「コンテンツ」で入力。
![](https://cxg-design.jp/wp-content/uploads/2023/12/c4b5677ef4acad876b93616a678b2769.png)
「画像」をクリックし、バイク画像を選択。ビジュアルの完成
次に2枚目のスライドをクリックし、編集画面に移行します。左のサイドメニューの一番下の「行」をクリックします。すると編集画面の上にブロックエディターでいう2カラムが設置されます。左にバイクの写真、右に見出し、テキストを入れて、文字ポイントを調整します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/98783a367340b1edcede924ef7380692.png)
左サイドの「行」をクリック。70% : 30%の比率にする。
![](https://cxg-design.jp/wp-content/uploads/2023/12/6e86e5d86ea51ef14adb8ad992eddbe2.png)
左に画像、右に見出しとテキストを配置。
3枚目は2枚目と文字、画像を左右反対に設置します。これで、文字と写真の設定は終了です。プレビューを確認しOKならモーションを付けていきます。
![](https://cxg-design.jp/wp-content/uploads/2023/12/d7ab57b52ff34d0ae8dd15f1d9c35241.png)
左に見出しとテキスト、右に画像を配置。
もう一度1枚目の写真をクリックし、編集画面に移動します。まずバイクの写真をクリックします。「アニメーション」から「フェード」を選択します。下のフェードタブをクリックし、オフセットのXに「100」を入力します。次に見出しをクリックし、同じようにフェード、を選択し、オフセットの数値をX「50」にします。テキストはオフセットX「-50」に設定します。これでモーションの完成です。同じように他の2枚も設定します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/8466ed396c87da573063027de931764a.png)
バイク画像を選択し、画像アニメーション>フェードをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/f93118e6cfc35d887c043e249ceb0658.png)
「オフセット」を「100」に設定。同様に、見出しは「50」、テキストは「-50」に設定。
SmartSlider Pro版の一部を紹介しました。他にもいろいろなモーションをつけることができ、また、カルーセルやショーケースといったスライダーも使用することができます。いろいろな場面で使用できそうなので、紹介していきたいと思います。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。