スライダーのスマホ別設定(PC とスマホで枚数や矢印を変える)

スライダーのスマホ別設定(サンプル)

スライダーブロックの設定は、初期状態では PC もスマホも共通です。サイドバーの「スマホ(767px 以下)」パネルで「スマホでは別の設定を使う」をオンにすると、767px 以下の画面だけ、同時に表示する枚数・自動再生・矢印・ドット(メディアスライダーではサムネイル、ロゴスライダーでは 1 枚あたりの幅と流れるスピード)を別に設定できます。shitate pro blocks 1.8.3 で追加されました。

実際の表示

このマニュアルは shitate pro blocks が動いているサイト上にあるので、次のスライダーは画像ではなく本物のブロックです。PC では 2.5 枚、スマホ(767px 以下)では 1.5 枚で表示する設定にしてあります。ブラウザーの幅を変えると枚数が切り替わります。

  • スライド 1

  • スライド 2

  • スライド 3

  • スライド 4

  • スライド 5

設定方法

  1. スライダーブロックを選択し、サイドバーの「スマホ(767px 以下)」パネルを開きます
  2. 「スマホでは別の設定を使う」をオンにします
  3. 下に出てくる項目を、スマホ向けに設定します。PC 向けの設定は上の「スライダー」パネルのままです
「スマホ(767px 以下)」パネル。初期状態では「スマホでは別の設定を使う」がオフです。
「スマホ(767px 以下)」パネル。初期状態では「スマホでは別の設定を使う」がオフです。
オンにすると、スマホ用の枚数・自動再生・矢印・ドットの設定が出ます。
オンにすると、スマホ用の枚数・自動再生・矢印・ドットの設定が出ます。

設定できる項目

ブロックスライダー/メディアスライダー

  • 同時に表示する枚数 — 1〜4。0.1 刻みで、1.5 のような小数も指定できます(後述)。切り替え効果がフェードのときは常に 1 枚なので、この項目は出ません。
  • 自動再生 — スマホでだけ自動再生を止める(または動かす)ことができます。間隔と一時停止の挙動は PC と共通です。
  • 矢印を表示/ドット(ページネーション)を表示 — 狭い画面では矢印を消してスワイプだけにする、といった使い方ができます。
  • サムネイルを表示 — メディアスライダーで、PC 側の「サムネイルを表示」がオンのときだけ出ます。オフにするとスマホではサムネイル帯を隠します。

ループ、切り替え効果(スライド/フェード)、切り替えの速さ、自動再生の間隔、矢印の位置、ドットの種類、中央寄せ、ドラッグ/スワイプの許可は PC と共通です。

ロゴスライダー

  • 1 枚あたりの幅 — PC 側で幅を指定しているときに効きます。空欄なら PC と同じ幅です。
  • 流れるスピード — 0.2〜3。スマホでは少しゆっくりにする、といった調整に。

PC とスマホでの表示

上の「実際の表示」と同じ設定(PC 2.5 枚・スマホ 1.5 枚)を、PC とスマホの幅で表示したところです。

PC(1200px)での表示。2.5 枚なので 3 枚目が途中まで見えます。
PC(1200px)での表示。2.5 枚なので 3 枚目が途中まで見えます。
スマホ(390px)での表示。1.5 枚なので 2 枚目が途中まで見えます。
スマホ(390px)での表示。1.5 枚なので 2 枚目が途中まで見えます。

オフのときの自動調整

「スマホでは別の設定を使う」がオフのときは PC の設定がすべての画面に効きますが、同時に表示する枚数だけは画面幅に応じて自動で減ります。

画面幅同時に表示する枚数
1024px 以上設定どおり
768〜1023px最大 2 枚(設定が 2 未満ならそのまま)
767px 以下1 枚

オンにすると、この自動調整は行われません。767px より広い画面は PC の設定、767px 以下はスマホの設定になります。768〜1023px のタブレットは PC 側の設定になる点に注意してください。

小数で指定する

「同時に表示する枚数」は 0.1 刻みで、2.5 のような小数も指定できます。
「同時に表示する枚数」は 0.1 刻みで、2.5 のような小数も指定できます。

枚数は 1.5 や 2.5 のように小数で指定できます。小数にすると次のスライドの一部が端に見えるので、「横にまだ続きがある」ことが伝わりやすくなります。PC・スマホのどちらでも使えます。

  • スライド 1 枚の幅は、トラックの幅を枚数で割った値です(スライド同士の間隔も含めて計算します)。整数のときと同じ考え方で、1.5 なら「1 枚+半分」になります。
  • 移動は 1 枚ずつです。最後は末尾のスライドが右端に揃う位置で止まります。
  • オフのときの自動調整も小数のまま行われます。たとえば 2.5 なら、768〜1023px では 2 枚、767px 以下では 1 枚になります。
  • フェードでは使えません(常に 1 枚です)。
  • 小数での指定は 1.12.0 の次のバージョンで追加されます。それより前のバージョンでは整数のみです。

注意点

  • 境界は 767px で、プラグインの CSS と同じです。判定はブラウザーの幅で行うので、タブレットを横向きにしたときなどは PC 側の設定になることがあります。
  • 自動再生のオン・オフだけはページを読み込んだ時点で決まります。読み込んだあとにブラウザーの幅を変えても切り替わりません(枚数・矢印・ドットはその場で切り替わります)。
  • スマホ用の設定は、オンにしたときだけ data-sb-sp 属性として保存されます。オフのままのブロックのマークアップは変わらないので、既存のスライダーはそのまま有効です。
  • エディター内ではスライダーは動きません。スマホでの見え方はフロントで、ブラウザーの幅を狭めるか実機で確認してください。

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –