/* EX REDESiGN — assets/css/layout.css * .exr-layout grid (main + sidebar) / content-width override / responsive stacking. * * Selectors: .exr-layout, .exr-main, .exr-sidebar-archive-left, .exr-sidebar-archive-none, .exr-sidebar-archive-right, .exr-sidebar-blog-left, .exr-sidebar-blog-none, .exr-sidebar-blog-right, .exr-sidebar-search-left, .exr-sidebar-search-none, .exr-sidebar-search-right, .exr-sidebar-single-left, … +3 * Variables consumed: --exr-container, --exr-content, --exr-gutter * * Sections (search anchors — grep `@section `): * @section content-width-wired-from-the-content-width-option L66-L100 Content width (本文幅) wired from the content_width option * @section responsive-stack-on-narrow-screens L101-L111 Responsive: stack on narrow screens */ /* ---- Layout: blog / archive / search / single ---- Each context uses the same .exr-layout wrapper. The container max-width applies regardless of sidebar setting so list pages share the same outer width as other pages (matching the container_width option). Sidebar-none variants get the same max-width but no grid — main fills the row alone. */ .exr-layout { max-width: var(--exr-container); margin-inline-start: auto; margin-inline-end: auto; /* 上下パディング: 以前は page.html / single.html の inline style で付与されていたが、 body class オーバーライド (.exr-page-layout-flush など) を可能にするため CSS で主導する設計に変更。 左右余白は --exr-gutter (「コンテナ余白」設定) 、上下余白はデフォルト 1.75rem。 */ /* 上下 padding は 2 層 fallback: 1. --exr-layout-pad-top/bottom ← dynamic-css.php がユーザー明示設定 (Layer 1/2/3 解決値) を出す 2. それがなければ --exr-layout-pad-{top,bottom}-mode ← モード別初期値 (下記 :where で 0 に上書き) 3. それもなければ 1.75rem (標準帯) これで「ユーザー設定 > モード初期値」の cascade が CSS だけで成立。 */ padding-block-start: var(--exr-layout-pad-top, var(--exr-layout-pad-top-mode, 1.75rem)); padding-block-end: var(--exr-layout-pad-bottom, var(--exr-layout-pad-bottom-mode, 1.75rem)); padding-inline-start: var(--exr-gutter, 2rem); padding-inline-end: var(--exr-gutter, 2rem); } body.exr-sidebar-blog-right .exr-layout, body.exr-sidebar-blog-left .exr-layout, body.exr-sidebar-archive-right .exr-layout, body.exr-sidebar-archive-left .exr-layout, body.exr-sidebar-search-right .exr-layout, body.exr-sidebar-search-left .exr-layout, body.exr-sidebar-single-right .exr-layout, body.exr-sidebar-single-left .exr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; } /* WordPress's is-layout-flow rule adds `margin-block-start: 20px` to every child except the first — in a grid layout that pushes the sidebar 20px down relative to main, so the two columns no longer align at the top. Reset to 0 inside the grid layouts so both columns share the same top edge (visible when each column has a card background). */ body.exr-sidebar-blog-right .exr-layout > *, body.exr-sidebar-blog-left .exr-layout > *, body.exr-sidebar-archive-right .exr-layout > *, body.exr-sidebar-archive-left .exr-layout > *, body.exr-sidebar-search-right .exr-layout > *, body.exr-sidebar-search-left .exr-layout > *, body.exr-sidebar-single-right .exr-layout > *, body.exr-sidebar-single-left .exr-layout > * { margin-block-start: 0; } /* Sidebar-none on LIST pages (blog/archive/search): let main-area children expand to the full main width instead of being capped by contentSize. Single/page contexts are deliberately excluded — their article body must stay constrained to the user's content_width for reading comfort, even when no sidebar is shown. */ body.exr-sidebar-blog-none .exr-main > *, body.exr-sidebar-archive-none .exr-main > *, body.exr-sidebar-search-none .exr-main > * { max-width: none; } /* ── Content width (本文幅) wired from the content_width option ── --exr-content is emitted by dynamic.php from the option. Override WP's global content-size CSS variable on the article container so the user's setting actually takes effect; the constrained layout already inside .exr-main reads the var and caps direct children (title, date, image, post-content). The post-content block is itself constrained, and inherits the same overridden var, so paragraphs/headings inside follow too. This applies to single posts and pages — the contexts where article-style reading width matters. List pages (blog/archive/search) are unaffected. */ body.single .exr-main, body.page .exr-main { --wp--style--global--content-size: var(--exr-content, 680px); } /* さらに nested な constrained layout (.exr-main 配下のすべての is-layout-constrained 要素)にも直接設定し、 cascade の途中で :root の 1200 に戻されるのを防ぐ。 */ body.single .exr-main :where(.is-layout-constrained), body.page .exr-main :where(.is-layout-constrained) { --wp--style--global--content-size: var(--exr-content, 680px); } /* "left" variants flip the columns and reassign grid-column on the children. */ body.exr-sidebar-blog-left .exr-layout, body.exr-sidebar-archive-left .exr-layout, body.exr-sidebar-search-left .exr-layout, body.exr-sidebar-single-left .exr-layout { grid-template-columns: 300px minmax(0, 1fr); } body.exr-sidebar-blog-left .exr-layout > main, body.exr-sidebar-archive-left .exr-layout > main, body.exr-sidebar-search-left .exr-layout > main, body.exr-sidebar-single-left .exr-layout > main { grid-column: 2; } body.exr-sidebar-blog-left .exr-layout > .exr-sidebar-slot, body.exr-sidebar-archive-left .exr-layout > .exr-sidebar-slot, body.exr-sidebar-search-left .exr-layout > .exr-sidebar-slot, body.exr-sidebar-single-left .exr-layout > .exr-sidebar-slot { grid-column: 1; } /* "none" variants hide the sidebar slot entirely. */ body.exr-sidebar-blog-none .exr-layout > .exr-sidebar-slot, body.exr-sidebar-archive-none .exr-layout > .exr-sidebar-slot, body.exr-sidebar-search-none .exr-layout > .exr-sidebar-slot, body.exr-sidebar-single-none .exr-layout > .exr-sidebar-slot { display: none; } /* ---- Responsive: stack on narrow screens ---- */ @media (max-width: 1024px) { body.exr-sidebar-blog-right .exr-layout, body.exr-sidebar-blog-left .exr-layout, body.exr-sidebar-single-right .exr-layout, body.exr-sidebar-single-left .exr-layout { display: block; } .exr-layout > .exr-sidebar-slot { margin-top: 3rem; } } /* ============================================================ Per-post page layout (background / padding) overrides _exr_page_layout meta により body にクラスが付与される。 - exr-page-layout-no-background: 背景色透過 - exr-page-layout-flush: 背景色透過 + .exr-layout 上下余白 0 ============================================================ */ /* ============================================================ * @section page-layout-section * セクション型: main のカード装飾 (background/padding/radius/shadow) を解除し、 * .exr-layout の上下左右余白 (薄色帯) と .wp-block-post-content の constrained レイアウト (= 本文中央寄せ) * は維持。alignfull ブロック (CTA など) が画面全幅バンドとして表示でき + 通常ブロックは * 読みやすさのため中央寄せのまま。flush よりも「本文と LP 風バンドの両立」を意図したモード。 * * 【flush との違い】 * - flush: .exr-layout 余白 0 + main padding 0 + post-content max-width なし (全てブラウザ端まで) * - section: .exr-layout 余白維持 + main padding 0 + post-content max-width 維持 (本文は中央寄せ) * ========================================================= */ body.exr-page-layout-section .exr-main { background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } /* main を framing していた .exr-layout の上下 padding (薄色帯) も 0 化し、 alignfull CTA と footer がシームレスに接続するようにする。 左右 padding (gutter) は維持 → normal block は constrained で中央寄せ、 alignfull は画面端まで、という使い分けを保つ。 */ /* セクション型のモード別初期値: 下余白 0 (alignfull CTA とフッターをシームレス接続) :where() で specificity 0 にして、ユーザー設定 (上の --exr-layout-pad-bottom) が勝てるようにする。 */ :where(body.exr-page-layout-section) { --exr-layout-pad-bottom-mode: 0; } body.exr-page-layout-no-background, body.exr-page-layout-flush { background-color: transparent; } /* 全画面 (flush) モードの上下余白初期値: 上下とも 0 (LP 向け、ヘッダー/フッター直結) ユーザー設定で上書き可能。 */ :where(body.exr-page-layout-flush) { --exr-layout-pad-top-mode: 0; --exr-layout-pad-bottom-mode: 0; } body.exr-page-layout-flush .exr-layout { /* すべて !important 付き。 WP の自動生成 CSS (例: .has-global-padding 関錣) との specificity 競合を避けるため。 上下 padding は上記 :where モード変数で控制 (ユーザー設定 > モード初期値の cascade を有効化)。 */ max-width: none !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; margin-block-start: 0 !important; } /* flush モードで header 下/上の余白を確実に消す (WP の --wp--style--block-gap ベース rule や header 要素会社に付加される余白を上書き) */ body.exr-page-layout-flush .wp-site-blocks > * + * { margin-block-start: 0 !important; } body.exr-page-layout-flush .wp-site-blocks > header.wp-block-template-part { margin-block-end: 0 !important; padding-block-end: 0 !important; } /* flush モードで .exr-main のカード装飾 (dynamic-css.php が single_content_bg 設定から出力している background/padding/radius/shadow) を解除。 */ body.exr-page-layout-flush .exr-main { background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } /* flush モード: post-content (.entry-content) の max-width 制限を解除。 これをしないと alignfull ブロックも親の .entry-content (max-width: var(--wp--style--global--content-size)) に縛られ viewport 全幅まで広がらない。 */ body.exr-page-layout-flush .wp-block-post-content { max-width: none !important; } /* ============================================================ トップレベルテンプレート要素間の gap をゼロ (全ページ共通) — WP はデフォルトで :where(.wp-site-blocks) > * { margin-block-start: 24px } を出力し、header / hero / main / footer の間に 24px の隔たりを作る。 その隔たりは body 背景 (グレー) として表示され、独立したストリップとして設計不見意。 このテーマでは .exr-layout の padding-block (1.75rem) と .exr-main の padding (1.5rem) で間隔を管理しているため、 wp-site-blocks 直下の gap は不要。 ============================================================ */ .wp-site-blocks > * + * { margin-block-start: 0; } /* ============================================================ * @section alignfull-bg-overlap * .exr-main にカード背景 (background-color + padding + radius) を付与しているとき、 * main 内の .alignfull + 背景色付きブロック (代表: grevia/cta alignfull モード) が * first-child / last-child のとき、main の上端 / 下端 padding 領域に main の白背景 * がチラ見えし UI バグと認識される問題を解決する。 * * 負 margin-block-{start,end} で main の padding (var(--exr-main-padding)) を visually * 被う、alignfull ブロックの背景色が main の上下端と一致するようにする。 * * 【限定条件】 * - .has-background クラス付き (背景色を UI で選んだ alignfull のみ) * - first-child OR last-child (中間配置は上下隣接ブロックを覆うため除外) * * 【中間配置について】alignfull 背景色付きブロックを main 中間に配置すると、 * その上下に main の白背景が見える。これはデザイン上意図的に選択されたものと見なし、 * テーマでは覆い隠さない設計。UX 上は「alignfull ブロックはページ末尾 or 先頭推奨」を edit UI で誘導。 * ========================================================= */ .exr-main > .wp-block-post-content > .alignfull.has-background:last-child, .exr-main > .alignfull.has-background:last-child { margin-block-end: calc(-1 * var(--exr-main-padding, 1.5rem)); } .exr-main > .wp-block-post-content > .alignfull.has-background:first-child, .exr-main > .alignfull.has-background:first-child { margin-block-start: calc(-1 * var(--exr-main-padding, 1.5rem)); }