@charset "UTF-8"; /* Theme Name: SANGO Child Theme URI: https://saruwakakun.design Author: SARUWAKA Author URI: https://saruwakakun.com Template: sango-theme Version: 3.0 */ /*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/ /* ========================================================================== Phase1.17: SP Drawer scrollbar layout shift対策 research/20_sp_drawer_close_lifecycle.md参照。 WordPress core標準(wp-includes/blocks/navigation/style.css)は、 core/navigationのDrawerを開いた際にへ`has-modal-open`クラスを 付与し、`html.has-modal-open{overflow:hidden}`で背面ページのスクロールを ロックする(SANGOではなくWordPress本体の標準仕様。実ファイルで確認済み)。 実測(Chrome DevTools Protocol、Desktop classic scrollbar環境の 768/850/899px)の結果、この`overflow:hidden`によって縦scrollbar (実測15px)が一時的に消え、その分だけ`document.documentElement.clientWidth` が広がり、背面ページの中央寄せ要素(main等)の中心座標が最大7.5px程度 右へずれることを確認した。Drawerを閉じる際は、is-menu-open解除から 約100ms以内(Drawer panelの300ms transformアニメーションがまだ 進行中の段階)でこの`has-modal-open`が外れ、scrollbarが復帰して 背面ページが元の位置へ瞬時に戻ることも確認した(閉じるアニメーション中に 背面レイアウトが変化している)。 なお、375/390/430pxのモバイルviewport(mobile:trueエミュレーション、 overlay scrollbar相当)では、scrollbarWidthは常に0で、このレイアウト シフトは発生しないことも確認済み。 `scrollbar-gutter:stable`をへ適用するA/Bテストの結果、 Desktop classic scrollbar環境(768/850/899px)では背面ページの中心座標が open/closing/closed全状態で完全に不変になることを確認し、モバイル viewport(375/390/430px)およびPC幅(1024px)では測定可能な副作用が ないことも確認した(詳細はresearch/12・research/20のPhase1.17参照)。 breakpoint条件分岐は導入せず、最もシンプルな無条件ルールとして 全viewportへ適用する(900px境界でgutter有無が切り替わることによる 不自然な変化を避けるため)。 Drawer panel geometry・transform・300ms・ease-out・open/closeロジック・ ARIA・focus管理には一切触れていない。独自JavaScript・will-changeは 追加していない。WordPress標準のスクロールロック機構 (html.has-modal-open{overflow:hidden})自体も無効化していない (scrollbar-gutterはスクロールロックとは独立した、レイアウト幅の 予約に関するプロパティ)。 */ html { scrollbar-gutter: stable; } /* ========================================================================== 日之本屋 ヘッダー/フッター 共通UI(Phase1 / Phase1.1 / Phase1.2 / Phase1.3 統合版) research/07_ui_design_system.md / research/09_sango_implementation_map.md 準拠 research/12_step7_implementation_log.md に各修正の経緯・根拠を記録 ========================================================================== */ /* --- ヘッダー全体の装飾 --- */ .sgb-header--no-shadow { border-bottom: 1px solid #E4E4E1; } /* --- ヘッダーロゴ・サイト名のサイズ(PC/SP) --- */ .sgb-site-branding .wp-block-site-logo img { width: 48px; height: 48px; } .sgb-site-branding .wp-block-site-title a { /* Phase 2B-2.8: ユーザー実機フィードバック(小さく見づらい)を受け18px→22pxへ。 伊藤園コーポレートサイト(itoen.co.jp)のHeader視認性を参考にしつつ(レイアウト・ 色・hover・フォント自体はコピーせず文字サイズ感のみ参考)、既存Logo/900px breakpoint/Header高さとのバランスで最終決定。 */ font-size: 22px; font-weight: 700; } @media screen and (max-width: 480px) { .sgb-site-branding { display: flex; align-items: center; gap: 8px; } .sgb-site-branding .wp-block-site-logo img { width: 32px; height: 32px; } .sgb-site-branding .wp-block-site-title a { font-size: 17px; /* Phase 2B-2.8: 15px→17px。PC(22px)をそのまま適用せずSP専用に調整 */ } } /* ========================================================================== Phase 2B-2.8: Header Navigation Typography PC Header Navigation(.wp-block-sgb-header-navigation、Drawer内の .wp-block-sgb-header-mobile-navigationとは別クラスのため、PCのみに限定 適用される。CTA(is-header-cta)も同じ.wp-block-navigation-item__content クラスを持つため、この1ルールで通常項目・CTAとも統一される)。 ========================================================================== */ .sgb-header .wp-block-sgb-header-navigation .wp-block-navigation-item__content { font-size: 18px; } /* --- 重大修正(Phase1.2): ヘッダー内側コンテナが全幅で縦積み(column)になっていた --- */ .sgb-header__inner.sgb-header__inner--default { flex-direction: row; justify-content: space-between; align-items: center; } /* --- 重大修正(Phase1.2): モバイルナビの外枠が width:100vw だった --- */ .sgb-header .wp-block-sgb-header-mobile-navigation { width: auto; overflow-x: visible; } /* --- 重大修正(Phase1.2): ハンバーガーボタンがSANGO側CSSで無条件に非表示だった --- */ .sgb-header .wp-block-sgb-header-mobile-navigation .wp-block-navigation__responsive-container-open { display: flex; } /* ハンバーガーボタン自体の見た目(過剰な装飾はしない。Navy一色のアイコンのみ) */ .sgb-header__mobile-nav .wp-block-navigation__responsive-container-open, .sgb-header__mobile-nav .wp-block-navigation__responsive-container-close { background: transparent; border: none; cursor: pointer; padding: 8px; } /* 【Phase1.14で分離・Phase1.14.1で詳細度強化・Phase1.14.2で!important追加】 閉じた状態の☰はNavy Header上にあるためWhiteへ変更。開いた状態の×は Phase1.11/1.12のWhite panel上にあるためNavyを維持する(Header配色変更と Drawer配色は独立させる。指示#14・#16準拠)。 WordPress core標準の`.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg{fill:currentColor}` (詳細度0,1,1)は、詳細度計算・Desktop/Mobile UA双方の実測(Chrome DevTools Protocol、navigator.userAgentを実際に差し替えて比較)のいずれでも このルールに上回られている形跡は確認できなかった(fillは一貫して 意図どおりの値だった)。Phase1.14.2では、実機での見え方の懸念が 繰り返し報告されたことを踏まえ、`.sgb-header__mobile-nav`スコープに 限定した`!important`を追加し、どのような競合が将来発生しても 確実にこの値が勝つようにした(指示#13準拠、サイト全体には波及しない)。 */ .sgb-header .sgb-header__mobile-nav .wp-block-navigation__responsive-container-open svg { fill: #fffffc !important; } .sgb-header .sgb-header__mobile-nav .wp-block-navigation__responsive-container-close svg { fill: #0d3255 !important; } /* 【Phase1.14.1で追加】☰(ヘッダー内、通常フロー配置)と×(Drawerパネル内、 position:absolute;top:0;right:0がWordPress core標準)は、実測(375/390/430px)で 中心座標が横16px・縦10px、3幅すべて一定してずれていた。Drawer panel自体の width/position/right/top/transform/transitionには触れず、×ボタン自身の position:absolute用top/rightのみを調整して☰と中心を一致させる (指示#7準拠、調整対象はボタン位置のみ)。 */ .sgb-header__mobile-nav .wp-block-navigation__responsive-container-close { top: 10px; right: 16px; } /* 【Phase1.5で追加】メニューグループ全体の左余白。 個別項目ではなく、5項目を包む親コンテナ (.wp-block-navigation__responsive-container-content。WordPress標準の display:flex; justify-content:flex-start な入れ物で、実測ではpadding:0だった) にのみ padding-left を設定する。項目側(