スライダーブロックは、軽量なスライダーライブラリ Splide を使ったブロックです。用途に合わせて 3 つのタイプから選びます。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
ブロックスライダー（背景画像＋オーバーレイ）
開発者1枚目のスライダー内容
クライアント2枚目のスライダー
メディアスライダー（サムネイル帯つき）
ロゴスライダー
- ブロックスライダー — 各スライドに任意のブロックを入れられます。背景画像とオーバーレイを敷いてヒーロー風にも使えます。
- メディアスライダー — 画像をギャラリーのように一括選択して並べます。下にサムネイル帯を付けられます。
- ロゴスライダー — 取引先ロゴなどが横に流れ続けるマーキー表示です。
基本的な使い方
- 「shitate unique blocks」からスライダーを追加し、サイドバーの「タイプ」で 3 つから選びます。
- ブロックスライダーの場合: エディター上部の番号ボタン／前後矢印でスライドを 1 枚ずつ切り替えながら編集し、「スライドを追加」で末尾に追加します。各スライドは選択するとサイドバーに背景の設定が出ます。
- メディア／ロゴの場合: サイドバーの「画像を選択」でメディアライブラリから複数の画像をまとめて選びます。選び直すと全体が置き換わります。サムネイル一覧で並べ替えと個別削除ができます。
- 1 画面あたりの枚数、ループ、自動再生、矢印、ドットなどを設定します。
エディター内ではスライダーは動きません（ブロックスライダーは 1 枚ずつ、メディア／ロゴはグリッドのプレビュー）。動きはフロントで確認してください。
エディターでの設定画面
設定項目
共通（ブロック／メディア）
- 同時に表示する枚数 — 1〜4（初期値 1）。2 以上のときは 1023px 以下で最大 2 枚、767px 以下で 1 枚に自動で減ります。
- ループ再生／自動再生（4 秒間隔・ホバーで一時停止）／矢印を表示（初期値オン）／ドットを表示（初期値オン）
- 幅広・全幅の配置に対応。全幅のときは矢印が内側に配置されます。
ブロックスライダーの各スライド
- 背景画像 — 設定するとスライド全体に cover で敷かれ、中身は縦方向中央に揃います。
- オーバーレイの濃さ（0〜100、初期値 40）とオーバーレイの色（初期値は黒） — 背景画像があるときだけ表示されます。
- 最小の高さ — 例:
24rem、400px。スライドごとの設定です。 - コアの色（背景・文字）と余白（パディング）の設定も使えます。
メディアスライダー
- サムネイルを表示 — スライダーの下にクリックできるサムネイル一覧を出し、現在位置をハイライトします。
- 画像は 16:9 にトリミング（cover）されて表示されます。
ロゴスライダー
- 1 枚あたりの幅 — 例:
8rem、120px。空欄なら高さ 3em で自然な幅になります。 - 流れるスピード — 0.2〜3（初期値 0.8）。
- 枚数が少ないときは、トラック幅の 2 倍になるまで自動で複製してから動かすので、2〜3 枚でも途切れや余白ができません。ホバーで一時停止し、ドラッグで自由に動かせます。矢印・ドット・自動再生の設定はロゴには使われません。
画像の配信サイズとフィルター
画像は保存時の原寸ではなく、表示に合ったサイズ（srcset 付き）で配信されます。先頭の数枚以外は遅延読み込みになります。サイズを変えたい場合はフィルターで指定できます。
add_filter( 'sb_slider_image_size', fn() => 'large' ); // メディア／ロゴのスライド画像（初期値: メディア 2048、ロゴ medium）
add_filter( 'sb_slider_thumb_size', fn() => 'medium' ); // サムネイル帯（初期値: thumbnail）
add_filter( 'sb_slider_bg_size', fn() => '1536x1536' ); // ブロックスライダーの背景（初期値: 2048x2048）
add_filter( 'sb_slider_eager_count', fn() => 2 ); // 遅延読み込みしない先頭の枚数（初期値: 1 画面の枚数）CSS でカスタマイズする
本体は .sb-slider（状態: is-mode-block / is-mode-media / is-mode-logo）、各スライドは .sb-slider-item（背景ありは has-bg）、部品は -overlay -body -thumbs -thumb です。矢印とドットはブランド色（--st-color-brand）で、可変ポストと共通のスタイルです。
/* オーバーレイをサイト全体で薄く・青みに */
.sb-slider-item {
--sb-overlay: 0.25;
--sb-overlay-color: #001a4d;
}
/* ロゴの幅はブロックの設定（--sb-logo-w）で決まる。CSS で上書きする場合 */
.sb-slider.is-mode-logo { --sb-logo-w: 10rem; }注意点
- ブロックスライダーで作ったスライドがある状態でタイプをメディア／ロゴに切り替えて保存すると、スライドの中身は保存されません。切り替える前に内容を退避してください。
- 画像の alt は選択した時点の値が保存されます。あとでメディアライブラリで alt を変えた場合は、画像を選び直してください。
- JS が読み込まれる前や無効な環境では、スライドは縦に並んだ状態で表示されます（ロゴは横並び）。矢印とドットは出ません。
- 1.6.1 以前の保存形式（
sb-slider__itemなど）はエディターで開くと自動移行されます。