/* * ドウジンナビ テーブル横スクロール対応CSS * * 役割: * - 記事本文内のテーブルがスマホ画面幅をはみ出した時、横スクロール可能にする * - 主な対象は listicle 比較表（.wp-block-table.dn-list-table-glance）だが、 * 他のテーブル（dn-spec-table 等）にも安全に効くよう汎用化 * - スクロール可能なテーブルには「初回ヒント通知バッジ」を JS から動的に重ねる * * スコープ: * - 記事本文 (.post_content / .entry-content / .l-content article) 配下のテーブルのみ * - 既存マークアップ（HTML）には一切触らない（CSSのみで成立） * - PC（769px以上）の見た目は変えない。スマホ・タブレット縦（768px以下）でのみ横スクロール有効化 * * 実装方針: * 1. wp-block-table の
をスクロールコンテナ化（overflow-x: auto） * 2. 側に min-width を効かせて、自然な列幅を保つ * 3. スクロールバーは細めに（iOS Safari風） * 4. 横スクロール可能であることの視覚ヒントは、JS が動的生成する .dn-scroll-hint バッジで伝える * （初回ビューポート進入から2.5秒 or 初スクロールでフェードアウト） * * 対応 modify 項目: * - 2026-05-24 中村さん指示: isekai-tensei-osusume-15sen-2026 の比較表が * スマホで画面幅をはみ出して見づらい → 横スクロールで見られるように * - 2026-05-24 中村さん指示 追加分: * (1) th を折り返さない（white-space: nowrap） * (2) スクロール可能とわかるUI: 当初は右端フェードグラデで実装 * - 2026-05-24 中村さん指示 さらに追加: * (3) 右端フェードグラデは「スクロールしてもビューポート右端に追従して邪魔」のため廃止 * (4) 代わりにテーブル中央に半透明の「← 👆 → 横スクロールできます」バッジを * 初回ビューポート進入時に1回だけ出して自動フェードアウトする方式へ * - 2026-05-24 中村さん指示 さらに追加 (v3): * (5) バッジ位置を「テーブル中央 (top: 50%)」から * 「thead 真上 (top: 6px / 水平中央)」へ変更。thead をスクロールしながら * 見るとき自然に視界に入る位置を狙う。文言・色・自動消滅秒数(2.5s)・ * スクロール開始時の即フェードアウトは維持。 * - 2026-05-24 中村さん指示 さらに追加 (v4): * (6) th の nowrap を PC含む全画面共通スタイルへ移動 * （これまでスマホ @media 内に閉じていたものを外出し）。 * PC でも th が必ず1行で出るようにする。td 側のラップ挙動は据え置き。 * (7) listicle 比較表（dn-list-table-glance）の作品名リンク * （a[data-cta-type="list-table-title"]）に underline を明示。 * SWELL の a タグ既定は text-decoration: none のため、PCでも * クリック可能な作品名であることを視覚的に示す。色は SWELL のリンク * カラー既定に従う（上書きしない）。 * * @package SwellChild * @since 2026-05-24 */ /* ============================================================ 1. 記事本文内のテーブル
をスクロールコンテナ化 ============================================================ */ @media (max-width: 768px) { /* SWELL系・WordPress標準の記事本文ラッパー両対応 */ .post_content .wp-block-table, .entry-content .wp-block-table, article.post .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; /* iOS のスムーズスクロール */ max-width: 100%; margin-left: 0; margin-right: 0; /* バッジを絶対配置で重ねるための基準 */ position: relative; } /*
内の
が縮まないように min-width を付ける。 列数・列内容量を考慮して 540px（5列の比較表に最適化）。 他テーブル（dn-spec-table 等の2列構造）には min-width を効かせないため、 wp-block-table 配下に限定する */ .post_content .wp-block-table table, .entry-content .wp-block-table table, article.post .wp-block-table table { min-width: 540px; table-layout: auto; } /* listicle 比較表（5列：順位・サムネ・作品・★評価・詳細）は 列数が多いので min-width を少し広めにして読みやすく */ .post_content .wp-block-table.dn-list-table-glance table, .entry-content .wp-block-table.dn-list-table-glance table, article.post .wp-block-table.dn-list-table-glance table { min-width: 640px; } /* スクロールバーを細めに（Webkit系のみ。Firefox は scrollbar-width で対応） */ .post_content .wp-block-table::-webkit-scrollbar, .entry-content .wp-block-table::-webkit-scrollbar, article.post .wp-block-table::-webkit-scrollbar { height: 6px; } .post_content .wp-block-table::-webkit-scrollbar-track, .entry-content .wp-block-table::-webkit-scrollbar-track, article.post .wp-block-table::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.04); border-radius: 3px; } .post_content .wp-block-table::-webkit-scrollbar-thumb, .entry-content .wp-block-table::-webkit-scrollbar-thumb, article.post .wp-block-table::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.32); border-radius: 3px; } .post_content .wp-block-table, .entry-content .wp-block-table, article.post .wp-block-table { scrollbar-width: thin; } /* td: 折り返し許可（本文セルが破綻しないように） */ .post_content .wp-block-table table td, .entry-content .wp-block-table table td, article.post .wp-block-table table td { white-space: normal; word-break: break-word; } } /* ============================================================ 1-b. th の折り返し禁止（全画面共通 / PC + スマホ） ============================================================ 2026-05-24 中村さん指示 (v4): th を PC でも必ず1行で出す。 td 側のラップ挙動は据え置き（破綻防止のまま）。 メディアクエリの外に出して全幅で適用する。 */ .post_content .wp-block-table table th, .entry-content .wp-block-table table th, article.post .wp-block-table table th { white-space: nowrap; word-break: keep-all; } /* ============================================================ 2. 横スクロール初回ヒントバッジ（.dn-scroll-hint） ============================================================ 方式: - JS が figure.wp-block-table 内に動的に span.dn-scroll-hint を挿入 - IntersectionObserver で「画面に入った瞬間」に .is-visible を付与してフェードイン - 2.5秒後 or ユーザーが横スクロールした瞬間に .is-hiding でフェードアウト - 表示は1テーブル1回だけ（JS側でフラグ管理） - .dn-scroll-noop（スクロール不要）なテーブルには JS がそもそも挿入しない 見た目: - 半透明黒背景の角丸ピル、白文字、テーブル中央上部 - pointer-events: none でクリックを透過させる（テーブル操作を邪魔しない） */ @media (max-width: 768px) { .post_content .wp-block-table .dn-scroll-hint, .entry-content .wp-block-table .dn-scroll-hint, article.post .wp-block-table .dn-scroll-hint { position: absolute; /* thead の真上に被るような位置。中央(50%)から最上部に変更（2026-05-24 v3）。 top: 6px で thead の少し上に重ね、ユーザーが thead を見ているとき 自然に視界に入るようにする。 */ top: 6px; left: 50%; transform: translate(-50%, 0); z-index: 15; display: inline-block; padding: 10px 16px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.75); color: #fff; font-size: 13px; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; /* バッジ自体はタップ・スクロールを邪魔しない */ pointer-events: none; /* 初期は非表示。.is-visible で可視化、.is-hiding で再度非表示 */ opacity: 0; transition: opacity 0.4s ease; /* iOS Safari でビューポート左右にはみ出すのを防止 */ max-width: calc(100% - 24px); text-align: center; /* 薄いシャドウで背景に対するコントラストを補助 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .post_content .wp-block-table .dn-scroll-hint.is-visible, .entry-content .wp-block-table .dn-scroll-hint.is-visible, article.post .wp-block-table .dn-scroll-hint.is-visible { opacity: 1; } .post_content .wp-block-table .dn-scroll-hint.is-hiding, .entry-content .wp-block-table .dn-scroll-hint.is-hiding, article.post .wp-block-table .dn-scroll-hint.is-hiding { opacity: 0; } } /* PC（769px以上）には何も追加しない。 万一クラスが残った場合に備えてバッジは強制非表示にしておく。 */ @media (min-width: 769px) { .post_content .wp-block-table .dn-scroll-hint, .entry-content .wp-block-table .dn-scroll-hint, article.post .wp-block-table .dn-scroll-hint { display: none !important; } } /* ============================================================ 3. dn-spec-table（単発レビューのスペック表）への対応 ============================================================ 2列構造（項目 / 値）なので通常は横スクロール不要だが、 将来的に長い値が入っても崩れないよう保険として overflow を許可。 */ @media (max-width: 768px) { .post_content .dn-spec-table, .entry-content .dn-spec-table, article.post .dn-spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } } /* ============================================================ 4. listicle 比較表（dn-list-table-glance）の作品名リンク underline ============================================================ 2026-05-24 中村さん指示 (v4): 作品セル（tbody td 内 strong > a[data-cta-type="list-table-title"]） は SWELL 既定で text-decoration: none になるため、リンクと一目で 分かるよう underline を明示する。色は SWELL のリンク色（カスタマイザ既定） に従い、ここでは指定しない（意図的に上書きしない）。 全画面共通（PC + スマホ）。 */ figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"], .post_content figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"], .entry-content figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"], article.post figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"]:hover, .post_content figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"]:hover, .entry-content figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"]:hover, article.post figure.wp-block-table.dn-list-table-glance a[data-cta-type="list-table-title"]:hover { /* hover時は color のみ変化（テーマ準拠）。underline は維持。 */ text-decoration: underline; }