カスタマイズ

CSS カスタムプロパティ (CSS 変数) 21 個で配色・余白・行数・ヘッダー高さ補正まで子テーマからクリーンに上書きできます。ダークモード / アクセシビリティ / レスポンシブも標準対応です。

CSS 変数の上書き方法

子テーマの style.css や追加 CSS で .kstls-tubelist セレクタに対して変数を再定義します。

.kstls-tubelist {
    --kstls-gap: 24px;
    --kstls-radius: 10px;
    --kstls-title-color: #111;
    --kstls-title-lines: 3;
    --kstls-sub-color: #888;
}

特定のショートコードだけに適用したい場合は、ショートコードを囲む親要素にクラスを付けて scoping します。

全 CSS 変数一覧 (21 個)

レイアウト系

変数初期値用途
--kstls-cols3グリッド列数 (ショートコード cols 属性で自動上書き)
--kstls-gap20pxカード間の隙間
--kstls-radius6pxサムネイル・ボタンの角丸半径
--kstls-title-lines2タイトルの行数制限 (title_lines 属性で自動上書き)
--kstls-scroll-offset80pxページネーション切替時のスクロール上端オフセット (固定ヘッダー対応)

配色 — 文字・リンク

変数初期値用途
--kstls-title-color#1d2327タイトル文字色
--kstls-sub-color#646970日付・視聴回数・概要文の文字色
--kstls-link-colorinheritカード全体リンクの文字色 (テーマからの継承)
--kstls-bgtransparentコンテナ全体の背景色

配色 — コントロール (ボタン)

変数初期値用途
--kstls-control-bg#ffffffページ番号 / 矢印ボタンの背景
--kstls-control-color#1d2327同 文字色
--kstls-control-border#d0d4d9同 ボーダー色
--kstls-control-active-bg#1d2327現在ページ / 「もっと見る」ボタンの背景
--kstls-control-active-color#ffffff同 文字色

配色 — その他

変数初期値用途
--kstls-duration-bgrgba(0,0,0,0.75)サムネ右下の再生時間バッジ背景
--kstls-duration-color#ffffff同 文字色
--kstls-error-bg#fff7f7エラーメッセージ背景 (編集者にのみ表示)
--kstls-error-border#d63638同 左ボーダー

ダークモード自動対応

OS / ブラウザのダークモード設定 (prefers-color-scheme: dark) を検知すると、CSS 変数 8 個が自動的に上書きされます。利用者側で何もする必要はありません。

@media (prefers-color-scheme: dark) {
    .kstls-tubelist:not(.kstls-no-dark) {
        --kstls-title-color: #f0f0f1;
        --kstls-sub-color: #b4b8be;
        --kstls-control-bg: #2c3338;
        --kstls-control-color: #f0f0f1;
        --kstls-control-border: #50575e;
        --kstls-control-active-bg: #f0f0f1;
        --kstls-control-active-color: #1d2327;
        --kstls-duration-bg: rgba(0, 0, 0, 0.85);
    }
}

ダークモード自動対応を 無効化したい場合は、ショートコードを囲む親要素にクラス kstls-no-dark を付与してください。例: <div class="kstls-no-dark">[ks_tubelist ...]</div>

アクセシビリティ仕様

ARIA 属性

prefers-reduced-motion 対応

「視覚効果を減らす」設定の利用者には、トランジション・スムーズスクロール・カルーセル scroll-snap がすべて無効化されます。

@media (prefers-reduced-motion: reduce) {
    .kstls-tubelist *,
    .kstls-tubelist *::before,
    .kstls-tubelist *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

キーボード操作

テーマとの衝突対策

多くのテーマは .entry-content a 等にオレンジ色や下線を設定しています。本プラグインは specificity を高めた以下のセレクタで強制的に上書きします。

.kstls-tubelist a.kstls-link,
.kstls-tubelist a.kstls-link:link,
.kstls-tubelist a.kstls-link:visited,
.kstls-tubelist a.kstls-link:hover,
.kstls-tubelist a.kstls-link:focus,
.kstls-tubelist a.kstls-link:active {
    color: var(--kstls-link-color, inherit);
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-color: transparent;
    border: 0;
    box-shadow: none;
}

テーマがさらに強い !important を使っている場合は、子テーマで上記セレクタに !important を追加してください。

パフォーマンス機能