スライドコンテンツブロックは様々なコンテンツをスライドで表示できるEX限定ブロックです。
自動スクロール
手動スクロール
このブロックでできること
- 複数の「スライド」（1枚分のエリア）を横方向に並べ、公開ページでは横スクロールで切り替えて表示できます。
- 表示スタイル（ノーマル／カットオフ／ワイド）で、1画面に収まる枚数や「次のスライドのチラ見せ」の出方を変えられます。
- 画面幅に応じた表示列数（スマホ・タブレット・PC）を指定できます。
- 自動スクロールのオン／オフ、間隔の調整ができます。
- 前へ／次へナビ（表示位置の選択）を利用できます（条件あり。後述）。
- 各スライド内には、通常のブロックを自由に配置できます（画像・見出し・段落など）。
ブロックの追加
- ブロックインサーターで 「AFFINGER: スライドコンテンツ」 を検索して挿入します。
- 初回挿入時、スライド 1〜3 がテンプレートとして入ります。必要に応じて枚数を増減してください。
基本的な編集の流れ
どのスライドを編集するか
- ブロック上部の ラベル（タブのようなボタン） で「スライド 1」「スライド 2」…を切り替えます。
- 選択中のスライドだけがエディター内で表示され、その中のブロックを編集します。
スライドの追加・削除
- ツールバーの「スライドを追加」、またはラベル行右端の ＋ボタン でスライドを追加できます。
- スライドの削除は、該当する 子ブロック（スライドコンテンツアイテム） をブロック一覧から削除する操作で行います（WordPress 標準のブロック操作）。
ブロック設定（サイドバー）
親ブロック 「AFFINGER: スライドコンテンツ」 を選択した状態で、右サイドバーの設定を確認します。
表示スタイル
| 設定 | 内容 |
|---|---|
| スタイル | ノーマル … 指定列数が幅にきれいに収まる。カットオフ … 右端に次のスライドの一部が見える「チラ見せ」。ワイド … 左右に前後スライドの一部が見える。 |
| ナビアイコンの位置 | 表示しない／中央（トラック上に左右ボタンを重ねる）／下（トラック下に横並び）。 |
| 表示列数 | 959px以上, 600px以上, 599px以下 の順で、カンマ区切りの 3つの数字 で列数を指定します（例: 3,3,1）。数字とカンマ以外は入力時に除去されます。 |
スクロール
| 設定 | 内容 |
|---|---|
| 自動スクロール | オン … 一定間隔で自動送り。オフ … 手動でスクロール（スワイプ・ドラッグ等）。 |
| スクロール速度 (ms) | 自動スクロールがオンのときのみ。1000〜10000、500ms刻み。 |
枠線・色・コンテンツ設定
- 枠線 … 線の色、太さ (px)、丸み (px)。
- 色 … スライドエリアの背景色。
- コンテンツ設定 … 最大の高さ（未設定ならコンテンツに合わせる）、パディング（上下／左右）。
ナビ（前へ／次へ）が表示される条件
次の 両方 を満たすとき、設定でナビを「表示しない」にしていなければ、前へ／次へが表示されます。
- ナビアイコンの位置が「表示しない」以外であること
- スライドの枚数が、現在の画面幅での表示列数より 多い こと
※ 1行にすべてのスライドが収まる場合は、ナビは出ません（仕様です）。
実際のスライド動きは、必ずプレビューまたは公開ページで確認してください。
注意点（トラブルを避けるために）
ブラウザ・環境
- 表示・操作は モダンブラウザ を想定しています。古いブラウザでは、スナップや自動スクロールの挙動が異なる、または期待どおりに動かない場合があります。
- 公開ページでは JavaScript が有効である必要があります（フロント用スクリプトが読み込まれる前提です）。
無限ループ用の「クローン」について
- フロントでは、シームレスな循環表示のため DOM上にスライドの複製（クローン） が作られることがあります。
- スライド内に フォーム、動画プレイヤー、iframe など、IDの重複や二重初期化で問題が出やすい要素 を入れる場合は、表示や操作を必ず確認してください。一般的なテキスト・画像・レイアウトブロックであれば通常問題になりにくいです。
表示列数の入力
- 3つの値（カンマ区切り） で指定します。不足や不正な値は、保存時にプラグイン側で 1〜10 の範囲に調整されたり、欠けた値を補完したりする処理があります。意図しない列数になった場合は、値を明示的に
例: 3,2,1のように揃えて保存し直してください。
細かい見え方（ボーダーなど）
- スクロール位置の計算の都合で、ごく稀にボーダーが1pxだけ見切れて見えることがあります。
テーマ・他プラグインとの組み合わせ
- テーマの overflow・z-index・横スクロール禁止 などの CSS が当たると、はみ出しやナビが隠れることがあります。
- キャッシュ・ミニファイ・遅延読み込み のプラグインにより、フロント用スクリプトの読み込み順が変わると動作に影響する場合があります。
仕様について
表示・操作まわり
- 「カットオフ」「ワイド」は、スライド枚数が 今の画面幅での表示列数より多いときだけ 意味を持ちます。枚数が列数以下だと、見た目は ノーマル相当 になります。
- 表示列数は
959px以上, 600〜959px, 599px以下の 3段階で、カンマ区切りの数字（例:3,3,1）です。形式を誤ると意図と違う列数になります。 - 自動スクロールは、マウスで ホバー中は送りを止め、タッチでは 触れているあいだ止まり、離すと再開します。説明だけ読む利用者には「勝手に動く／止まる」と感じられることがあります。
- 自動スクロールを オフにすると 前後ボタンで操作します。操作手段が変わる点に注意です。
編集・コンテンツ
- 直接の子は
スライドコンテンツ項目ブロックのみ（親子関係で縛られています）。通常の段落などは、各項目の内側に置きます。 - コードエディタでマークアップを直すことはできません。
- コアの「幅広」などの配置サポートは使えません。
- 最大の高さを設定すると、はみ出しはレイアウト／CSSで抑えられます。長文や大きな画像を入れると 見切れや内部スクロールになりやすいので、項目ごとの量に注意が必要です。
注意事項
スライドブロックは含むコンテンツによっては正常に表示できないケースもございます。
特に以下のようなものは、はみ出しが切れたり、意図した表示にならないことがあります。
- ドロップダウン／ポップオーバー／ツールチップ（親の外に描画したい UI）
position: sticky（祖先のoverflow: hiddenで効かないことが多い）- 大きな
box-shadowや装飾がセル外に出す部分（端で切れる）
- 縦に長いコンテンツ（一覧・長文・アコーディオンなど）は、セル高さとの関係で読みづらい／見切れる
- 横に広いコンテンツ（横スクロールの表、横スクロールのコード、横長ギャラリーなど）は、スライド全体の横スクロール・スナップと内側の横スクロールが競合しやすい（タッチパッド・トラックパッドで特に）
最大高さを親ブロックで付けた場合は、エディター側でもクリップされやすくなります。
エディターとフロントの差
- エディター: ラベルで1枚だけ表示（トラックは
displayの切り替え） - フロント: 狭い flex 幅（列数・ノーマル/カットオフ/ワイド） のセルに並ぶ
そのため、エディターでは問題なくてもフロントで折り返し・高さ・余白が変わる可能性があるものがあります。
- カラム / 行 / メディアとテキストなど、幅に依存するレイアウト
vwや大きなmin-height（カバー系など）- **幅広・全幅（align wide / full）**を期待するブロック（テーマの CSS と組み合わさってレイアウトが崩れることがある）
無限ループ用クローンに起因するもの
スライド枚数が列数より多いとき、フロントでは view.js が各アイテムの DOM を複製します（aria-hidden="true" は付与されるが、マークアップは重複）。
次は不具合や挙動のおかしさが出やすいタイプです。
- HTML の
idを使う要素（label for、アンカー、aria-labelledbyなど）→ 同一文書内に同じ id が複数 - フォーム（
nameの重複、送信先の重複） - 埋め込み（iframe）・地図・外部ウィジェット → 同じコンテンツが複数インスタンスになり、読み込み・計測・初期化が二重になる可能性
- 動画・音声（複製ごとにプレイヤーが存在しうる）
- ページロード時に一度だけ初期化するスクリプトが、クローンに対して想定外に動く
