/* * マンガでわかる結婚相談所物語（/comic-story/）の境目の調整。 * * 写した写し元の CSS（comic.css と smartphone.css）と、テーマ共通の CSS が * ぶつかる箇所だけをここに書く。写し元の規則そのものは 2 本の写しにあり、 * 手で書かない。 * * ------------------------------------------------------------------ * 柱を外す理由 * ------------------------------------------------------------------ * テーマは固定ページの本文へ max-width: 1100px の柱を当てている。移行元は * 外側の器が画面いっぱいで、その中の .wrap が 1374px、.sections が 1100px に * 収まる三段構えである。 * * 実測（2026-08-27・幅 1440px・Bug #2313）: * * .story / .commonArea / ._list-common … 移行元 1440px（x=0） → dev 1100px（x=170） * .wrap … 移行元 1374px（x=30） → dev 1100px（x=170） * * 移行元で画面いっぱいに広がる器は、CSS に幅の指定を持たない。親の全幅へ * 広がった結果である。幅の規則を写すだけでは足りず、柱そのものを外す。 * * **その指定はここには無い。**5 区画で中身が 1 文字も違わなかったため、 * `assets/css/section-fullwidth.css` の 1 本へまとめた（Task #2454）。この区画は * `inc/comic-page-css.php` が下記の条件でその 1 本を配る。 * * ------------------------------------------------------------------ * 狭い画面にも配る理由（婚活川柳・ご成婚報告と違う） * ------------------------------------------------------------------ * **移行元のマンガは、携帯の名乗りでも同じページを返す**（実測: 200。婚活川柳は * /sp/senryu/ へ 302 で転送する）。狭い画面向けの CSS も自分で持っている * （smartphone.css の 7 つのメディアクエリ）。**そのため幅の条件を付けず、 * どの幅にも配る。** */ /* * ------------------------------------------------------------------ * 箱の数え方を移行元にそろえる * ------------------------------------------------------------------ * 移行元は幅の指定を「中身の幅」として数える（content-box）。このテーマは * 「余白と枠を含めた外形」として数える（border-box）。同じ width の値でも * 外形が変わるため、写した規則をそのまま当てても寸法が合わない。 */ body .pa-page--comic-story .page-content__body, body .pa-page--comic-story .page-content__body * { box-sizing: content-box; } /* * ------------------------------------------------------------------ * 別の区画向けの中央寄せが、このページにも当たっているのを打ち消す * ------------------------------------------------------------------ * テーマ共通の main.css（22412 行）に、次の規則がある。 * * :is(.entry-content, .page-content__body) :is(#story, #voice, #news) { * text-align: center; * } * * これは**成婚ストーリーと会員の声のために書かれたもの**で、移行元の * page_introduce.css が `#story` を中央寄せにしていたことの写しである。 * ところが**区画の器で絞らず `#story` という名前だけに当てているため、 * 同じ名前を持つ別の区画にも波及する。** * * **マンガの本文は移行元の HTML のまま `
` を持つ**ので、 * この規則が当たっていた。移行元のマンガは `#story` を中央寄せにしていない。 * * 実測（幅 1440px・Bug #2313・何も差し込まない素の dev）: * * .story … 移行元 start → dev **center** * .imgTop … 移行元 start → dev **center**（.story から受け継ぐ） * * **この区画に限って、移行元と同じ start へ戻す。**写し元の CSS が明示している * 中央寄せは、この指定より内側にあるので影響を受けない。 * * **根本の直しは、テーマ共通の側で区画の器を付けることである**（成婚ストーリーと * 会員の声のページに閉じる）。同じ名前の衝突は `#voice` `#news` でも起こりうる。 * Issue #2322（移行元のサイト共通 CSS の写し）の担当へ申し送る。 */ body .pa-page--comic-story .page-content__body, body .pa-page--comic-story .page-content__body :is(#story, #voice, #news) { text-align: start; } /* * ------------------------------------------------------------------ * 移行元の固定ヘッダーぶんの余白は写し元のまま効かせる（Bug #2686 で復活） * ------------------------------------------------------------------ * 移行元は自分のヘッダー（.siteHeader・高さ 80px）を画面の上に固定しており、 * 本文がその下に隠れないよう main へ padding-top: 118px を置いている * （写し元 style.css の 141〜144 行）。狭い画面はその値を * calc(9vw + 24px) へ置き換える（写し元 smartphone.css の 19〜21 行）。 * * **以前はこの余白を 0 へ打ち消していた。**移行元の簡易ヘッダーが移し先に * 1 つも入っておらず（投入は本文だけを取り込む）、テーマ共通ヘッダーのぶんと * 二重になって題名と本文の間に 118px の空白が空いたためである（Bug #2313）。 * * **Bug #2686 でその前提が変わった。**移行元の簡易ヘッダーをテーマ側で出す * ようにし（inc/comic-frame.php）、同時にテーマ共通ヘッダーを出さなくしたので、 * 二重になる相手がいなくなった。**打ち消したままにすると、画面の上端に固定 * された簡易ヘッダーの下へ本文の先頭が隠れる。**そこで打ち消しをやめ、写し元 * の値（comic.css の 122〜125 行・smartphone.css の 19〜21 行）をそのまま * 効かせる。 * * **寸法の物差しはこの種の差を捕まえない。**幅・左端・揃え・組み方しか見て * おらず、縦の位置を見ていないためである。ここを変えるときは、画面を撮って * 本文の先頭が隠れていないことを目で確かめる。 */ /* * ------------------------------------------------------------------ * 移行元のフッターの下に、テーマの器の余白を残さない（Bug #2686） * ------------------------------------------------------------------ * テーマは固定ページの器（.page-content）へ下向きの余白を 60px 置いている。 * サイト共通フッターが続くページではその間隔になるが、**この区画は移行元の * 小さいフッターでページが終わる。**移行元はフッターの下に何も持たないため、 * 60px がそのまま余分な空白になる。 * * 実測（2026-09-02・幅 1440px・移行元と dev を手元から配信して同じ台本で測った）: * * ページの高さ 移行元 3,256px → dev 3,393px（差 137px） * うち 60px がこの余白（フッターの下端 3,332.55px の後ろに残る分） * * 残る 77px はこの区画の中身の差で、外枠とは別の原因である（横送りの札の高さ * 29px と .background-box の下余白 48px。どちらも本 Issue の前から dev にあり、 * 別に起票する）。 */ body:has(.pa-page--comic-story) .page-content { padding-bottom: 0; } /* * ------------------------------------------------------------------ * 受け継ぐ文字の大きさを移行元にそろえる * ------------------------------------------------------------------ * **ページ別 CSS を写すだけでは足りない。**その要素に効いている「受け継ぐ値」も * 確かめる必要がある（2026-08-27・実測）。 * * 移行元のこの区画は、サイト共通の CSS を読まず自分の CSS だけを読む。その * CSS は body へ書体しか指定しておらず、**文字の大きさはブラウザ既定の 16px の * まま**である。 * * このテーマは本文へ 13px を受け継がせている（移行元のサイト共通 CSS の * `body { font-size: 13px }` に合わせたもの）。**その値がこの区画にも効いて * いた。** * * 実測（幅 1440px・写し元が大きさを指定していない要素）: * * .story / .commonBtns / .fee-area … 移行元 16px → dev 13px * * **写し元が大きさを指定している要素は影響を受けない**（`.commonArea p` は * 両側とも 18px で一致していた）。受け継ぐ値だけを 16px へ戻す。 */ body .pa-page--comic-story .page-content__body { font-size: 16px; } /* * ------------------------------------------------------------------ * ログイン中は、管理バーのぶんだけ簡易ヘッダーを下げる（Codex 指摘・PR #2970） * ------------------------------------------------------------------ * WordPress にログインすると、画面の上端に管理バー（`#wpadminbar`）が固定で * 出る。移行元の簡易ヘッダー（`.siteHeader`）は写し元のまま * `position: fixed; top: 0` なので（comic.css の 380〜392 行）、**その裏に * 入って隠れる。**狭い画面では管理バーが 46px、簡易ヘッダーが約 56px なので、 * ロゴを含む大半が隠れる。 * * テーマは同じ趣旨の回避規則を既に持っている（main.css の 2289〜2291 行）。 * * body.admin-bar .site-header { top: 32px; } * * ただしこれは `.site-header`（サイト共通ヘッダー）にしか当たらず、しかも * `@media (min-width: 1100px)` の中にある。この区画のヘッダーは別のクラスで、 * どの幅でも固定されるため、この規則には乗らない。**同じ考え方をこの区画の * クラスへ書き足す。** * * ## 幅の境目と値は WordPress core に合わせる * * core の `_admin_bar_bump_cb()`（wp-includes/admin-bar.php の 1305〜1308 行・ * 6.9.4 で確認）は、次の 2 本を読み込む。 * * @media screen { html { margin-top: 32px !important; } } * @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } } * * 管理バーの高さも同じ境目で切り替わる（wp-includes/css/admin-bar.css の * 92 行と 752〜760 行で 32px → 46px）。**そこで境目は 782px、値は 32px と 46px に * する。**写し元の狭い画面の境目（768px）とは別物なので、そちらへ合わせない。 * 769〜782px では簡易ヘッダーはパソコン幅の姿（高さ 80px）だが、下げる量は * 管理バーの高さだけで決まるので取り違えは起きない。 * * `@media screen` で囲むのは core と同じ形にするためである。**印刷では core が * `html` の余白を足さない**（上の 1 本目が `@media screen` に囲われている）ので、 * ここで下げると印刷だけヘッダーが 32px 浮く。だから同じ条件で囲う。 * なお admin-bar.css に `@media print` の指定は 1 つも無い（6.9.4 で確認）。 * * ## 本文は動かさなくてよい * * core は `html` へ余白を足して**文書全体を管理バーのぶん下へずらす。**本文の * 先頭は写し元の余白（`.page-content__body` の `padding-top`）でヘッダーの下に * 置かれており、その余白は文書の中にあるので一緒にずれる。ヘッダーだけを同じ * 量だけ下げれば、両者の間隔はログイン前とまったく同じに戻る。 * * 実測（2026-09-03・写しの CSS 3 本とテーマ共通の main.css を手元で読み込み、 * core と同じ管理バーの指定を足して測った。ヘッダーの下端から本文の先頭までの * 間隔を「間隔」と書く）: * * 幅 1440px 管理バーなし ヘッダー 0〜80.61 本文の先頭 129 間隔 48.39 * 直す前 ヘッダー 0〜80.61 本文の先頭 161 間隔 80.39 * → 管理バーがヘッダーの上 32px を覆う * 直した後 ヘッダー 32〜112.61 本文の先頭 161 間隔 48.39 * * 幅 375px 管理バーなし ヘッダー 0〜56.53 本文の先頭 58.75 間隔 2.22 * 直す前 ヘッダー 0〜56.53 本文の先頭 104.75 間隔 48.22 * → 管理バーがヘッダーの上 46px（56.53px のうち * 81%）を覆い、ロゴ（15〜41.53）は全部隠れる * 直した後 ヘッダー 46〜102.53 本文の先頭 104.75 間隔 2.22 * * **どちらの幅でも、直した後の間隔が管理バーなしと同じ値に戻る。**本文が * ヘッダーの裏へ入らないことは、この一致で確かめられる。 * * ## 残る 1 つ（直していない） * * core は幅 600px 以下で管理バーを `position: absolute` に変える * （admin-bar.css の 1060〜1063 行）。この幅では管理バーが巻き上げと一緒に * 画面の外へ出るため、下げたヘッダーの上に 46px の余白が見えたままになる。 * **ログイン中の閲覧に限った見え方の粗さなので、ここでは直さない。**画面の * 先頭でロゴが隠れるほうが実害が大きい。 */ @media screen { body.admin-bar .pa-page--comic-story .page-content__body .siteHeader { top: 32px; } /* * ページ内の飛び先の目印も同じ量だけ動かす。写し元は 1px の空の要素を * `position: relative; top: -80px` で上へずらし、飛んだ先が固定ヘッダーの * 下に来るようにしている（comic.css の 129〜135 行・smartphone.css の * 28〜30 行はどちらも -80px）。管理バーのぶんヘッダーが下がると、この * ずらし量が足りなくなって飛び先が隠れる。-80 から 32 を引いた値にする。 * * 実測（幅 375px・飛び先の枠の上端）: 管理バーなし -22.25px ／ 直す前は * 管理バーありで 23.75px（ヘッダーの 0〜56.53 の中へ入る）／ 直した後は * -22.25px で管理バーなしと同じ位置に戻る. */ body.admin-bar .pa-page--comic-story .page-content__body .hideAnchor { top: -112px; } } @media screen and (max-width: 782px) { body.admin-bar .pa-page--comic-story .page-content__body .siteHeader { top: 46px; } /* -80 から 46 を引いた値. */ body.admin-bar .pa-page--comic-story .page-content__body .hideAnchor { top: -126px; } } /* * ------------------------------------------------------------------ * 表紙の横送りの印を紙面から浮かす（Bug #2959 ①） * ------------------------------------------------------------------ * 移行元は横送りの部品の CSS（`swiper.min.css`）を読み込み、その中で送りの印 * （`.swiper-pagination`）を **絶対位置** に置いている。だから印は表紙の器の * 高さに足されない。 * * **テーマはこの `swiper.min.css` を写さない設計である**（Issue #2725 の裁定。 * 移行元の部品は札を複製する作りで、写すと札の枚数まで変わる）。そのため印が * 紙面の中に居座り、その高さがそのまま表紙の器へ足されていた。 * * 実測（2026-09-08）: * * 表紙の器の高さ 幅 1440px 移行元 834 → dev 863 （+29） * 幅 375px 移行元 479.97 → dev 501.28（+21.31） * * 印の高さ（1440px で 17px、375px で 9.31px）に、テーマの上向きの内余白 12px を * 足した分である。ここで移行元と同じ絶対位置へ戻す。値は移行元の実測に合わせた * （パソコン幅は下から 10px、狭い画面は下から 0）。 * * 🚨 **`display` と字揃えも戻す。**dev の印は横並べ（flex）で玉が塊なので、 * 絶対位置にするだけでは玉が縦に積む。移行元は印が塊・字揃えが中央・玉が * 行の中の塊（`inline-block`）である。 * * 狭い画面の `bottom: 0` は移行元自身の指定である（写し元 * `static/css/smartphone.css` 648〜650 行）。写しの側にも同じ規則が入っているが、 * あちらの当たり先は移行元の部品が付ける印（`.swiper-pagination-bullets`）を * 求めるため、テーマの組み（`.swiper-pagination` だけ）には当たらない。 */ body .pa-page--comic-story-top .page-content__body .swiper-pagination { position: absolute; bottom: 10px; left: 0; width: 100%; display: block; padding: 0; text-align: center; } body .pa-page--comic-story-top .page-content__body .swiper-pagination-bullet { display: inline-block; vertical-align: top; } @media screen and (max-width: 768px) { body .pa-page--comic-story-top .page-content__body .swiper-pagination { bottom: 0; } } /* * ------------------------------------------------------------------ * トップの店舗の区画の下向きの内余白を、狭い画面でも 44px にする（Bug #2959 ③） * ------------------------------------------------------------------ * 移行元はトップだけ 44px にしている（`static/css/style.css` 846〜848 行の * `#top #shops`）。狭い画面用の写し元は `#shops { padding-bottom: 50px }` * （`static/css/smartphone.css` 194〜198 行）だが、**移行元では ID 2 つの * `#top #shops` が ID 1 つの `#shops` より強いので、幅に関わらず 44px が勝つ。** * * テーマは写すときに ID をクラスへ書き替えており、両方の詳細度が同じになった。 * その結果、後から読む狭い画面用の写しの 50px が勝ち、幅 375px だけ 6px 広く * なっていた（移行元 44px 対 dev 50px。幅 1440px では両側 44px で一致）。 * * この 1 本は最後に読まれるので、同じ詳細度でも後勝ちで 44px に戻せる。 * **一覧 3 枚と章ページは触らない**（移行元は幅 375px でどちらも 50px で、 * dev も 50px で一致している）。 */ body .pa-page--comic-story-top .page-content__body #shops { padding-bottom: 44px; } /* * ------------------------------------------------------------------ * 見出しの色と字間を移行元に戻す（Bug #5176） * ------------------------------------------------------------------ * 移行元のマンガは**見出しに色も字間も置いていない**。写し 2 本（`comic.css` と * `smartphone.css`）を機械で数えても、見出しの要素で終わる当たり先に `color` や * `letter-spacing` を当てている規則は **1 本だけ**で、それは章ページの `h2` * （`body .pa-page--comic-story-inner .page-content__body h2`）である。 * * テーマの既定が乗ると 2 つが動く。 * * `.page-content__body h3` → color: var(--pa-color-heading)（金色） * `.page-content__body :is(h2, h3, h4, h5, h6)` → letter-spacing: 0.05em * * 実測（2026-09-09・代表 4 ページ）。測り方の断りが 3 つある。 * * ① 移行元は手元の写しを配って測った。**道案内の台本つきで配る** * （`pa-verify-assets/tools/legacy-router.php`・8972 番）。`php -S` だけでは * `.html` の中の `` が実行されず、殻を測ることになる。 * **確かめ方**: `curl -sS "http://127.0.0.1:8972<道すじ>" | grep -c 'include_once'` が 0。 * ② 配る CSS は `context.route` で作業場所のファイルへ差し替えた * （`addStyleTag` の末尾差し込みでは並びを検証できない）。 * ③ 幅 1440px と 375px の両方で測った。**どちらも同じ 90 件が 0 件になった。** * * 突き合わせた見出し 48 個（1 + 7 + 20 + 20。個数は両側で同じ・外した 0 個） * 色が違う 42 個 rgb(0, 0, 0) → rgb(163, 118, 43) * 字間が違う（`_page-nav__caption`） 42 個 normal → 0.8px（375px では 0.8px） * 字間が違う（`circleTitle`） 4 個 normal → 1.3px（375px では 1px） * 字間が違う（`_list-title`） 2 個 normal → 2.9px（375px では 1.45px） * * 字間の値が幅で違うのは、写しが字の大きさを幅で変えるためである * （`_list-title` は 58px と 29px）。**0.05em という割合は同じ**なので、 * 打ち消しは 1 本で足りる。 * * 🚨 **色・字間のほかは 1 件も違わなかった**（大きさ・太さ・行送り・そろえ方・ * 外余白・内余白・罫線を同じ実測で比べた）。だから戻すのはこの 2 つだけである。 * * 🚨 **強さは (0, 2, 1) にとどめる。**写しの中で色か字間を持つ見出しの規則は * `body .pa-page--comic-story-inner .page-content__body h2`（金色 `#b4914f`・ * 狭い画面で字間 `-0.1em`）の 1 本だけで、強さは (0, 2, 2) である。 * **`body` を頭に付けて (0, 2, 2) にすると同じ強さになり、後から読まれるこちらが * 勝ってその 1 本を消してしまう。**テーマの既定は (0, 1, 1) なので (0, 2, 1) で足りる。 * * なお**その 1 本は、いまのマンガの中身では当たる相手がいない**（移行元 19 ページを * 機械で数えると、`id="inner"` を持つ章ページ 15 枚に `h2` は 1 個も無く、`h2` が在るのは * `#inner` を持たない一覧 3 枚の `._list-wrap__title` だけである）。強さを抑えるのは、 * 章ページに `h2` が足された将来に備える意味である。 * * 入会案内が同じ形で先に直している（`main.css` の * `.pa-page--guide .page-content__body #guide :is(h2, h3, h4, h5, h6)`）。 * * check-mobile-only: 意図してメディアクエリの外に置く。**移行元は携帯の名乗りでも * 同じページを返すので、携帯幅にも比べる相手が在る**（この区画の特徴。婚活川柳や * ご成婚報告と違う。上の注釈で実測済み）。**幅 375px でも同じ 90 件の差が出ており、 * 同じ打ち消しで 0 件になった**（2026-09-09 の実測。控えは * `probe-5176-headings-375-before.json` と `-375-after.json`）。移行元スマホ版の写しが * 見出しへ当てるのは章ページの `h2` の字間 `-0.1em` の 1 本だけで、その 1 本は * (0, 2, 2) でこの打ち消しに勝つ。**幅で分けると、どちらかの幅だけ移行元と食い違う.** */ .pa-page--comic-story .page-content__body :is(h1, h2, h3, h4, h5, h6) { color: inherit; letter-spacing: normal; } /* * ------------------------------------------------------------------ * 章ページのマンガの絵を、移行元どおり中央に置く（#8405） * ------------------------------------------------------------------ * 移行元の章ページ 15 枚（`/comic-story/p1〜p15`）は、マンガの絵 4 枚を * `div.imgCenter > ul > li > picture > img` に入れ、写し元の `#inner .imgCenter * { text-align: center }` の中央寄せを `ul` から絵まで受け継がせている。 * * **dev では `ul` で受け継ぎが止まる。**テーマ共通の main.css に次の 2 本がある。 * * .entry-content :is(ul, ol), .page-content__body :is(ul, ol) { text-align: left } * :is(.entry-content, .page-content__body) :is(ol, ul, …, .story_inner .archive_ttl) { text-align: left } * * どちらも移行元の旧デザインの共通 CSS（`public/css/common.css`「ol, ul は左寄せ」）の * 写しである。**移行元のマンガはその共通 CSS を読まず、自分の 2 本だけを読む** * （`inc/comic-page-css.php` の説明）。 * * 実測（2026-09-29・幅 1440・移行元リポジトリの版 68e3190cb・30 画面）: * * 章ページ 15 枚 × 絵 4 枚 … 移行元 左 280・右 280（中央） → dev 左 170・右 390（110px 左へ寄る） * 祖先の computed の text-align … `div.imgCenter` は両側 center。`ul` から下が dev だけ left * * **マンガの器の `ul` だけ、寄せを受け継ぎへ戻す。**強さは (0, 3, 2) で、強いほうの * あちら（`:is()` の強さは中でいちばん強い引数で決まるので (0, 3, 0)）に勝つ。 * 同じ形の打ち消しを、店舗詳細の新デザインが先に入れている（main.css の * `.pa-branch__content .cta .cta__topic` の注釈）。 * * 幅の条件は付けない。幅 375 では絵が器の幅いっぱいに広がり、左右の位置は両側で * 同じだった（同じ日の 1 本目の読み）ので、受け継ぎへ戻しても位置は動かない. */ body .pa-page--comic-story-inner .page-content__body .imgCenter ul { text-align: inherit; }