/** * Front + editor shared style for bcp/sticky-cta. * * block.json の `style` と `editorStyle` で同じファイルを指している。 * このブロックを置かないページには WP コアが自動で配信しない。 * * このブロックは「fixed コンテナ役」だけ。 * 内側のボタンは core/buttons + core/button(WP コア + Ollie の variation + * Ollie Pro Button Icon)で構築されるため、ボタン外観は CSS で**触らない**。 * ここでは: * - fixed wrapper の位置 / 幅 / 出現アニメーション * - core/button が均等幅で横並びになるための flex 上書き * - dismiss(×)ボタン * - エディタプレビュー時の見え方 * だけを書く。色 / 余白 / タイポ / 角丸 / シャドウは WP 標準パネル経由で当たる。 */ /* wrapper は画面下端 (or 上端) に張り付く fixed コンテナ役。 幅は **2 つの独立した軸**で制御する(core/group と同じ設計): 1. **ブロックツールバーの「配置」 (`supports.align: ["wide", "full"]`)** = wrapper 自身の幅 - 未指定 → wrapper は画面全幅(left:0; right:0、fixed の自然なふるまい) - `.alignwide` → wrapper の max-width が theme.json `wide-size` で中央寄せ - `.alignfull` → wrapper は画面全幅(default と同じ no-op だが明示) 2. **レイアウトパネル (`supports.layout.constrained`)** = wrapper 内側 child の幅 - 「コンテンツ幅」 = 内側 child の max-width - 「幅広」 = 内側 child が `alignwide` のときの max-width - 「コンテント幅を使用するインナーブロック」トグル = constrained / default の切替 - WP コアの `wp-container-*` クラスが wrapper 直下 child に CSS 自動注入 wrapper 自身を細くしたい場合は (1) のツールバー、内側 child を絞りたい場合は (2) の サイドバーを使う。core/group のトップレベル group と完全に同じ操作感。 */ .bcp-sticky-cta { --bcp-cta-gap: var( --wp--preset--spacing--20, 8px ); --bcp-cta-padding-block: var( --wp--preset--spacing--20, 8px ); --bcp-cta-padding-inline: var( --wp--preset--spacing--30, 12px ); /* v2.8.0 — キャプションスタイルの「受付中」インジケータ色。テーマの custom トークンを 優先し、無ければ LINE グリーン相当にフォールバック(子テーマ側で上書き可)。 */ --bcp-cta-dot-open: var( --wp--custom--line-green, #17b45a ); /* 入場(スタッガー)アニメのイージング。vip2026 の `--spring-easing` (linear() ベースのスプリング)を採用する。vip2026 では core-group.css に定義されるが、 同ファイルは core/group が無いページでは読み込まれない条件付き配信のため、同値を var() の fallback に持たせ、ページ構成や配布先テーマに関係なく必ずスプリングが効くようにする。 */ --bcp-stagger-ease: var( --spring-easing, linear(0 0%,0.004379 1%,0.017027 2%,0.037197 3%,0.064139 4%,0.097098 5%,0.135326 6%,0.178089 7%,0.224667 8%,0.274366 9%,0.326515 10%,0.380476 11%,0.435642 12%,0.491445 13%,0.547353 14%,0.602874 15%,0.65756 16%,0.711 17%,0.76283 18%,0.812725 19%,0.860402 20%,0.90562 21%,0.948177 22%,0.98791 23%,1.024693 24%,1.058435 25%,1.089077 26%,1.116593 27%,1.140987 28%,1.162286 29%,1.180545 30%,1.19584 31%,1.208266 32%,1.217937 33%,1.22498 34%,1.229538 35%,1.231761 36%,1.231811 37%,1.229853 38%,1.226059 39%,1.220603 40%,1.213659 41%,1.205403 42%,1.196006 43%,1.185638 44%,1.174463 45%,1.162638 46%,1.150318 47%,1.137645 48%,1.124757 49%,1.111781 50%,1.098837 51%,1.086034 52%,1.073472 53%,1.061241 54%,1.04942 55%,1.038082 56%,1.027286 57%,1.017084 58%,1.007519 59%,0.998624 60%,0.990425 61%,0.982939 62%,0.976176 63%,0.970139 64%,0.964824 65%,0.960222 66%,0.956318 67%,0.953091 68%,0.950518 69%,0.94857 70%,0.947216 71%,0.946423 72%,0.946154 73%,0.946371 74%,0.947035 75%,0.948105 76%,0.949542 77%,0.951304 78%,0.953352 79%,0.955646 80%,0.958146 81%,0.960816 82%,0.963619 83%,0.966522 84%,0.96949 85%,0.972494 86%,0.975505 87%,0.978496 88%,0.981443 89%,0.984323 90%,0.987118 91%,0.989809 92%,0.992382 93%,0.994822 94%,0.99712 95%,0.999265 96%,1.001252 97%,1.003076 98%,1.004733 99%,1.006221 100%) ); position: fixed; left: 0; right: 0; z-index: 99; background-color: var( --wp--preset--color--base, #ffffff ); color: var( --wp--preset--color--main, #1e1e26 ); padding-block: var( --bcp-cta-padding-block ); padding-inline: var( --bcp-cta-padding-inline ); transform: translateY( 110% ); transition: transform 0.3s ease; pointer-events: none; } /* alignwide: wrapper 自身の max-width をサイドバー「幅広」値 (`--bcp-cta-wide-size`) で絞り中央寄せ。 サイドバー「幅広」未入力時は theme.json `--wp--style--global--wide-size` にフォールバック。 position: fixed + left:0 + right:0 + max-width + margin-inline: auto の組合せで fixed 文脈でも中央寄せが効く。 */ .bcp-sticky-cta.alignwide { max-width: var( --bcp-cta-wide-size, var( --wp--style--global--wide-size, 1200px ) ); margin-inline: auto; } /* alignfull: wrapper を画面全幅に。 root-padding-aware テーマ(vip2026 / Ollie は theme.json `useRootPaddingAwareAlignments:true`)では コアが `.has-global-padding > .alignfull` に負の inline margin(`calc(var(--wp--style--root--padding-*) * -1)`)を 注入する。通常ブロックでは画面端まで伸ばす意図で正しいが、本ブロックは position:fixed + left/right:0 で 既に画面端に張り付いているため、この負マージンは wrapper を viewport より root padding 2 個分広げ、 モバイルでページ全体に不要な横スクロールを生む。先頭クラスを 2 度書いて specificity を (0,3,0) にし、 コアの (0,2,0) を確実に打ち消す。`!important` は使わない — サイドバー「マージン」の inline style には 負けたままにし、cta/sticky-shop 等の余白指定パターン(floating レイアウト)を壊さないため。 */ .bcp-sticky-cta.bcp-sticky-cta.alignfull { max-width: none; margin-inline: 0; } .bcp-sticky-cta--bottom { bottom: 0; padding-bottom: calc( var( --bcp-cta-padding-block ) + env( safe-area-inset-bottom ) ); } .bcp-sticky-cta--top { top: 0; bottom: auto; transform: translateY( -110% ); padding-top: calc( var( --bcp-cta-padding-block ) + env( safe-area-inset-top ) ); } .bcp-sticky-cta.is-visible { transform: translateY( 0 ); pointer-events: auto; } .bcp-sticky-cta.is-dismissed { display: none; } @media ( max-width: 767px ) { .bcp-sticky-cta--show-desktop-only { display: none; } } @media ( min-width: 768px ) { .bcp-sticky-cta--show-mobile-only { display: none; } } /* sentinel: 1px の無形状要素。inview トリガーの監視対象。 */ .bcp-sticky-cta__sentinel { display: block; height: 1px; margin: 0; padding: 0; background: transparent; pointer-events: none; } /* core/buttons は WP コア標準だと「各ボタンは text 幅」だが、sticky CTA は均等幅に伸ばすため flex:1 1 0 を強制。ユーザーの core/button.width(25/50/75/100%)指定は WP コアの inline style で勝つので `:not([class*="has-custom-width"])` ガードは不要。 */ .bcp-sticky-cta .wp-block-buttons { flex: 1 1 auto; display: flex; flex-wrap: nowrap; margin: 0; width: 100%; } /* ボタン間の間隔(gap)は詳細度 0 の :where() で「既定値」として与える。 ユーザーが内側 core/buttons の「ブロックの間隔」を設定すると WP は `.wp-container-core-buttons-*{gap:…}`(詳細度 0,1,0)を生成する。 これを通常の `.bcp-sticky-cta .wp-block-buttons`(0,2,0)で書くと BCP 側が 詳細度で勝ってしまい、ユーザー設定がフロント(と編集画面)に反映されない。 :where() で 0 詳細度に落とすことで WP 生成ルールが常に勝ち、間隔設定が効く。 「ブロックの間隔」未設定のときだけこの既定 (--bcp-cta-gap) が当たる。 */ :where( .bcp-sticky-cta .wp-block-buttons ) { gap: var( --bcp-cta-gap ); } /* sticky CTA は既定では各ボタンを均等幅に伸ばしたいので flex:1 1 0 を当てる。 ただし flex:1 1 0 は flex-basis:0 を含むため、ユーザーが各ボタンに「幅」(25/50/75/100%)を 設定しても flex-basis:0 が width に勝ち、フロントで全ボタンが均等になってしまう (編集画面はコア側の幅処理が効くため見た目が食い違う)。そこで幅指定済みのボタン (.has-custom-width)には flex:1 1 0 を当てず、コア既定の flex(0 1 auto = flex-basis:auto)の まま width を活かす。:where() で囲って specificity を (0,3,0) に保ち、mobileLayout の @media ルール(同 0,3,0、ソース順で勝つ)との優先順位を崩さない。 */ .bcp-sticky-cta .wp-block-buttons > .wp-block-button { min-width: 0; margin: 0; } .bcp-sticky-cta .wp-block-buttons > .wp-block-button:not( :where( .has-custom-width ) ) { flex: 1 1 0; } .bcp-sticky-cta .wp-block-button .wp-block-button__link, .bcp-sticky-cta .wp-block-button .wp-element-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; gap: var( --wp--preset--spacing--10, 6px ); line-height: var( --wp--custom--line-height--snug, 1.2 ); } /* === モバイル時のボタン配置(mobileLayout 属性 / 親 Inspector「モバイル時のボタン配置」)=== wrapper に bcp-sticky-cta--mlayout-* が付く。shrink(既定)は上のベース実装 (1 行・均等幅で縮小)そのままなので CSS 不要。wrap / stack / scroll は モバイル幅でのみ core/buttons の flex を切り替える。 ベースの `.bcp-sticky-cta .wp-block-buttons` 系と specificity 同点(0,2,0 / 0,3,0)なので、 必ずベース定義より後ろに置きソース順で勝たせている。 */ @media ( max-width: 767px ) { /* 折返し: 2 列を基準に改行(端数ボタンは grow で行を埋める) */ .bcp-sticky-cta--mlayout-wrap .wp-block-buttons { flex-wrap: wrap; } .bcp-sticky-cta--mlayout-wrap .wp-block-buttons > .wp-block-button { flex: 1 1 calc( 50% - var( --bcp-cta-gap ) ); } /* 縦積み: 全幅で縦に並べる(column + 既定の align-items:stretch で全幅化) */ .bcp-sticky-cta--mlayout-stack .wp-block-buttons { flex-direction: column; } .bcp-sticky-cta--mlayout-stack .wp-block-buttons > .wp-block-button { flex: 0 0 auto; } /* 横スクロール: 1 行のまま、はみ出しはバー内で横スクロール。 overflow-x をバー内に閉じ込めるのでページ全体には横スクロールが波及しない。 */ .bcp-sticky-cta--mlayout-scroll .wp-block-buttons { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .bcp-sticky-cta--mlayout-scroll .wp-block-buttons::-webkit-scrollbar { display: none; } .bcp-sticky-cta--mlayout-scroll .wp-block-buttons > .wp-block-button { flex: 0 0 auto; min-width: 9rem; } } /* === ボタンごとのデバイス別表示(bcpHideOn 属性 / 各 core/button の Inspector「このボタンを隠す」)=== extend-button.php の render_block が外側 .wp-block-button に bcp-hide-mobile / bcp-hide-desktop を付与する。1 つの sticky-cta で PC とモバイルのボタン構成を 出し分けるための仕組み。ブレークポイント 768px は showOn と揃える。 .bcp-sticky-cta 配下に限定し、万一 class が外部に漏れても他所のボタンを消さない。 */ @media ( max-width: 767px ) { .bcp-sticky-cta .wp-block-buttons > .wp-block-button.bcp-hide-mobile { display: none; } } @media ( min-width: 768px ) { .bcp-sticky-cta .wp-block-buttons > .wp-block-button.bcp-hide-desktop { display: none; } } /* === モバイルで補足テキストだけ隠す (bcpInfoHideOn = mobile) === v2.8.0 「24時間受付中」が LINE / WEB / 電話で 3 重複してモバイルの縦スペースを潰す問題への対処。 ボタンは残したまま補足だけ落とす(= 連動中の電話だけ状態を出す構成にできる)。 ブレークポイントは bcpHideOn / showOn と同じ 767px に揃える。 `.has-bcp-info::after` はエディタ canvas プレビュー側の同等表現。 */ @media ( max-width: 767px ) { .bcp-sticky-cta .wp-block-button.bcp-info-hide-mobile .bcp-sticky-cta__sublabel, .bcp-sticky-cta .wp-block-button.bcp-info-hide-mobile .bcp-sticky-cta__badge, .bcp-sticky-cta .wp-block-button.bcp-info-hide-mobile .bcp-sticky-cta__caption, .wp-block-button.has-bcp-info.bcp-info-hide-mobile::after { display: none; } /* バッジ用に確保していた上余白も返す。 */ .wp-block-button.has-bcp-info.bcp-info-hide-mobile.bcp-info-style-badge { margin-top: 0; } } /* === スタッガード登場演出(staggered 属性 / 親 Inspector「ボタンを順番に表示」)=== wrapper に bcp-sticky-cta--staggered が付くと、バーのスライドインに加えて 内側のボタンを 1 つずつ時間差でフェードインさせる。view.js が付ける .is-visible を トリガーにした純 CSS 実装で、JS 追加は不要(.is-visible が付いた瞬間に animation が発火)。 staggered OFF(既定)時はこのルールが一切マッチしないので従来どおり一斉表示。 Ollie Pro の sequential アニメと同じ発想だが、本ブロック専用に自前実装している。 */ @keyframes bcp-sticky-cta-stagger-in { from { opacity: 0; transform: translateY( 0.5rem ); } to { opacity: 1; transform: translateY( 0 ); } } .bcp-sticky-cta--staggered.is-visible .wp-block-buttons > .wp-block-button { animation: bcp-sticky-cta-stagger-in var( --bcp-stagger-duration, 420ms ) var( --bcp-stagger-ease ) both; /* バーのスライドイン(transform 0.3s)が終わってからボタンを順次フェードさせる。 base 遅延を入れないとスライド中(画面外〜途中)に演出が消化され「効いていない」 ように見える。delay = base + 各ボタン index × step。 */ animation-delay: calc( var( --bcp-stagger-base, 0.2s ) + var( --bcp-stagger-index, 0 ) * var( --bcp-stagger-step, 0.07s ) ); } /* 各ボタンの順番(--bcp-stagger-index)。1 個目は 0 = 既定なので指定不要。 bcpHideOn で display:none のボタンも nth-child の数には含まれる(順番が 1 つ飛ぶ程度の 軽微なズレは許容)。最大 6 ボタンまで面倒を見る。 */ .bcp-sticky-cta--staggered .wp-block-buttons > .wp-block-button:nth-child(2) { --bcp-stagger-index: 1; } .bcp-sticky-cta--staggered .wp-block-buttons > .wp-block-button:nth-child(3) { --bcp-stagger-index: 2; } .bcp-sticky-cta--staggered .wp-block-buttons > .wp-block-button:nth-child(4) { --bcp-stagger-index: 3; } .bcp-sticky-cta--staggered .wp-block-buttons > .wp-block-button:nth-child(5) { --bcp-stagger-index: 4; } .bcp-sticky-cta--staggered .wp-block-buttons > .wp-block-button:nth-child(6) { --bcp-stagger-index: 5; } /* 動きを減らす設定では時間差フェードを無効化(ボタンは即表示)。 メインルールと同詳細度 (0,4,0) なので、後ろに置きソース順で勝たせる。 */ @media ( prefers-reduced-motion: reduce ) { .bcp-sticky-cta--staggered.is-visible .wp-block-buttons > .wp-block-button { animation: none; } } /* === Subtitle (bcpSubtitle) === フロント側は render_block filter が の inner を {inner}… で包む。base ルール(bare class)は icon 無しボタン用、`[class*="has-icon__"]` 系は Ollie Pro Button Icon の `.wp-block-button[class*=has-icon__] .wp-block-button__link span { line-height: 0 }` に specificity で打ち勝つために必要(無いと span 高さ 0 で消える)。 */ .bcp-sticky-cta__text-stack, .bcp-sticky-cta .wp-block-button[class*="has-icon__"] .wp-block-button__link .bcp-sticky-cta__text-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; line-height: var( --wp--custom--line-height--tight, 1.3 ); } .bcp-sticky-cta__sublabel, .bcp-sticky-cta .wp-block-button[class*="has-icon__"] .wp-block-button__link .bcp-sticky-cta__sublabel { display: block; font-size: 0.72em; font-weight: var( --wp--custom--font-weight--regular, 400 ); line-height: 1.1; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* === 表示スタイル: バッジ (bcpInfoStyle = badge) === v2.8.0 `` の**外**(= .wp-block-button 直下)に置いた span を wrapper 基準の absolute で ボタン上端に重ねる。 の中に入れないので Ollie Pro Button Icon の `line-height: 0` 制御や overflow に影響されない。 色は「白地 + currentColor の細枠」。currentColor は の外なので**バーの文字色** (= --wp--preset--color--main 等) を拾い、ボタン背景色に関わらず読める配色になる。 */ .bcp-sticky-cta .wp-block-button.bcp-info-badge { position: relative; } .bcp-sticky-cta__badge { position: absolute; top: -9px; left: 50%; transform: translateX( -50% ); z-index: 1; padding: 4px 10px; border-radius: 999px; border: 1.5px solid color-mix( in srgb, currentColor 42%, transparent ); background-color: var( --wp--preset--color--base, #ffffff ); color: inherit; font-size: 0.62em; font-weight: var( --wp--custom--font-weight--medium, 600 ); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; /* ★絶対遵守ルール(ハードコード値を書かない)に従い、影の色も currentColor から導出する。 */ box-shadow: 0 2px 6px color-mix( in srgb, currentColor 14%, transparent ); pointer-events: none; } /* バッジはボタン上端の外にはみ出すので、その分だけバー上側に余白を足す。 ボタンが 1 つでもバッジを持てばバー全体で確保する(= 高さのガタつきを防ぐ)。 */ .bcp-sticky-cta:has( .bcp-info-badge ) { padding-top: calc( var( --bcp-cta-padding-block ) + 9px ); } /* === 表示スタイル: キャプション (bcpInfoStyle = caption) === v2.8.0 ボタンの**下**に小さく 1 行。左端の dot で「受付中 / 時間外」を色で示す。 */ .bcp-sticky-cta .wp-block-button.bcp-info-caption { display: flex; flex-direction: column; align-items: stretch; gap: 5px; } .bcp-sticky-cta__caption { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 0.62em; font-weight: var( --wp--custom--font-weight--regular, 400 ); line-height: 1.2; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bcp-sticky-cta__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background-color: var( --bcp-cta-dot-open ); box-shadow: 0 0 5px color-mix( in srgb, var( --bcp-cta-dot-open ) 65%, transparent ); } /* === 診療時間外の見せ方 (data-wp-class--bcp-schedule-closed) === v2.8.0 ボタンを消さずに「今は繋がらない」だけを伝える。saturate で色を抜き opacity で沈める。 */ .bcp-sticky-cta .wp-block-button.bcp-schedule-closed .wp-block-button__link, .bcp-sticky-cta .wp-block-button.bcp-schedule-closed .wp-element-button { opacity: 0.55; filter: saturate( 0.55 ); } .bcp-sticky-cta .wp-block-button.bcp-schedule-closed .bcp-sticky-cta__badge { opacity: 0.7; border-color: color-mix( in srgb, currentColor 22%, transparent ); } .bcp-sticky-cta .wp-block-button.bcp-schedule-closed .bcp-sticky-cta__caption { opacity: 0.7; } .bcp-sticky-cta .wp-block-button.bcp-schedule-closed .bcp-sticky-cta__dot { background-color: currentColor; opacity: 0.35; box-shadow: none; } /* === モバイル用 短縮文言 (v2.8 モバイル最適化 ①) === サーバが長短 2 つの span を両方出力し、ここで出し分ける。resize リスナー不要・JS 0 行。 固定文言 (bcpSubtitle) のボタンにはこの span が無いので影響しない。 */ .bcp-sticky-cta__txt-s { display: none; } /* === お知らせ行 (noticeText / バー属性) === v2.8.0 ボタンごとに同じ補足を 3 回出す代わりに、バー上部で 1 回だけ集約する。 */ .bcp-sticky-cta .bcp-sticky-cta__notice { display: flex; align-items: center; justify-content: center; gap: 8px; /* WP コアの constrained layout が兄弟に付ける `margin-block-start`(blockGap)を 確実に打ち消すため、詳細度 (0,2,0) の子孫セレクタ + margin-block を明示する。 */ margin-block: 0 8px; margin-inline: auto; text-align: center; font-size: 0.72em; line-height: 1.3; opacity: 0.8; } .bcp-sticky-cta .bcp-sticky-cta__notice::before, .bcp-sticky-cta .bcp-sticky-cta__notice::after { content: ""; flex: 1 1 auto; max-width: 90px; height: 1px; background-color: currentColor; opacity: 0.25; } /* エディタ canvas 用の補足テキスト表示: Rich Text 内に span を差すと caret / IME が壊れるため、 wrapper の `data-bcp-info` 属性 → `::after { content: attr(...) }` で描画する。 `` 内ではなく wrapper 直下に擬似要素を置くことで Ollie Pro Button Icon の DOM 制御を回避。 v2.8.0 で 3 スタイル (subtitle / badge / caption) に拡張。 */ .has-bcp-info { display: flex; flex-direction: column; align-items: stretch; } .has-bcp-info::after { content: attr( data-bcp-info ); display: block; margin-top: 4px; text-align: center; font-size: 0.72em; font-weight: var( --wp--custom--font-weight--regular, 400 ); line-height: 1.1; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .has-bcp-info.bcp-info-style-caption::after { font-size: 0.62em; opacity: 0.9; } /* バッジは canvas でもボタン上端に重ねて位置関係を再現する。 */ .has-bcp-info.bcp-info-style-badge { position: relative; margin-top: 9px; } .has-bcp-info.bcp-info-style-badge::after { position: absolute; top: -9px; left: 50%; transform: translateX( -50% ); margin-top: 0; width: max-content; max-width: none; padding: 4px 10px; border-radius: 999px; border: 1.5px solid color-mix( in srgb, currentColor 42%, transparent ); background-color: var( --wp--preset--color--base, #ffffff ); font-size: 0.62em; font-weight: var( --wp--custom--font-weight--medium, 600 ); line-height: 1; opacity: 1; } /* core/group をユーザーが手動で挟んだ場合のレイアウト調整 */ .bcp-sticky-cta > .wp-block-group { flex: 1 1 auto; width: 100%; } /* close ボタン: wrapper は constrained layout (display: block) で flex が効かないため、 wrapper の position: fixed が作る containing block 基準に absolute で右端中央に固定する。 */ .bcp-sticky-cta__close { position: absolute; right: 8px; top: 50%; transform: translateY( -50% ); width: 32px; height: 32px; border: none; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; z-index: 1; } .bcp-sticky-cta__close:hover { background: color-mix( in srgb, currentColor 12%, transparent ); } /* dismissible 時は close 32px + 余白 8px ぶん右側 padding をリザーブして内容と重ならないようにする。 */ .bcp-sticky-cta--dismissible { padding-right: calc( var( --bcp-cta-padding-inline ) + 40px ); } @media ( max-width: 480px ) { /* === v2.8 モバイル最適化 ② コンパクト CSS === スマホでは補足文字が PC と同スケールのままだと縦を食う。文字 / 余白 / ボタン高を まとめて圧縮する。目安: バー高さ 約88px → 約60px(キャプション時はさらに差が大きい)。 タップ領域は 44px 以上を維持する(46px)。 */ .bcp-sticky-cta { --bcp-cta-padding-block: 6px; } .bcp-sticky-cta .wp-block-button .wp-block-button__link, .bcp-sticky-cta .wp-block-button .wp-element-button { min-height: 46px; } /* 長文 → 短縮文言へ切替(サーバが両方出力済み。JS 0 行) */ .bcp-sticky-cta__txt-l { display: none; } .bcp-sticky-cta__txt-s { display: inline; } .bcp-sticky-cta__text-stack, .bcp-sticky-cta .wp-block-button[class*="has-icon__"] .wp-block-button__link .bcp-sticky-cta__text-stack { gap: 1px; } .bcp-sticky-cta__sublabel, .bcp-sticky-cta .wp-block-button[class*="has-icon__"] .wp-block-button__link .bcp-sticky-cta__sublabel { font-size: 0.6em; letter-spacing: 0; } .bcp-sticky-cta__badge { top: -7px; padding: 3px 7px; font-size: 0.54em; box-shadow: 0 1px 4px color-mix( in srgb, currentColor 14%, transparent ); } .bcp-sticky-cta:has( .bcp-info-badge ) { padding-top: calc( var( --bcp-cta-padding-block ) + 7px ); } .bcp-sticky-cta .wp-block-button.bcp-info-caption { gap: 3px; } .bcp-sticky-cta__caption { font-size: 0.56em; gap: 3px; } .bcp-sticky-cta__dot { width: 5px; height: 5px; } .bcp-sticky-cta .bcp-sticky-cta__notice { margin-bottom: 5px; font-size: 0.6em; gap: 6px; } .bcp-sticky-cta .bcp-sticky-cta__notice::before, .bcp-sticky-cta .bcp-sticky-cta__notice::after { max-width: 40px; } /* 商品 LP パターン (cta/sticky-product) で画像 + 価格表示 ( 元値) を入れたときの モバイル縮退。狭幅では画像サイズと打消し線をフォールバックさせて横並びを維持。 */ .bcp-sticky-cta .wp-block-image img { width: 48px; height: 48px; } .bcp-sticky-cta s { display: none; } } /* ============================================================ PC での配置 (v2.9.0) — desktopPlacement ============================================================ 既定の `full` には 1 行も書かない。= v2.8.0 と完全に同じふるまいのまま。 ここ一式は **@media ( min-width: 768px ) で丸ごと囲っている**。 モバイルではルールが 1 つも当たらず、素の `.bcp-sticky-cta` (画面下端の全幅バー) にそのまま戻る。打ち消し用の CSS を書かずに フォールバックできるので、リセット漏れが原理的に起きない。 縦レールをスマホで出すと画面幅を食い、親指の可動域からも外れるため、 これは仕様であって手抜きではない。 詳細度メモ: 既存の `.bcp-sticky-cta--bottom` 等 (0,1,0) を確実に上回るため、 配置系は先頭クラスを 2 度書いて (0,2,0) にしている。 */ .bcp-sticky-cta { --bcp-cta-edge-inset: 0px; } @media ( min-width: 768px ) { /* --- 中央: 画面下中央に浮かせたカード --- v1.45.1 まではここは max-width を「幅広」値で絞るだけだった。が、それだと ビューポートが幅広サイズ (既定 1200px) より広いときしか「画面いっぱい」と 差が出ず、エディタのキャンバス幅では 2 つの選択肢が完全に同じ見た目になる。 選べるのに見分けが付かない選択肢は、ピッカーとして壊れている。 右下 / 左下と同じカード扱いにして、中央寄せだけを変える。 */ .bcp-sticky-cta.bcp-sticky-cta--place-center { margin-inline: auto; } /* --- 右下 / 左下: 幅を内容なりに縮め、画面端から --bcp-cta-edge-inset だけ離す --- 全幅バーは「画面の縁に張り付いた帯」なので余白は最小で良いが、こちらは 宙に浮いたカードなので、同じ余白だとボタンが縁に触れて窮屈に見える。 内側の余白を広げ、角を丸め、影を付けてカードとして成立させる。 ユーザーがサイドバーで余白 / 角丸 / 影を指定した場合は inline style が勝つ。 */ .bcp-sticky-cta.bcp-sticky-cta--place-center, .bcp-sticky-cta.bcp-sticky-cta--place-bottom-left, .bcp-sticky-cta.bcp-sticky-cta--place-bottom-right { width: max-content; max-width: calc( 100% - var( --bcp-cta-edge-inset ) * 2 ); margin-inline: 0; padding-block: calc( var( --bcp-cta-padding-block ) + 6px ); padding-inline: calc( var( --bcp-cta-padding-inline ) + 8px ); border-radius: 16px; box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.13 ); } /* 画面端に密着させる (余白 0) ときだけ、外側の 2 隅を角ばらせる。 */ .bcp-sticky-cta--bottom.bcp-sticky-cta--place-center.bcp-sticky-cta--flush { border-radius: 16px 16px 0 0; } .bcp-sticky-cta--top.bcp-sticky-cta--place-center.bcp-sticky-cta--flush { border-radius: 0 0 16px 16px; } .bcp-sticky-cta.bcp-sticky-cta--place-bottom-left.bcp-sticky-cta--flush { border-radius: 0 16px 0 0; } .bcp-sticky-cta.bcp-sticky-cta--place-bottom-right.bcp-sticky-cta--flush { border-radius: 16px 0 0 0; } .bcp-sticky-cta.bcp-sticky-cta--place-bottom-left { left: var( --bcp-cta-edge-inset ); right: auto; } .bcp-sticky-cta.bcp-sticky-cta--place-bottom-right { right: var( --bcp-cta-edge-inset ); left: auto; } /* 端から離れているぶん translateY( 110% ) では隠れ切らない。余白ぶんを足す。 */ .bcp-sticky-cta--bottom.bcp-sticky-cta--place-center, .bcp-sticky-cta--bottom.bcp-sticky-cta--place-bottom-left, .bcp-sticky-cta--bottom.bcp-sticky-cta--place-bottom-right { bottom: var( --bcp-cta-edge-inset ); transform: translateY( calc( 100% + var( --bcp-cta-edge-inset ) + 2rem ) ); } .bcp-sticky-cta--top.bcp-sticky-cta--place-center, .bcp-sticky-cta--top.bcp-sticky-cta--place-bottom-left, .bcp-sticky-cta--top.bcp-sticky-cta--place-bottom-right { top: var( --bcp-cta-edge-inset ); transform: translateY( calc( -100% - var( --bcp-cta-edge-inset ) - 2rem ) ); } .bcp-sticky-cta--place-center.is-visible, .bcp-sticky-cta--place-bottom-left.is-visible, .bcp-sticky-cta--place-bottom-right.is-visible { transform: translateY( 0 ); } /* 全幅バーではボタンを flex:1 1 0 で等幅に揃えている (横一列に並べたとき 見た目が整うため)。だがカードは幅が内容なりなので、等幅にすると一番幅の 要るボタン (アイコン付きの LINE など) が他と同じ幅に詰められ、ラベルが 2 行 3 行に折り返す。min-width:0 なので内容幅を下回ることも許されてしまう。 カードでは等幅をやめて内容なりに。あわせてボタン間の余白も詰め、 ラベルに回せる幅を増やす。 */ .bcp-sticky-cta--place-center .wp-block-buttons > .wp-block-button, .bcp-sticky-cta--place-bottom-left .wp-block-buttons > .wp-block-button, .bcp-sticky-cta--place-bottom-right .wp-block-buttons > .wp-block-button { flex: 0 0 auto; min-width: max-content; } .bcp-sticky-cta--place-center .wp-block-buttons, .bcp-sticky-cta--place-bottom-left .wp-block-buttons, .bcp-sticky-cta--place-bottom-right .wp-block-buttons { gap: var( --bcp-cta-gap ); justify-content: center; } /* 閉じる (×) は全幅バーでは右端中央だが、幅の狭いカードではボタンに重なる。 カードでは右上の角へ。あわせて、バー用に確保していた右側の余白も戻す。 */ .bcp-sticky-cta--place-center .bcp-sticky-cta__close, .bcp-sticky-cta--place-bottom-left .bcp-sticky-cta__close, .bcp-sticky-cta--place-bottom-right .bcp-sticky-cta__close { top: 6px; right: 6px; transform: none; width: 22px; height: 22px; font-size: 15px; line-height: 1; } .bcp-sticky-cta--dismissible.bcp-sticky-cta--place-center, .bcp-sticky-cta--dismissible.bcp-sticky-cta--place-bottom-left, .bcp-sticky-cta--dismissible.bcp-sticky-cta--place-bottom-right { padding-right: calc( var( --bcp-cta-padding-inline ) + 8px ); } /* ======================================================== 縦型サイドレール ======================================================== 【transform と translate を分ける】縦中央寄せに -50% が要るが、出入りの アニメも transform を使うため、1 つのプロパティを取り合ってしまう。 中央寄せは単独プロパティの `translate` に持たせ、出入りは `transform` に残す。別プロパティなので合成され、競合しない。 */ .bcp-sticky-cta.bcp-sticky-cta--rail { --bcp-cta-rail-pad: 8px; --bcp-cta-rail-gap: 8px; top: 50%; bottom: auto; translate: 0 -50%; width: max-content; max-width: none; margin-inline: 0; padding-block: var( --bcp-cta-rail-pad ); padding-inline: var( --bcp-cta-rail-pad ); /* 画面いっぱいまで伸びるのを防ぐ安全弁。ラベルが短ければ発火しない。 */ max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; } .bcp-sticky-cta--rail.bcp-sticky-cta--rail-off-lower { top: 62%; } .bcp-sticky-cta--rail.bcp-sticky-cta--rail-off-bottom { top: auto; bottom: 24px; translate: none; } .bcp-sticky-cta--rail.bcp-sticky-cta--place-rail-left { left: var( --bcp-cta-edge-inset ); right: auto; border-radius: 0 14px 14px 0; transform: translateX( calc( -100% - var( --bcp-cta-edge-inset ) ) ); } .bcp-sticky-cta--rail.bcp-sticky-cta--place-rail-right { right: var( --bcp-cta-edge-inset ); left: auto; border-radius: 14px 0 0 14px; transform: translateX( calc( 100% + var( --bcp-cta-edge-inset ) ) ); } /* 端から離して浮かせるときは 4 隅とも丸め、影を足して浮きを出す。 */ .bcp-sticky-cta--rail.bcp-sticky-cta--rail-detached { border-radius: 14px; box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.13 ); } .bcp-sticky-cta--rail.is-visible { transform: translateX( 0 ); } /* ボタン列を縦積みに。WP コアが wp-container-* で注入する display:flex / justify-content (0,2,0) を上回るため、先頭クラスを 2 度書いて (0,3,0) にする。 */ .bcp-sticky-cta--rail.bcp-sticky-cta--rail .wp-block-buttons { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: var( --bcp-cta-rail-gap ); width: 100%; } .bcp-sticky-cta--rail.bcp-sticky-cta--rail .wp-block-button { width: 100%; } /* --- サイズ (標準 / 大きめ) --- */ .bcp-sticky-cta--rail-standard { --bcp-rail-thickness: 56px; --bcp-rail-pad-v: 26px; --bcp-rail-gap-in: 13px; --bcp-rail-ls: 0.16em; --bcp-rail-radius: 10px; } .bcp-sticky-cta--rail-large { --bcp-rail-thickness: 66px; --bcp-rail-pad-v: 34px; --bcp-rail-gap-in: 17px; --bcp-rail-ls: 0.2em; --bcp-rail-radius: 16px; } /* 大きめは「1 枚の大きなタブ」を想定した形。レール自身の面 (背景 / 余白 / 影) を 消し、ボタンを直接画面端へ貼る。サイドバーで背景色を指定した場合は inline style なのでそちらが勝つ。 */ .bcp-sticky-cta.bcp-sticky-cta--rail-large { --bcp-cta-rail-pad: 0px; background-color: transparent; } /* --- 縦書き --- writing-mode: vertical-rl では **inline 軸が縦**になる。したがって padding-inline が上下の余白、padding-block が左右の余白。ここを取り違えると 文字がボタンの縁に貼り付いて窮屈になる (v2.9.0 開発中に実際にやった)。 同じ理由で、太さは block-size、長さは inline-size で指定する。 */ .bcp-sticky-cta--rail-tate.bcp-sticky-cta--rail-tate.bcp-sticky-cta--rail-tate .wp-block-button__link, .bcp-sticky-cta--rail-tate.bcp-sticky-cta--rail-tate.bcp-sticky-cta--rail-tate .wp-element-button { box-sizing: border-box; writing-mode: vertical-rl; text-orientation: mixed; /* 折り返すと列が右から左に増え、読み順が壊れる。はみ出す方がまだ良い。 */ white-space: nowrap; /* 太さは「下限」。ユーザーがボタンの文字サイズを上げても切れないよう固定しない。 */ min-block-size: var( --bcp-rail-thickness ); block-size: auto; inline-size: auto; /* 長さ (縦) は文字数なり */ padding-inline: var( --bcp-rail-pad-v ); /* = 上下の余白 */ padding-block: 0; display: flex; flex-direction: row; /* 縦書きでは上から下 */ align-items: center; justify-content: center; gap: var( --bcp-rail-gap-in ); margin-inline: auto; /* font-size は指定しない — WP のフォントサイズプリセットは !important 付きで 出力されるため勝てず、勝つには !important が要る。ユーザーが選んだ文字サイズを 奪うのは筋が悪いので、大きさはボタンの「タイポグラフィ」に委ねる。 */ letter-spacing: var( --bcp-rail-ls ); line-height: 1; border-radius: var( --bcp-rail-radius ); } /* アイコンだけは正立させる (縦書きの中で唯一 horizontal に戻す要素)。 */ .bcp-sticky-cta--rail-tate .wp-block-button__link-icon { writing-mode: horizontal-tb; flex: 0 0 auto; } /* 大きめタブは内側の角だけ丸める。 */ .bcp-sticky-cta--rail-large.bcp-sticky-cta--place-rail-left .wp-block-button__link { border-radius: 0 var( --bcp-rail-radius ) var( --bcp-rail-radius ) 0 !important; } .bcp-sticky-cta--rail-large.bcp-sticky-cta--place-rail-right .wp-block-button__link { border-radius: var( --bcp-rail-radius ) 0 0 var( --bcp-rail-radius ) !important; } /* --- レールの角丸はレール側で決める --- ボタンごとの角丸はブロックの border 設定から **インライン style** で来るため、 クラスをいくら重ねても詳細度では勝てない。ピル (半径が極端に大きい値) のまま 横書きレールに入れると、幅のあるタブが楕円に潰れてタブに見えなくなる。 縦書きは細長いので目立たないが、同じ理由で形が揃わない。 レールのときだけ !important で上書きし、形はレールが持つ。 全幅 / 中央 / 左下 / 右下では従来どおりボタン側の指定が効く。 */ .bcp-sticky-cta--rail .wp-block-button__link, .bcp-sticky-cta--rail .wp-element-button { border-radius: var( --bcp-rail-radius ) !important; } /* --- 横書き (アイコン + 短いラベルを縦に積む) --- */ .bcp-sticky-cta--rail-icon.bcp-sticky-cta--rail-icon.bcp-sticky-cta--rail-icon .wp-block-button__link, .bcp-sticky-cta--rail-icon.bcp-sticky-cta--rail-icon.bcp-sticky-cta--rail-icon .wp-element-button { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-inline-size: var( --bcp-rail-thickness ); padding-block: 18px; /* 通常の書字方向なので上下 */ padding-inline: 6px; /* font-size は指定しない (縦書き側と同じ理由)。アイコン下のラベルを小さくしたい 場合は、ボタンの「タイポグラフィ」で XS などを選ぶ。 */ letter-spacing: 0.02em; line-height: 1.3; text-align: center; white-space: nowrap; border-radius: var( --bcp-rail-radius ); } /* --- 補足テキスト (サブタイトル / バッジ / キャプション) --- サブタイトルは の中なので writing-mode を自動で継ぐ (text-stack の flex-direction: column が、縦書きでは「左に添える」方向になる)。 バッジとキャプションは の外に出るので、ここで面倒を見る。 バッジの absolute (ボタン上端に重ねる) は幅 56px の縦積みだと隣のボタンに 被るため、レール内では static に戻して隣に添える。 */ .bcp-sticky-cta--rail-tate .wp-block-button.bcp-info-badge, .bcp-sticky-cta--rail-tate .wp-block-button.bcp-info-caption { display: flex; /* 補足は必ず画面の**内側**(本文側)に置く。外側に出すと画面端で切れる。 DOM 上は の後ろにあるので、左レールは row (右へ)、右レールは row-reverse (左へ) にすると、どちらも内側に来る。 */ flex-direction: row; align-items: center; justify-content: center; gap: 7px; margin-top: 0; } .bcp-sticky-cta--place-rail-right.bcp-sticky-cta--rail-tate .wp-block-button.bcp-info-badge, .bcp-sticky-cta--place-rail-right.bcp-sticky-cta--rail-tate .wp-block-button.bcp-info-caption { flex-direction: row-reverse; } .bcp-sticky-cta--rail-tate .bcp-sticky-cta__badge, .bcp-sticky-cta--rail-tate .bcp-sticky-cta__caption { position: static; transform: none; margin: 0; width: auto; max-width: none; writing-mode: vertical-rl; white-space: nowrap; } .bcp-sticky-cta--rail-icon .wp-block-button.bcp-info-badge { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 0; } .bcp-sticky-cta--rail-icon .bcp-sticky-cta__badge { position: static; transform: none; margin: 0; left: auto; width: max-content; } /* 閉じる (×) はバーでは右端中央だが、レールでは本文側にはみ出して見える。 レール内では上端に小さく置き、ボタン列と重ならないよう静的に積む。 */ .bcp-sticky-cta--rail .bcp-sticky-cta__close { position: static; transform: none; align-self: center; margin: 0 0 6px; width: 22px; height: 22px; font-size: 15px; line-height: 1; } .bcp-sticky-cta--rail.bcp-sticky-cta--dismissible { display: flex; flex-direction: column; } /* 閉じるボタンは DOM 上いちばん最後なので、order で先頭へ回す。 */ .bcp-sticky-cta--rail .bcp-sticky-cta__close { order: -1; } .bcp-sticky-cta--rail.bcp-sticky-cta--dismissible { padding-inline: calc( var( --bcp-cta-rail-pad ) + 2px ); } /* レール内ではバーの上下パディングを増やす必要が無い (バッジが重ならないため)。 */ .bcp-sticky-cta--rail:has( .bcp-info-badge ) { padding-top: var( --bcp-cta-rail-pad ); } } /* Editor preview: close ボタンの absolute 基準を wrapper に固定するため relative にする (static のままだと最寄り positioned 祖先 / iframe 等に飛んでしまう)。 */ .bcp-sticky-cta--editor { position: relative !important; transform: none !important; /* v2.9.0 — レールは縦中央寄せを単独プロパティ translate で持つ。ここも殺す。 */ translate: none !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; display: block !important; left: auto; right: auto; bottom: auto; top: auto; } /* ============================================================ エディタ: PC 配置のサムネイルピッカー (v2.9.0) ============================================================ これらのクラスはサイドバー内にしか現れない。block.json が style と editorStyle で同じファイルを指しているためフロントにも配信されるが、 一致する要素が無いので実害はない (約 0.6KB)。section-nav の `.bcp-secnav-layouts` と同じ見た目・同じ操作感に揃えてある。 */ .bcp-cta-places { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bcp-cta-places__item { display: block; width: 100%; padding: 6px 6px 7px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; } .bcp-cta-places__item:hover { border-color: #a7a7a7; } .bcp-cta-places__item:focus-visible { outline: 2px solid var( --wp-admin-theme-color, #3858e9 ); outline-offset: 1px; } .bcp-cta-places__item.is-selected { border-color: var( --wp-admin-theme-color, #3858e9 ); box-shadow: 0 0 0 1px var( --wp-admin-theme-color, #3858e9 ); } .bcp-cta-places__thumb svg { display: block; width: 100%; height: auto; border-radius: 2px; } .bcp-cta-places__name { display: block; margin-top: 5px; font-size: 11px; line-height: 1.35; color: #1e1e1e; } .bcp-cta-places__item.is-selected .bcp-cta-places__name { font-weight: 600; color: var( --wp-admin-theme-color, #3858e9 ); } .bcp-cta-places__help { margin: 8px 0 12px; font-size: 12px; line-height: 1.5; color: #757575; }