@charset "UTF-8"; /* ========================================================================= custom.css ―― 今回の作業用の追加 / 上書きCSS ・common.css など既存CSSは変更しない方針。追記はこのファイルに集約する。 ・enqueue は functions.php の coco_enqueue_css() で最後に読み込む（＝上書き優先）。 ========================================================================= */ /* ------------------------------------------------------------------------- [白画面対策] common.css に以下の指定がある： html * { visibility:hidden; } ← 既定で全要素を隠す html.wf-active *{ visibility:visible; } ← wf-active が付いたら表示 これは Google CDN 経由の WebFont Loader が に wf-active を付与する まで全要素を隠す「フォント待ち（アンチFOUT）」設計。 CDN（ajax.googleapis.com）の jQuery / webfont.js が読めない・遅い環境では wf-active が付かず、ページが恒久的に真っ白になる。 さらに wf-inactive（フォント失敗）やローダー自体が動かない場合の フォールバックが無いため、少しでも詰まると復帰できない。 対策：既定の非表示を解除し、フォント読込の成否に関わらず常に表示する。 ・custom.css は common.css より後に読み込むため、同一詳細度の `html *` はこちらが後勝ちで上書きされる。 ・`.slick-loading .slick-track` やモーダル等の個別 visibility:hidden は 詳細度が高いため、この上書きの影響を受けない（従来通り動作）。 ・トレードオフ：Webフォント読込中に一瞬フォールバックフォントが見える 場合がある（FOUT）。白画面よりは許容という判断。 ------------------------------------------------------------------------- */ html * { visibility: visible; } /* ------------------------------------------------------------------------- [固定ページのブロックエディタ化：不足パーツの補完] 特集の用意済みパーツに無いものを、ここで補う。 ------------------------------------------------------------------------- */ /* リスト（番号付き・箇条書き） ・テーマのリセットCSSが ol/ul を list-style:none にしており、 特集の editor.css にもリスト装飾が無いためマーカーが出ない。 ・.editor 内のコア「リスト」ブロックにマーカーと字下げを補う。 */ .editor ol:not(.is-brackets) { list-style: decimal; padding-left: 1.6em; } .editor ul:not(.link-list) { list-style: disc; padding-left: 1.6em; } .editor ol:not(.is-brackets) > li, .editor ul:not(.link-list) > li { line-height: 1.7; } .editor ol > li:nth-child(n + 2), .editor ul:not(.link-list) > li:nth-child(n + 2) { margin-top: 0.5em; } /* 外部リンク集（links ページ等） ・コアの「リスト」ブロックに 追加CSSクラス「link-list」を付けて使う。 ・各項目のリンクを、外部アイコン＋区切り線付きのブロックリンクにする（cont-links 相当）。 */ .editor ul.link-list { list-style: none; padding-left: 0; margin-left: 0; } .editor ul.link-list > li { position: relative; margin: 0; } .editor ul.link-list > li:not(:last-child) { border-bottom: dashed 1px #ddd; } .editor ul.link-list > li > a { display: block; padding: 1.4rem 1.4rem 1.4rem 3rem; color: #00281f; text-decoration: none; } .editor ul.link-list > li > a:hover { color: #bea42e; } .editor ul.link-list > li::before { content: "\f08e"; /* FontAwesome: external-link */ font-family: "FontAwesome"; position: absolute; top: calc(50% + 1px); left: 0; transform: translateY(-50%); color: #037367; } /* (1)(2)… 括弧付き番号リスト ・コアの「番号付きリスト」ブロックに 追加CSSクラス「is-brackets」を付けて使う。 ・利用規約の禁止行為リスト等、本文中で「上記（1）（2）」と参照する箇所で使用。 */ .editor ol.is-brackets { list-style: none; counter-reset: brackets-number; padding-left: 0; } .editor ol.is-brackets > li { position: relative; counter-increment: brackets-number; padding-left: 2.2em; } .editor ol.is-brackets > li::before { content: "(" counter(brackets-number) ")"; position: absolute; left: 0; } /* ------------------------------------------------------------------------- [編集画面プレビューを実ページと一致させる：cont-tab / tab-spec] 編集画面(ブロックエディタ)は base.css / common.css を読み込まないため、 ・base.css の th{text-align:left} が効かず、ヘッダーが中央寄せになる ・common.css の html{font-size:62.5%}(rem=10px基準) が効かず、rem 指定の セル余白・列幅がフロントより大きく出る という差が生じる。ここで px 固定＋左寄せに正規化して両環境の見た目を揃える。 ※custom.css はフロントと編集画面の両方で読み込む（後者は add_editor_style）。 ※フロントでは rem 計算と同値のため、見た目は変わらない。 ------------------------------------------------------------------------- */ .cont-tab th, .cont-tab td { padding: 15px; /* contents.css: 1.5rem = 15px */ } .tab-spec thead th { text-align: left; /* base.css: th{text-align:left} を編集画面にも */ } .tab-spec tbody th { width: 200px; /* contents.css: 20rem = 200px */ } .tab-office th { width: 80px; /* contents.css: 8rem = 80px */ } /* ------------------------------------------------------------------------- [運営が視覚編集できる表：見出しブロック(.spec-head)＋コア表ブロック(.spec-table)] カスタムHTMLブロック（編集画面ではコード表示・編集不可）をやめ、標準ブロックで tab-spec 相当の表を組めるようにする。 ・段落ブロックに追加CSSクラス「spec-head」＝グレーの全幅ヘッダー（表の見出し行相当） ・その直下のコア表ブロックに「spec-table」＝枠線＋左列グレー太字 custom.css はフロント/編集画面の両方で読み込むため、編集画面でもそのまま表として 表示・セルを直接編集できる。 ------------------------------------------------------------------------- */ .editor .spec-head { margin-bottom: 0; padding: 15px; background-color: #f7f7f7; border: solid 1px #ddd; border-bottom: none; /* フォントは本文（Noto Sans JP ゴシック）を継承し、表の左列セルと揃える。 ※以前は 'Noto Serif JP'(明朝) を指定していたが、左列と違うとのFBで撤去。 */ color: #00281F; /* 本文と同じ色に統一（旧 #333 は他の黒文字と違って見えるFB） */ font-size: 16px; font-weight: 700; line-height: 1.5; } .editor .spec-table { margin-top: 0; } /* 枠線は separate モデルで全辺を均一な1pxにする。 （border-collapse:collapse は外周が高DPI/拡大時に半ピクセル描画され細く見えるため） ※editor.css の .wp-block-table 用ボーダー（特にスマホ時 table{border:1px}）が spec-table にも効いて右・下が2重になるため、詳細度を上げて（.spec-table.wp-block-table） 打ち消し、枠は「表要素＝上・左／セル＝右・下」だけにする。 */ .editor .spec-table.wp-block-table table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; /* 左列を width 指定どおりに固定する */ border: none; border-top: solid 1px #ddd; border-left: solid 1px #ddd; } .editor .spec-table.wp-block-table table tr { border: 0; /* editor.css の tr ボーダーを打ち消す */ } .editor .spec-table.wp-block-table th, .editor .spec-table.wp-block-table td { padding: 15px; border: none; /* コア/editor.css のセル枠をリセット */ border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; vertical-align: middle; line-height: 1.7; } /* 左列（ラベル列）＝グレー・太字・中央寄せ・幅固定 */ .editor .spec-table td:first-child, .editor .spec-table th:first-child { width: 200px; background-color: #f7f7f7; font-weight: 700; text-align: center; } @media (max-width: 40em) { /* スマホ：左右セルを縦積み */ .editor .spec-table td, .editor .spec-table th { display: block; width: 100%; } .editor .spec-table td:first-child, .editor .spec-table th:first-child { width: 100%; } }