/* ==========================================================================
深淵書架 サイト全体スキン
JIN:R本体のヘッダー/フッター/本文まわりを「深淵アーカイブ」の配色に統一する。
対象: 全ページ(サイト全体の統一感のため意図的にグローバル適用)。
JIN:RのPHP構造・機能(パンくず・関連記事・SNSシェア等)は変更せず、色だけ上書きする。
========================================================================== */
:root{
--shn-ink:#0a0f0d;
--shn-deep:#0d1f1a;
--shn-green:#163c32;
--shn-paper:#d9d0b8;
--shn-gold:#c9a45c;
--shn-text:#d8cfc0;
--shn-text-dim:#9aa79e;
--shn-line:rgba(217,208,184,.16);
}
html, body{
background:var(--shn-ink) !important;
}
/* ---- ヘッダー ---- */
#commonHeader{
background:var(--shn-ink) !important;
border-bottom:1px solid var(--shn-line);
}
#commonHeader.d--transparent{background:var(--shn-ink) !important;} /* 透過ヘッダーの地色が白飛びしていた問題を解消 */
/* 2026-07-24: 縦に長い記事で上部ナビに戻りにくいという指摘への対応。
ヘッダーを固定し、下スクロールで隠す/上スクロールで即再表示するJS(shinen-header-scroll.js)と
セットで機能する。実際の高さはJSが計測して --shn-header-h に反映するため、
ここでの90pxはJS実行前の初期値(レイアウトジャンプ防止用フォールバック)。 */
:root{ --shn-header-h:90px; }
#commonHeader{
position:fixed !important;
top:0;
left:0;
width:100%;
z-index:9999;
transition:transform .25s ease;
will-change:transform;
}
#commonHeader.shn-header-hidden{
transform:translateY(-100%);
}
body{
padding-top:var(--shn-header-h) !important;
}
#headerLogoLink,
#headerLogoLink:visited{
color:var(--shn-paper) !important;
}
#globalMenu a,
#footerMenuList a{
color:var(--shn-text-dim) !important;
}
#globalMenu a:hover,
#footerMenuList a:hover{
color:var(--shn-gold) !important;
}
/* 2026-07-24: サブメニュー展開時、JIN:R側が背景を半透明白(rgba(255,255,255,.75))に
するため、上のdim色(#9aa79e)のままだと視認性が低い。開いた状態だけ濃色に上書きする。 */
#globalMenuList .menu-item:hover > .sub-menu a{
color:var(--shn-ink) !important;
}
/* 2026-07-24: 明暗切り替え時、--shn-inkが明色に反転するとサブメニュー上の文字が
(背景も明色になり)見えなくなるため、この箇所だけ常に濃色のtext系トークンを使う。 */
:root[data-theme="light"] #globalMenuList .menu-item:hover > .sub-menu a{
color:var(--shn-text) !important;
}
#globalMenuList .menu-item:hover > .sub-menu a:hover{
color:var(--shn-green) !important;
}
#globalMenuList .menu-item:hover > .sub-menu .a--menu-subtext{
color:var(--shn-text-dim) !important;
}
#headerSearchIcon,
.a--search-icon i{color:var(--shn-text-dim) !important;}
/* 2026-07-24: トップレベルのナビ項目が7つに増え(深淵の書棚/原典読解/作品史・年表/
入門ガイド/TRPG等を分離)、既定の間隔だと2段組みに折り返っていた。字間・余白を
詰めて1行に収める(ユーザー指摘「あまりいい感じになっていない」への対応)。
2026-07-30: トップレベルが8項目(用語集・派生作品総覧を昇格)に増え、かつ
「入門ガイド」→「クトゥルフ入門ガイド」に伸びたことで再び2段に折り返り、
固定高さのヘッダーから項目がはみ出す表示崩れが発生(ユーザー報告)。
さらに余白・字間・文字サイズを詰めて1行に収める。 */
#globalMenuList > .menu-item{
margin-left:3px !important;
}
#globalMenuList > .menu-item:first-child{
margin-left:0 !important;
}
#globalMenuList > .menu-item > a{
padding:4px 5px !important;
letter-spacing:0.02rem !important;
font-size:11px !important;
}
/* 2026-07-24: 「TRPG」だけ半角英字のため、他の日本語項目と並ぶと細く浮いて見える。
太字化+字間を詰めて、周囲の項目と視覚的な重さを揃える。 */
#globalMenuList > .menu-item > a[href*="/category/trpg/"]{
font-weight:600 !important;
letter-spacing:0.03em !important;
}
/* JIN:Rデモ用のメインビジュアル(すべての人に直感的な…のプレースホルダー)は
front-page.php / 各アーカイブ用ヒーローに置き換えたため非表示にする */
.o--jinr-mainvisual{display:none !important;}
/* ---- フッター(既定の紺色 → サイト配色へ) ---- */
#commonFooter{
background:var(--shn-deep) !important;
border-top:1px solid var(--shn-line);
}
#commonFooterInner{background:transparent !important;}
#breadCrumb,
#breadCrumbInner{background:transparent !important;}
.c--breadcrumb-item,
.c--breadcrumb-item a{color:var(--shn-text-dim) !important;font-size:11px;}
.c--breadcrumb-item a:hover{color:var(--shn-gold) !important;}
.a--breadcrumb-parts{color:var(--shn-text-dim) !important;}
#copyright{color:var(--shn-text-dim) !important;}
#copyright i{color:var(--shn-gold) !important;}
/* 通常記事・固定ページ本文の配色には手を入れない(既存コンテンツが独自の白背景/文字色を
持っている場合があり、一律上書きすると可読性を壊すため)。
深淵アーカイブ(shn-arc)配下は shinen-archive.css 側で個別に配色済み。 */
/* ---- 法的3ページ(利用規約 page 8 / 運営者情報 page 9 / プライバシーポリシー page 10) ----
2026-07-23 ユーザー指摘「背景がWordPress感すごい」への対応。この3ページだけ、
JIN:R既定の白い本文カードをやめ、深淵アーカイブと同じ暗色に馴染ませる。
他の固定ページ(globe等)は独自デザインを持つため対象にしない。 */
/* 2026-07-23追記: 書架(page 235)・禁忌遺物商会(page 234)も同じ白カード問題が
あったため器だけ暗色化の対象に追加(SHAREボタンが安っぽく見えていた真因は
ボタンではなく白背景)。この2ページはウィジェット(shn-shelf/shn-gacha)が
自前の配色を持つため、本文p/li等への色上書きは適用しない(器と見出しのみ)。 */
body.page-id-8 #mainContent,
body.page-id-9 #mainContent,
body.page-id-10 #mainContent,
body.page-id-234 #mainContent,
body.page-id-235 #mainContent,
body.page-id-1191 #mainContent,
body.page-id-1192 #mainContent,
body.page-id-8 #mainContentInner,
body.page-id-9 #mainContentInner,
body.page-id-10 #mainContentInner,
body.page-id-234 #mainContentInner,
body.page-id-235 #mainContentInner,
body.page-id-1191 #mainContentInner,
body.page-id-1192 #mainContentInner{
background:var(--shn-ink) !important;
}
body.page-id-8 #jinrArticle,
body.page-id-9 #jinrArticle,
body.page-id-10 #jinrArticle,
body.page-id-234 #jinrArticle,
body.page-id-235 #jinrArticle,
body.page-id-1191 #jinrArticle,
body.page-id-1192 #jinrArticle{
background:transparent !important;
border:none !important;
box-shadow:none !important;
}
/* 2026-07-24: 深淵の書棚(1191)/禁忌の間(1192)ハブページは[shinen_hub]自身が
.shn-hero内にh1タイトルを持つため、JIN:R既定のページタイトルは二重表示になり非表示にする。 */
body.page-id-1191 #jinrPostTitle,
body.page-id-1192 #jinrPostTitle{
display:none !important;
}
/* 2026-07-24追記(ユーザー報告「縦に細い・下部にSHAREが残っている」): globeページ(319)
と同じ原因——テーマの記事幅制限(d--article-width-740)が.shn-arcを狭い列に押し込め、
本文向けSNS共有バーがこのナビゲーション用ページには不要なまま残っていた。 */
body.page-id-1191 #postContent,
body.page-id-1192 #postContent,
body.page-id-1191 #mainContentInner,
body.page-id-1192 #mainContentInner,
body.page-id-1191 #mainContent,
body.page-id-1192 #mainContent{
max-width:none !important;
width:100% !important;
}
/* 2026-07-24追記: 上記だけでは #mainContentInner.t--main-width の余白(45px 0 0)が
残り、.shn-heroの左端がカテゴリ一覧ページ(x:0スタート)とわずかにずれて見えていた。
カテゴリ一覧ページと完全に同じ見た目にするため上下パディングも0にする。 */
body.page-id-1191 #mainContentInner,
body.page-id-1192 #mainContentInner{
padding:0 !important;
}
body.page-id-1191 #snsShareBottom,
body.page-id-1192 #snsShareBottom{
display:none !important;
}
body.page-id-8 #jinrPostTitle,
body.page-id-9 #jinrPostTitle,
body.page-id-10 #jinrPostTitle,
body.page-id-234 #jinrPostTitle,
body.page-id-235 #jinrPostTitle{
color:var(--shn-paper) !important;
font-family:'Shippori Mincho',serif !important;
letter-spacing:.14em;
border-bottom:1px solid var(--shn-line);
padding-bottom:22px;
}
body.page-id-8 #postContent p,
body.page-id-9 #postContent p,
body.page-id-10 #postContent p,
body.page-id-8 #postContent li,
body.page-id-9 #postContent li,
body.page-id-10 #postContent li{
color:var(--shn-text) !important;
font-family:'Shippori Mincho',serif;
line-height:2.1;
}
body.page-id-8 #postContent h3,
body.page-id-8 #postContent h4,
body.page-id-9 #postContent h4,
body.page-id-10 #postContent h4{
color:var(--shn-gold) !important;
background:transparent !important;
border:none !important;
border-left:2px solid var(--shn-gold) !important;
padding:2px 0 2px 14px !important;
font-family:'Shippori Mincho',serif !important;
letter-spacing:.1em;
box-shadow:none !important;
}
/* JIN:R見出しスタイル(d--h4-style4等)が付ける装飾の打ち消し */
body.page-id-8 #postContent .jinr-heading::before,
body.page-id-9 #postContent .jinr-heading::before,
body.page-id-10 #postContent .jinr-heading::before,
body.page-id-8 #postContent .jinr-heading::after,
body.page-id-9 #postContent .jinr-heading::after,
body.page-id-10 #postContent .jinr-heading::after{
display:none !important;
}
body.page-id-8 #postContent a,
body.page-id-9 #postContent a,
body.page-id-10 #postContent a{
color:var(--shn-gold) !important;
text-decoration-color:rgba(201,164,92,.4);
}
body.page-id-8 #postContent ul,
body.page-id-9 #postContent ul,
body.page-id-10 #postContent ul{
background:transparent !important;
border:1px solid var(--shn-line) !important;
padding:18px 26px !important;
}
@media(max-width:750px){
#commonHeader{background:var(--shn-ink) !important;}
}
/* ==========================================================================
明暗切り替え: ライトテーマ(2026-07-24)
の時のみ有効。トークンの意味は変えず値だけ反転する
(--shn-paperは元々「明るいアクセント色」用途だったため、明テーマでは逆に
濃色側の役割になる=ロゴ文字・見出し等の可読性を保つため)。
========================================================================== */
:root[data-theme="light"]{
--shn-ink:#f5f0e3;
--shn-deep:#ece4d0;
--shn-green:#163c32;
--shn-paper:#2a2620;
--shn-gold:#9c7130;
--shn-text:#2a2620;
--shn-text-dim:#6b6a5e;
--shn-line:rgba(42,38,32,.16);
}
/* ==========================================================================
クイックナビ(2026-07-25)
TOPページの潜行体験は変更せず、どのページからでも開ける独立した
「全カテゴリー一覧+早わかり動線」のオーバーレイ。全ページ共通。
========================================================================== */
#shn-qn-btn.shn-qn-btn,
.shn-qn-btn{
position:fixed;left:18px;bottom:18px;z-index:10000;
height:44px;padding:0 16px 0 12px;border-radius:22px;
border:1px solid rgba(201,164,92,.5);
background:var(--shn-deep,#0d1f1a);color:var(--shn-gold,#c9a45c);
font-size:18px;line-height:1;cursor:pointer;
display:flex;align-items:center;gap:7px;justify-content:center;
box-shadow:0 2px 10px rgba(0,0,0,.35);
transition:background .25s ease,transform .2s ease;
}
.shn-qn-btn:hover{transform:scale(1.05);}
/* 2026-07-25追加: アイコンのみでは機能が伝わらない(実地評価より)。
ホバー限定ツールチップはモバイルで機能しないため、常時見えるラベルにする。 */
.shn-qn-btn-icon{font-size:18px;line-height:1;}
.shn-qn-btn-label{
font-family:'Shippori Mincho',serif;font-size:12px;letter-spacing:.08em;
color:var(--shn-gold,#c9a45c);white-space:nowrap;
}
@media(max-width:750px){
.shn-qn-btn{left:12px;bottom:12px;height:40px;padding:0 14px 0 11px;}
.shn-qn-btn-icon{font-size:16px;}
.shn-qn-btn-label{font-size:11px;}
}
.shn-qn-overlay{
position:fixed;inset:0;z-index:10800;
background:rgba(5,8,7,.82);
display:flex;align-items:center;justify-content:center;
padding:24px;
opacity:0;visibility:hidden;
transition:opacity .25s ease;
}
.shn-qn-overlay.is-open{opacity:1;visibility:visible;}
.shn-qn-panel{
width:100%;max-width:640px;max-height:85vh;overflow-y:auto;
background:var(--shn-ink,#0a0f0d);
border:1px solid rgba(201,164,92,.35);
padding:0;
font-family:'Shippori Mincho',serif;
}
.shn-qn-head{
position:sticky;top:0;
display:flex;align-items:center;justify-content:space-between;
padding:22px 26px;
background:var(--shn-ink,#0a0f0d);
border-bottom:1px solid rgba(217,208,184,.16);
}
.shn-qn-title{margin:0;font-size:18px;color:var(--shn-paper,#d9d0b8);font-weight:600;}
.shn-qn-close{
background:transparent;border:1px solid rgba(217,208,184,.3);
color:var(--shn-text-dim,#9aa79e);width:32px;height:32px;
font-size:18px;line-height:1;cursor:pointer;border-radius:50%;
}
.shn-qn-close:hover{color:var(--shn-paper,#d9d0b8);border-color:rgba(217,208,184,.6);}
.shn-qn-section{padding:22px 26px 6px;}
.shn-qn-label{
font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.22em;
color:#c9a45c;text-transform:uppercase;margin:0 0 14px;
}
.shn-qn-quickstart{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;}
.shn-qn-qs-card{
display:flex;flex-direction:column;gap:6px;
padding:16px 18px;text-decoration:none;
border:1px solid rgba(201,164,92,.4);
background:rgba(201,164,92,.06);
transition:background .2s ease,border-color .2s ease;
}
.shn-qn-qs-card:hover{background:rgba(201,164,92,.14);border-color:#c9a45c;}
.shn-qn-qs-title{font-size:14px;color:var(--shn-paper,#d9d0b8);font-weight:600;line-height:1.5;}
.shn-qn-qs-desc{font-size:11.5px;color:var(--shn-text-dim,#9aa79e);line-height:1.6;}
.shn-qn-cats{display:flex;flex-direction:column;}
.shn-qn-cat{
display:flex;align-items:flex-start;gap:12px;
padding:13px 4px;text-decoration:none;
border-bottom:1px solid rgba(217,208,184,.1);
transition:padding-left .2s ease;
}
.shn-qn-cat:hover{padding-left:8px;}
.shn-qn-cat-dot{
width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;
background:var(--shn-qn-acc,#c9a45c);
}
.shn-qn-cat-body{display:flex;flex-direction:column;gap:3px;}
.shn-qn-cat-title{font-size:14px;color:var(--shn-text,#d8cfc0);font-weight:600;}
.shn-qn-cat:hover .shn-qn-cat-title{color:var(--shn-qn-acc,#c9a45c);}
.shn-qn-cat-desc{font-size:11.5px;color:var(--shn-text-dim,#9aa79e);line-height:1.6;}
@media(max-width:560px){
.shn-qn-quickstart{grid-template-columns:1fr;}
}
:root[data-theme="light"] .shn-qn-btn{background:var(--shn-deep,#ece4d0);}
:root[data-theme="light"] .shn-qn-overlay{background:rgba(42,38,32,.5);}
:root[data-theme="light"] .shn-qn-panel{background:var(--shn-ink,#f5f0e3);border-color:rgba(156,113,48,.4);}
:root[data-theme="light"] .shn-qn-head{background:var(--shn-ink,#f5f0e3);}
:root[data-theme="light"] .shn-qn-qs-card{background:rgba(156,113,48,.06);border-color:rgba(156,113,48,.4);}
:root[data-theme="light"] .shn-qn-qs-card:hover{background:rgba(156,113,48,.14);}
/* ==========================================================================
モバイル(ハンバーガー)メニュー: 子項目を持つ4項目(クトゥルフ入門ガイド/
深淵の書棚/派生作品総覧/禁忌の間)を普段は収納し、タップで展開する。
2026-07-30(ユーザー指摘: 常時全展開でメニューが長すぎる)。
親テーマのwp_nav_menu出力(ul.sub-menuは常時表示)自体は変更せず、
子テーマCSS+JS(shinen-menu-accordion.js)でトグルボタンを後付けする。
デスクトップ(#globalMenuList)はホバーで開閉済みのため対象外。
========================================================================== */
#hamburgerMenuList > .menu-item.menu-item-has-children{ position:relative; }
#hamburgerMenuList > .menu-item.menu-item-has-children > a::after{ display:none; }
#hamburgerMenuList > .menu-item.menu-item-has-children > .shn-ham-toggle{
position:absolute; right:0; top:0; width:48px; height:100%;
background:none; border:none; padding:0; margin:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
color:inherit; z-index:2;
}
#hamburgerMenuList > .menu-item.menu-item-has-children > .shn-ham-toggle::after{
content:'\ea84'; font-family:'jin-icons'; font-size:1.05rem;
display:inline-block; transform:rotate(90deg); transition:transform .25s ease;
}
#hamburgerMenuList > .menu-item.menu-item-has-children.shn-ham-open > .shn-ham-toggle::after{
transform:rotate(-90deg);
}
#hamburgerMenuList > .menu-item.menu-item-has-children > ul.sub-menu{
max-height:0; overflow:hidden; opacity:0;
transition:max-height .3s ease, opacity .2s ease;
}
#hamburgerMenuList > .menu-item.menu-item-has-children.shn-ham-open > ul.sub-menu{
max-height:640px; opacity:1;
}
/* ==========================================================================
深淵書架 アクセシビリティ監査 即応パッチ (2026-08-02)
shinen-theme-skin.css の末尾にそのまま追記するだけで機能する自己完結ブロック。
既存行は一切書き換えない。実測はプレビュー環境ではなく本番の以下を対象に行った:
- prod_shinen-theme-skin.css (子テーマ配布物そのもの)
- https://shinenshoka.com/ (TOP, ハンバーガーメニューHTML)
- https://shinenshoka.com/deities/cthulhu/ (神格記事, .shn-arc テンプレート)
- https://shinenshoka.com/mythos-terms/pyromania-term/ (用語記事)
- https://shinenshoka.com/wp-content/themes/jinr/style.css (親テーマ本体)
- https://shinenshoka.com/wp-content/themes/jinr/style-footer.css (親テーマ後半)
- https://shinenshoka.com/wp-content/themes/jinr-child/shinen-archive.css
カスケード上の注意: 本ファイル(shinen-theme-skin.css)は
jinr/style.css → jinr-child/shinen-archive.css → jinr-child/style.css →
jinr-child/shinen-theme-skin.css → jinr/style-footer.css の順で読み込まれる
(本番HTMLの順で確認済み)。つまり jinr/style-footer.css は
このファイルより「後」に読み込まれるため、同じセレクタ強度の宣言は
footer側が勝つ。footer側にある!important付きのoutline:none(お問い合わせ
フォーム等)に勝つため、該当箇所は要素型セレクタで強度を上げるか
クラスを重ね書きする形で対応している(各所にコメントで根拠を明記)。
========================================================================== */
/* --------------------------------------------------------------------------
1. prefers-reduced-motion 対応
実測: 子テーマ側(このファイル)に同ルール0件を確認済み(指示どおり)。
親テーマ(jinr/style.css, jinr/style-footer.css)にも@media print/
prefers-reduced-motionは1件も存在しない。shinen-archive.cssには
.shn-layer-card:hoverのtransformだけを止める局所ルールが1つあるのみで、
サイト全体を止める包括ルールは存在しなかった。
下記は「すべてのCSSアニメーション・トランジション・スムーズスクロールを
実質即時化する」業界標準の包括パターン。要素を個別に列挙する必要がなく、
将来追加されるアニメーションにも自動的に効く。
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 重要(範囲の明記): 上記はCSSで宣言されたanimation/transitionだけを止める。
このサイトのTOPページ「潜行体験」(.shn-dive-*, WebGLキャンバス, dive-scene.js)や
ヘッダー追従(shinen-header-scroll.js)はJavaScriptのrequestAnimationFrame/
scrollIntoView({behavior:'smooth'})で動いている可能性があり、それらはCSSの
prefers-reduced-motioneでは止まらない。JS側でも
matchMedia('(prefers-reduced-motion: reduce)')を見て分岐する実装が別途必要。
(CLAUDE.mdの方針により3D/dive-toppage自体には今回手を入れていない。) */
/* --------------------------------------------------------------------------
2. :focus-visible (フォーカスリング復元)
実測結果: 親テーマ(jinr/style.css, jinr/style-footer.css)全体で
outline:none/0 を課しているセレクタが複数見つかり、代替のフォーカス表示を
一切伴わないものが大半だった。特に影響が大きいもの:
- #HeaderSearchForm .a--searchform-input:focus (全ページのヘッダー検索)
- #postContent .a--searchform-input:focus (404ページの検索)
- #jinrComment input, textarea (コメントフォーム)
- .wpcf7-form *:focus / .wpcf7-text:focus-visible /
.wpcf7-form-control-wrap textarea:focus-visible (問い合わせフォーム、
いずれも !important 付き)
- .c--menu-trigger:focus-visible (ハンバーガーボタン。ただし後述のとおり
このdiv自体がtabindexを持たずキーボードフォーカス不可能なため、
このCSSは現状は無効。HTML側の対応が別途必要、7番の注記参照)
- .JinrPaidpostForm input:focus-visible (使われていれば有料記事フォーム)
サイトの世界観(深緑〜青緑)に合わせ #248f6b を採用。ダーク背景
(#0a0f0d等)・ライト背景(#f5f0e3等)・白系フォーム入力欄のいずれに対しても
コントラスト比3:1以上を確保できる中間輝度の色を計算して選定した
(白地4.03:1 / 黒地4.80:1 / ライトテーマ地3.18〜3.54:1)。
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.c--menu-trigger:focus-visible,
.shn-qn-btn:focus-visible,
.shn-qn-close:focus-visible,
.shn-ham-toggle:focus-visible {
outline: 2px solid #248f6b !important;
outline-offset: 2px !important;
}
/* お問い合わせフォーム(Contact Form 7)専用の上書き。
jinr/style-footer.cssの.wpcf7-form *:focus / .wpcf7-text:focus-visible /
.wpcf7-form-control-wrap textarea:focus-visible は outline:none !important
かつ、上の汎用ルールと同じ詳細度(クラス1+疑似クラス1)かそれ以上で、
しかも読み込み順が本ファイルより後(footer側)のため、!important同士では
詳細度で決着する。クラスを重ね書き(.wpcf7-form.wpcf7-form)して人為的に
詳細度を1段階上げ、読み込み順に関係なく確実に勝たせている。 */
.wpcf7-form.wpcf7-form input:focus-visible,
.wpcf7-form.wpcf7-form textarea:focus-visible,
.wpcf7-form.wpcf7-form select:focus-visible,
.wpcf7-form-control-wrap.wpcf7-form-control-wrap textarea:focus-visible,
.wpcf7-text.wpcf7-text:focus-visible {
outline: 2px solid #248f6b !important;
outline-offset: 2px !important;
}
/* --------------------------------------------------------------------------
3. 記事内テーブルのモバイル横スクロール
実測: 確認できた2記事(cthulhu, pyromania-term)にはtableそのものは
なかったが、Gutenbergの.wp-block-table用スタイル
(jinr/style-footer.css内、border/paddingのみ)にoverflow-xの指定が一切なく、
375px幅で内容がはみ出す実装だと確認した(#postContent table a という
セレクタの存在から、tableが挿入され得ることは確定している)。
本文の主要コンテナは.shn-arc .shn-article(神格・用語・地域・原典読解記事)。
#postContentは利用規約等の固定ページ(shinen-theme-skin.css既存部分が
対象にしている7ページ)で使われる。両方をカバーする。
-------------------------------------------------------------------------- */
.shn-arc .shn-article .wp-block-table,
#postContent .wp-block-table,
.jinr-article .wp-block-table {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Gutenbergブロックを介さない生のtable(カスタムHTML)も同様に処理。
table自体をdisplay:blockにする方式は、theadやborder-collapseの見た目に
軽微な影響が出ることがあるため、.wp-block-table(figureラッパー)側で
スクロールを処理できるケースはそちらを優先し、これは素のtableのみに限定。 */
.shn-arc .shn-article > table,
.shn-arc .shn-article p + table,
#postContent > table,
.jinr-article > table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* --------------------------------------------------------------------------
4. 印刷CSS (@media print)
実測: 親テーマ・子テーマとも@media printは0件。TRPGセッション参照用に
記事を印刷する利用者を想定し、背景白・文字黒・ヘッダー/フッター/
クイックナビ/次に読むカルーセル/アフィリエイト導線(shn-aff-*, shn-works)/
パンくず/タグを非表示にする。装飾用の疑似要素(.shn-hero:beforeの
巨大な⌾記号、text-shadow等)も一括で消える設計。
-------------------------------------------------------------------------- */
@media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
html,
body {
background: #fff !important;
color: #000 !important;
padding-top: 0 !important; /* 固定ヘッダー分の上余白(--shn-header-h)を解除 */
}
#commonHeader,
#hamburgerMenu,
#commonFooter,
.shn-qn-btn,
.shn-qn-overlay,
#snsShareBottom,
#breadCrumb,
.shn-arc .shn-breadcrumbs,
.shn-arc .shn-nextread,
.shn-arc .shn-tags,
.shn-works,
[class*="shn-aff-"],
canvas,
iframe,
video {
display: none !important;
}
a {
text-decoration: underline !important; /* 印刷では色に頼れないため下線で明示 */
}
.shn-arc,
.shn-arc .shn-article,
#postContent,
.jinr-article {
max-width: 100% !important;
width: 100% !important;
}
.shn-arc .shn-hero:before {
display: none !important; /* 巨大な⌾装飾記号(font-size:220px)を消す */
}
}
/* --------------------------------------------------------------------------
5. 低コントラスト文字の是正
監査の主張(「#111背景に#555〜#666の文字」)そのものは実測で該当箇所を
発見できなかった(#555555は本文文字ではなく罫線色・ホバー時色として
customizerが出力しているのみで、地の文としては使われていない)。
一方、実際にCSS変数から背景色×補助テキスト色の組を抽出しコントラスト比を
計算したところ、次の組み合わせが実際にWCAG AAの4.5:1を下回っていた
(計算式: WCAG 2.x相対輝度によるコントラスト比、sRGB値から算出):
a) ライトテーマの --shn-text-dim (#6b6a5e) は
--shn-ink(ライト値 #f5f0e3)に対して4.80:1で合格するが、
--shn-deep(ライト値 #ece4d0、altセクション・カード背景)に対しては
4.31:1で不合格。パンくず・日付・キャプション・出典補足など
「補助テキスト」全般がこのトークンを使っている。
b) .shn-arc .shn-source-host (原典リンクの掲載元表記、10.5px) は
--shn-text-dim を opacity:.75 で追い落としており、ダークテーマでも
--shn-deep 上では 4.43:1 まで落ちて不合格(--shn-ink上は4.78:1で合格)。
ライトテーマでは 2.97:1(--shn-ink上)まで悪化し、明確に不合格。
c) クイックナビパネルの .shn-qn-label (10px, 大文字, 常時表示のラベル)は
var()を介さない直書きの#c9a45c(ゴールド)。ダークテーマのパネル背景
(#0a0f0d)では8.23:1で問題ないが、ライトテーマではパネル背景が
var(--shn-ink)を継承して#f5f0e3(明るいクリーム色)に反転するため、
3.83:1まで落ち不合格。
本文p・見出し(shn-paper/shn-text/#c3c2b5等)は10.77〜12.57:1で全て
合格しており触っていない。暗さ自体(--shn-ink/--shn-deep本体)も変更していない。
色相はそのまま保ち、明度だけ最小限動かした値を採用(必要コントラストを
満たす最小の変更幅を探索して決定)。
-------------------------------------------------------------------------- */
/* a) ライトテーマの補助テキスト色を明度だけ下げる(#6b6a5e→#68675c)。
:root と .shn-arc の両方で同名カスタムプロパティが再宣言されているため
(.shn-arcは自分専用の値を持つ設計)、両方に同じ上書きが必要。
同一セレクタ・同一詳細度なので、ファイル末尾に置くだけで(!important不要)
後勝ちで有効になる。 */
:root[data-theme="light"] {
--shn-text-dim: #68675c;
}
:root[data-theme="light"] .shn-arc {
--shn-text-dim: #68675c;
}
/* b) shn-source-host の追加減光(opacity:.75)を解除。
ダークテーマは地の--shn-text-dim(#9aa79e)がopacity:1なら
7.72:1(--shn-ink)/6.84:1(--shn-deep)と余裕で合格するため、
このopacityを外すだけで両テーマとも解決する(上のa)の修正と合わせて
ライトテーマも4.50:1以上を確保)。 */
.shn-arc .shn-source-host {
opacity: 1;
}
/* c) クイックナビラベルはCSS変数を経由しない直書き値のため専用に上書き。
ゴールドの色相を保ったまま、ライトテーマのパネル背景(#f5f0e3)に対して
4.5:1以上になる最小限の濃さ(#835f28、5.08:1)を採用。 */
:root[data-theme="light"] .shn-qn-label {
color: #835f28;
}
/* 参考として実測はしたが今回は手を入れなかった箇所:
.shn-eyebrow/.shn-latin/.shn-card-grid b/.shn-aside b/.shn-nextread-reason/
.shn-source-link 等、var(--shn-gold)を地の小さなラベル文字として使っている
箇所はライトテーマで3.83:1程度までしか出ず4.5:1を割るが、これらは
--shn-goldというボタン背景・枠線・ホバー色にも共用されている単一トークンで、
トークン自体を変えるとボタンホバー時の文字色(--shn-ink on --shn-gold、
既にライトテーマで3.45:1しかなく今回の変更前から不合格)を
さらに悪化させてしまうため、今回は見送った。ラベル用途だけを分離した
専用トークン導入は別タスクとして切り出すことを推奨。 */
/* --------------------------------------------------------------------------
6. 本文リンクの色以外での識別性
実測: 該当なし(既存で対応済み)。jinr-child/shinen-archive.cssの
.shn-arc .shn-article a.shn-autolink と
.shn-arc .shn-article a:not([class]) が、自動リンク・手動リンクを問わず
本文中のリンクに点線下線(text-decoration-style:dotted)を
2026-07-27付けで既に適用済み(ナビ・カード等のUI用リンクは対象外という
設計もCLAUDE.mdの方針と一致)。追加のCSSは不要。
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
7. ハンバーガーメニュー タップ領域・コントラスト(監査ERR-01 P0)
実測結果(本番HTML+CSSから確認、TOPページ):
- マークアップは