プラグイン – Smart Slider 3

トップページを編集する際に利用したプラグイン「Smart Slider 3」について紹介したいと思います。

 トップページのデザインについて、このところずっと思案していたのですが、「Smart Slider 3」というプラグインがあることを知り、早速試してみました。最初のうちは使い勝手がよくわからなかったのですが、色々といじっているうちに「こいつぁ~面白いんでないかい」と思うようになりました。一応次のことをクリアしたいなぁと思いながらの毎日でした。

 

1.スライドショーを表示する。

2.スライドに重ねて何か文句を表示できる。

3.特定の場所への案内ができる。

 

 早速調べて、このプラグインにたどり着いたんです。デモスライドをインポートして見ているうちに、レイヤーというものを使って、画像の上にいろいろなパーツを配置することができることが分かってきたんです。思わず「ヤッホー!」と叫んでしまいました。自分自身忘れないために簡単にメモしておこうと思います。

 

A.最初の画面(設定画面)はこのようになっています。

2017-09-19_20h13_03

①スライドショーを新規作成する。

②デモスライド集

③作成したスライドショー

④インポートしたデモスライド

 

 

 

 

 

 

 

 

 

 

それでは、スライドショーを作っていきましょう。

①の緑のパネルをクリックすると、このような画面が現れますので、スライドショーに名前を付けて作成ボタンを押します。

2017-09-18_13h59_00

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  ↓プルダウンからイメージの追加を選択します。

image

この画面でどんどん画像を追加していきます。

 

 

 

 

 

 

 

 

 

 

 

追加し終わったらこのようになります。

2017-09-19_21h14_54

⁂紫のパネルの右隣にあるパネルは特別なパネルです。画像を追加した時点ではまだ作成されていません。スライドに重ねて文句やボタンなどを配置できるパーツが保存されている場所で、このプラグインの肝ともいえるものだと思います。それでは、この「スタティックスライド」と名付けられているものを見ていきましょう。なお、各画像は摘まみ上げて順番を入れ替えることができます。

 

B.画像を追加し終わったら「スタティックスライド」を作成しましょう。これがなければ単なるスライドショーで終わってしまいます。

色々なレイヤーを駆使して動作を確認してみてください。最後にセーブボタンを押してスライドショーを保存してください。

2017-09-19_22h04_33

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  ↑スタティックスライドの編集画面

 

◎初めのうちは画像にどのようにパーツを被せるのか分からなかったのですが、インポートしたデモスライドを弄っているうちに「あっ、そうなんだ」と急に得心がいきました。文章をスクロールさせるには、テキストレイヤーにタグを書けばすみます。タグの生成については下記のサイトで時々遊んでいます。参考になさってください。

・タグの部屋

・みやけ工房

 

C.その他の画面

2017-09-19_04h11_53

 

 

 

 

 

 

  ↑投稿ページに埋め込むショートコードです。

 

2017-09-18_14h52_34

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  ↑スライドショー周りの設定

 

はなはだ簡単ではありますが以上で終わります。

コメントを残す

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