4 つの表示モード
ショートコード属性 mode ひとつで「グリッド」「ページネーション」「もっと見る」「カルーセル」の 4 モードを切り替えられます。同じ動画データのままレイアウトと UX だけが変わるため、ページの目的に合わせて使い分けてください。
モードの選び方
| モード | こんなときに | 初期表示 | 追加表示 | JS 必要 |
|---|---|---|---|---|
grid |
件数が少なく一覧性重視 | 全件 | ― | 不要 |
paginate |
件数が多く章立てしたい | per_page 件 | 数字ボタンでページ切替 | 必要 |
loadmore |
スクロールで読み進める UX | per_page 件 | ボタンで追加読み込み | 必要 |
carousel |
横方向にスワイプさせたい | 全件 (横スクロール) | 矢印 / キーボード操作 | 必要 |
grid モード — 全件グリッド表示
もっともシンプルなモード。count 件をそのまま CSS Grid で並べます。cols で列数を制御し、レスポンシブ環境では 900px / 640px / 420px のブレークポイントで自動的に列数が縮小されます。
[ks_tubelist channel="UCxxxx" count="6" cols="3" mode="grid"]- JavaScript を読み込まないため最軽量
- 件数が多い場合でも一画面で見渡せる
- 初期
per_page件はサムネがloading="eager"+fetchpriority="high"で読み込まれます (LCP 改善)
paginate モード — ページネーション
「前へ / 1 2 3 ... / 次へ」スタイルのページネーション UI。per_page ごとに区切って数字ボタンで切り替えます。
[ks_tubelist channel="UCxxxx" count="60" cols="3" mode="paginate" per_page="12"]- ページ数が 8 以上ある場合は
1 ... 4 5 6 ... 10のように省略記号で短縮表示 - ページ切替時はリスト先頭にスクロール (CSS 変数
--kstls-scroll-offsetで固定ヘッダー高さを補正) - 各ボタンに
aria-label="ページ N"が付与され、現在ページにaria-current="page" prefers-reduced-motion環境では smooth scroll が auto に切り替わります
loadmore モード — もっと見るボタン
初期に per_page 件を表示し、「もっと見る (残り N 件)」ボタンを押すたびに per_page 件ずつ追加表示するモード。スクロールで自然に読み進める UX に向きます。
[ks_tubelist channel="UCxxxx" count="60" cols="3" mode="loadmore" per_page="6"]
(N) が残数。クリックで自動更新- ボタンのテキストが残数で動的に更新されます (例:
もっと見る (52)→(46)) - 残数が 0 になると
.kstls-loadmoreラッパー自体を DOM から削除 (空マージンの残骸を回避) - ラッパーには
aria-live="polite"が付与され、スクリーンリーダーに変化が通知されます
carousel モード — 横スクロール
全件を 1 行に並べて横スクロールさせるモード。スワイプ / 矢印ボタン / キーボード操作に対応します。サムネを横に流したいランディングページ向け。
[ks_tubelist channel="UCxxxx" count="30" cols="4" mode="carousel" per_page="4"]- CSS の
scroll-snap-type: x mandatoryでカード単位にスナップ - 左下のスクロール量は viewport 幅 × 0.9 (約 1 画面分)
- スクロール端到達時に「前へ」「次へ」ボタンが自動的に
disabled - キーボード: ← → / Home / End に対応 (viewport は
tabindex="0") aria-controlsで操作対象 region を関連付け
カルーセルでは per_page は「スナップ単位の目安」として使われます。実際の幅は cols と CSS 変数 --kstls-gap から自動計算されます。
レスポンシブ挙動
全モード共通で、ビューポート幅に応じて列数 / 1 アイテム幅が以下のように調整されます。
| ビューポート幅 | grid / paginate / loadmore | carousel |
|---|---|---|
| 901px 以上 | cols 値 (1〜8) | cols 値で幅計算 |
| 641〜900px | min(cols, 3) 列 | 2-up |
| 421〜640px | min(cols, 2) 列 | 2-up |
| 420px 以下 | 1 列固定 | 1 カード 85% 幅 |
説明文 (description) と詳細トグル
show に description を含めると、各カードの下に概要文が表示されます。excerpt_length を超える長さの場合、<details> 要素による開閉トグルが自動的に追加されます。
:has()対応ブラウザでは CSS のみで抜粋/全文を切替- 非対応ブラウザでは JavaScript フォールバックが自動で同等動作を提供