ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

easingslider_thum,

レスポンシブ対応画像スライダー『Easing Slider』

フルスクリーンのデザインが流行し、なおかつレスポンシブ対応必須という今の時代、マウス一つで簡単にレスポンシブ対応の画像スライダーが作れてしまう「Easing Slider」はなかなか重宝しています。

フルスクリーンのスライダーでも、スマホサイズの時は縦横比を維持したままキュッと画面幅まで縮まってくれるでスライダーが見きれることもありません。

Easing Slider

easing1

まずは、インストール。そして、有効化。

すると、WordPressの左側のメニューに「slider」という項目が現れますのでクリックすると新規追加画面・編集画面へと遷移します。

easing2

  1. スライダー新規作成
  2. スライダー画像追加
  3. 画像の設定:リンク先、タイトルテキストなどを指定できます。
  4. スライダーの設定(後述します)
  5. 保存・公開

設定を保存すれば、後は専用のショートタグを貼り付けるだけです。
スライダーIDは独自のものをいれてください。こちらはeasing slider一覧画面で取得できます。

//固定ページなど
[easingslider id="00"]

//テンプレート

スライダーの詳細設定

各画像の切り替え方法や表示時間、ナビゲーションの表示設定などが設定できます。
英語ですがなんとなく分かる箇所も多いのではないかと思います。

Dimention:スライダーサイズ

easing3

Width&Height:この設定が画像サイズと一致していないと画像の下に謎の余白ができたり、レスポンシブが上手く行かなかったりするのでご注意下さい。
Make this slider responsive:レスポンシブにするか否かです。チェックを入れておくことに越したことはありません。

Transitions:画像の切り替え

easing4

Effect:デフォルトでは「fade」か「slide」しかありません。
Duration:切り替えのエフェクトにかける時間の設定です。(画像の表示時間とは異なります)ミリ秒単位なので3秒表示は3000と入力します。

Next & Previous Arrows:前後の矢印について

easing5

Arrows:Enableが表示する、Disableが表示しないです。
onHover:矢印を表示しているときに、常に表示しておくか、マウスオンで表示するかの設定です。
Position:矢印をスライダーの内側に表示するか、外側に表示するかです。外側表示だとレスポンシブの際に矢印が画面外へでます。

Pagination Icons:ページナビゲーション

easing6

Pagination:Enableが表示する、Disableが表示しないです。
onHover:ナビゲーションを表示しているときに、常に表示しておくか、マウスオンで表示するかの設定です。
Position:ナビゲーションの表示位置です。内側、外側に加え、上部下部の左右とセンターが選べます。

Automatic Playback:自動再生

easing7

Playback:Enableが自動再生、Disableが自動再生なしです。
Pause Duration:1つの画像の表示時間です。ミリ秒単位なので3秒表示は3000と入力します。

応用編

Easing sliderを使うと、このようなちょっとおしゃれな使い方もできます。
埋め込んだスライダーに対し、絶対位置でマスク画像やテキストをかぶせると動画の上に文字をおくことができ、動きのあるサイトになります。

実際に動画を埋め込んでいるわけではないので、スマホの時もきちんと自動再生されるので安心ですね。

easing8

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

ページ上部へ戻る