/* ========================================================== 背景ぼかしレイヤー（.p-bg・#body_wrap::before） ・ここに書かれているのは、管理画面の設定値を一切含まない、固定のCSS ルールだけ（すべてvar(--変数名)経由で値を参照している）。実際の値 （--swell-ext-bg-blur等）は、swell-ext-main-visual.php側が wp_add_inline_style()で、この直後に別途出力している。 ・トップページ：.p-bg（wp_body_openフックでPHP側が直接出力する 実体のあるHTML）を使う、2階層構成（外側の箱：overflow: hiddenで 画面ぴったりのサイズ／内側の画像：scale()で拡大してからblur()）。 以前はposition: fixedで画面より一回り大きい1つの要素を作り、画面の外まで はみ出させることでフチを隠す1階層構成だったが、iOS 26のSafariで 「ビューポートの外にはみ出す、不透明なposition: fixed要素が描画されない」 という実機バグが確認された（開発者フォーラム・複数のブログで同時期に 報告あり。DevToolsのレスポンシブ表示では再現しない）。はみ出し量を 極端に増やしても・要素にわずかな透明度を持たせても改善しなかったため、 「そもそも画面の外にはみ出させない」2階層構成に変更した。 ・それ以外のページ：#body_wrap::before（疑似要素）を使う、1階層構成。 position: absoluteなので上記のiOS 26の不具合の対象外 （position: fixed/stickyのみが対象と報告されている）。 ・.p-bgは#body_wrapの外（wp_body_openはbody直後に出力するため、 #body_wrapとは兄弟関係）に出るが、#body_wrap自身が明示的な z-index（SWELL標準でz-index: 1）を持っており、中身ごと1つの スタッキングコンテキストとして扱われるため、.p-bg（z-index: -1）は #body_wrapの外にいても、その中にあるheader・#content等より 確実に奥に描画される（#body_wrap自身は背景を持たない透明な要素 なので、.p-bgが#body_wrapに隠されてしまう心配も無い）。 ・.p-bgはトップページ専用で、それ以外のページではPHP側 （wp_body_openフック内のis_front_page()判定）でHTML自体を 出力していない。以前はCSS側で出し分ける方式（全ページで.p-bgを 出力した上で、トップページかどうかを-homeクラスの有無で判定し、 -homeが無ければdisplay: noneで非表示にする）にしていたが、 使わないページに余計なDOM要素を残す理由が無いため、出力自体を やめる形に整理した。 ========================================================== */ /* トップページ：.p-bg */ .p-bg { position: fixed; top: 0; left: 0; width: 100%; /* heightは2つ指定している。1つ目(100%)は、dvhに対応していない古いブラウザ向けの 予備。2つ目(100dvh)が、対応しているブラウザでは上書きして使われる。 */ height: 100%; height: 100dvh; z-index: -1; overflow: hidden; /* 内側の画像がscale()で拡大される分を、ここで切り取って隠す */ display: var(--swell-ext-bg-display, block); /* 管理画面から表示/非表示を変更可能 */ } .p-bg .p-bg__img { width: 100%; height: 100%; /* filter: blur()は要素の"内側"でしか計算できないため、何も拡大せずに ぼかすと、フチの部分だけ外側の絵柄が存在せず薄く・白っぽく見えてしまう。 これを避けるため、画像自体を拡大してからぼかし、薄く見える部分を 外側の箱（.p-bg）のoverflow: hiddenの外へ追いやって見えなくしている （公式サイトの.bg imgと同じ考え方）。 必要な拡大率は理論上 s ≥ H / (H − 6×ぼかしの強さ) で求まる （H＝箱の高さ、ここでは画面の高さ100dvh）。 ※ 実機のiPhoneで、ぼかしの強さを70px前後以上にすると不安定になる 現象を確認した。原因は、スマホの画面の高さ（H）がPCより小さいため、 H − ぼかし×6 がマイナスに転落し、scale()にマイナスの値が渡って 画像が反転してしまうこと（iOS 26は画面の高さ自体が可変なため、 反転の有無が切り替わってチラつく形で「不安定」に見えていたと考えられる）。 そのため、計算結果をclamp()で1.2〜5の範囲に必ず収め、 分母がマイナスになるような極端な組み合わせでも安全な値に留める （管理画面側の「背景ぼかしの強さ」の入力上限を50pxにしているのも、 この不安定さを避けるための対策の一つ）。 ※ 長さ同士の割り算（H ÷ (H−...)）は、Safari 18.2・Chrome 140以降で ようやく対応された比較的新しいCSS機能のため、非対応ブラウザ向けに 固定値1.2を先に書いておき、対応ブラウザでだけ計算式に上書きされる 形にしている（100%→100dvhの書き方と同じ考え方）。 */ transform: scale(1.2); transform: scale(clamp(1.2, calc(100dvh / (100dvh - var(--swell-ext-bg-blur, 20px) * 6)), 5)); /* 写真(1層目)と下地の色/グラデーション(2層目、写真が無い時にだけ見える)を、 どちらもbackground-imageとして重ねて指定する (background-colorはグラデーションを指定できないため、単色の場合も linear-gradient(色,色)という形で統一している。管理画面から変更可能) ※ 以前（一時期）、この写真をinline styleやに置き換えて プリロードスキャナーに早期発見させる実験を行ったが、早期発見自体は できても、他の重要なリソース（メインビジュアルの写真・CSS本体・ フォント等）と帯域を取り合い、サイト全体の体感速度がかえって悪化する 現象が確認されたため、この元の実装（外部CSSのbackground-image経由、 CSS解析後まで自然に後回しにされる）に戻した。読み込み時に一瞬 グラデーションが見える現象は残るが、装飾目的のぼかしレイヤーである ことを踏まえ、実害の大きい速度低下を避けることを優先した判断。 もし将来また対策する場合は、まず写真自体の軽量化（現状、管理画面の 「背景ぼかしレイヤー：画像（任意）」に高解像度の元画像がそのまま 使われている可能性が高い。ぼかし前提の写真なので、幅400〜600px程度 でも見た目はほぼ変わらない）を先に行うこと。 */ background-image: var(--swell-ext-bg-image, none), var(--swell-ext-bg-fallback, linear-gradient(135deg, #fbf4d8, #cbf4ba, #baf4f4)); background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-size: cover, cover; filter: blur(var(--swell-ext-bg-blur, 20px)); /* 管理画面から強さを変更可能 */ } /* それ以外のページ：#body_wrap::before（1階層のまま） */ /* body::beforeという書き方では実現できない：bodyの背景色(var(--color_bg))の 手前に描画したくても、#body_wrapがz-index: 1を持つため、#body_wrapの 中身全体がbody::beforeより前面に来てしまい、結果的に隠れてしまう。 （なお#body_wrap自身は背景色を持たない透明な要素で、これはSWELL標準の -body-solidクラスの効果ではない。-body-solidは固定ヘッダー・パンくずの 影の有無を切り替えるだけのクラスで、背景色とは無関係。同じ結論は portal.css側のコメントでも、検証ツールでcomputed background-colorを 確認した経緯とともに裏付けられている） そのため、#body_wrap自身の疑似要素として追加する(#body_wrap内でz-index:-1 の位置に描画され、bodyの背景色の上・#body_wrapの通常コンテンツの下、 という正しい重なり順になる)。 ※ 一時期、.p-bgと構造を揃えるため、この帯を実体のあるHTML要素 （.p-bgBand、wp_body_openで出力）に置き換えたことがあったが、部品が 増える割に見た目・速度のメリットが無く、置き換え中に「下端のフェードが 切れる」不具合（overflow: hiddenが縦方向まで一律クリップしていた／ overflow-x: hiddenでも縦がautoに自動変換されていた）も発生したため、 この元の疑似要素方式に戻した。 */ #body_wrap:not(.home)::before { content: ''; position: absolute; /* ページと一緒にスクロールする通常の配置に変更 */ /* 左右にも、上下と同じ「はみ出し分」（ぼかしの強さ×3・幅は×6）を持たせる。 #body_wrap自身がoverflow-x: clip（SWELL標準）を持っているため、 このはみ出し分は#body_wrapの外側で自動的に切り取られ、フチの薄い 部分が見えなくなる。以前、トップページとそれ以外のページのルールを 完全に分離する作業をした際、ここを書き忘れて left: 0; width: 100%; （はみ出し無し）にしてしまい、両サイドが白っぽく見える不具合に なっていた。 */ left: calc(var(--swell-ext-bg-blur, 20px) * -3); width: calc(100% + var(--swell-ext-bg-blur, 20px) * 6); z-index: -1; /* 写真(1層目)と下地の色/グラデーション(2層目、写真が無い時にだけ見える)を、 どちらもbackground-imageとして重ねて指定する (background-colorはグラデーションを指定できないため、単色の場合も linear-gradient(色,色)という形で統一している。管理画面から変更可能) */ background-image: var(--swell-ext-bg-image, none), var(--swell-ext-bg-fallback, linear-gradient(135deg, #fbf4d8, #cbf4ba, #baf4f4)); background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-size: cover, cover; filter: blur(var(--swell-ext-bg-blur, 20px)); /* 管理画面から強さを変更可能 */ /* filter: blur()は、要素の"内側"でしか計算できないため、要素のふち（端）では 外側の絵柄が存在せず、薄く・白っぽく見えてしまう副作用がある。 これを避けるため、要素自体を上側だけ、ぼかしの強さの3倍ぶん大きく作り、 白っぽくなる「ふち」の部分をヘッダーの裏（見えない場所）に追いやっている。 */ /* top：ヘッダーの実際の高さから、ぼかしのはみ出し分（×3）を差し引く。 ヘッダーの実際の高さは、自前でJS実測せず、SWELL本体がタグに 既にセットしている --swl-headerH をそのまま使う（検証ツールで という形で出力されているのを 確認済み。ロゴサイズ等の設定変更にも、SWELL側の仕組みで自動的に 追従する）。この「はみ出し分」は、ヘッダーの裏に隠れてちょうど良い フチ隠しになる（ヘッダーの実際の高さがぼかしの強さ×3より小さい場合の み、隠しきれない分がわずかに下側の見える範囲へ食い込むが、通常の ヘッダー高さ・ぼかし強さの組み合わせでは問題にならない）。 height：管理画面「外観 > カスタマイズ > メインビジュアル（拡張）」の 「トップページ以外：背景ぼかしレイヤーの帯の高さ（PC/SP）」の値に、 上側のはみ出し分（×3）だけを足す（下側には足さない）。 上下対称に×6足していた時期もあったが、それだと下側のはみ出し分を 隠してくれる要素が無く、そのままはみ出して見えてしまい、帯の高さを 0にしても最低ぼかし×3ぶんの帯が消えない不具合になっていた。 下側は、箱の端である以上filter: blur()の性質上どのみち自然に フェードアウトするため、余分を足さなくても「ふわっと消える」効果は 保たれる。これで箱の下端は「ヘッダーの高さ＋設定した帯の高さ」 ちょうどになる。 #body_wrapを基準にしているのは、#body_wrap自身がposition: relativeを 持っており（SWELL標準）、その疑似要素のabsolute配置が正しくそれを 基準にしてくれるため。 */ top: calc(var(--swl-headerH, 90px) - var(--swell-ext-bg-blur, 20px) * 3); height: calc(var(--swell-ext-bg-band-height, 150px) + var(--swell-ext-bg-blur, 20px) * 3); /* 帯の高さ0（またはぼかし自体OFF）の時は、PHP側で判定したdisplay: noneを ここで受け取り、丸ごと非表示にする。0にしても、top・heightの計算自体は ヘッダーの範囲内に収まっているのに、filter: blur()の性質（要素本来の 箱の外にまで絵がにじみ出る、CSS仕様上の挙動。overflow: hiddenでも 自分自身にかけたfilterのにじみ出しは防げない）により、ヘッダーと 本文の境目にうっすら線のように見えてしまう不具合があったため、 計算結果を待たず表示自体を止めている。 */ display: var(--swell-ext-bg-band-display, block); }