/* 自動で作る。手で直さない。元＝main.css・作り方＝tools/design/taste-base-css.mjs */ /** * フロント側の唯一のスタイルシート。 * * CSSフレームワークは使わない。カスタムプロパティで色・間隔・文字サイズを * 一元管理し、Phase 4 の複製時は :root の値だけ差し替えれば済むようにする。 */ :root { /* * 色。ブランド色はここだけを変える。 * * --c-brand はロゴと親サイト（入口）の色＝屋号「比較チェック」の緑。 * --c-accent はリンク・見出しの差し色で、ジャンルのサイトでは .genre-<ジャンル> * （このファイルの末尾「デザイン v2」）が差し替える。ここの値は親サイトと既定。 * tools/brand/make-images.php はこのブロックと .genre-<ジャンル> の値を読んで画像を描く。 */ --c-text: #16181d; --c-text-muted: #5b6472; --c-bg: #ffffff; --c-bg-subtle: #f6f7f9; --c-border: #e2e5ea; --c-brand: #0f766e; --c-accent: #0f766e; --c-accent-dark: #115e59; --c-accent-soft: #e8f5f2; --c-cta-dark: #d24f04; /* 余白。8pxグリッド。 */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; /* 文字。本文16pxを下回らない。 */ /* * Webフォントは読まない（外部ファイルを増やさない）。端末に入っている日本語フォントを順に探す。 * Mac/iPhone はヒラギノ、Windows 11 は Noto Sans JP（太さを自由に出せる）、 * 古い Windows は BIZ UDPゴシック → メイリオ。游ゴシックは Windows で細く滲むので使わない。 */ --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --radius: 8px; --container: 1080px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.8; /* 日本語の禁則と行末処理。長い英単語URLでの横溢れも防ぐ。 */ word-break: normal; overflow-wrap: anywhere; } img, video { max-width: 100%; height: auto; } a { color: var(--c-accent); } a:hover { color: var(--c-accent-dark); } h1, h2, h3 { line-height: 1.4; margin: var(--space-5) 0 var(--space-3); } h1 { font-size: var(--fs-2xl); margin-top: 0; } h2 { font-size: var(--fs-xl); padding-bottom: var(--space-2); border-bottom: 2px solid var(--c-border); } h3 { font-size: var(--fs-lg); } /* レイアウト */ .l-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); } .l-main { padding-block: var(--space-5); } /* ヘッダー / フッター */ .site-header { border-bottom: 1px solid var(--c-border); background: var(--c-bg); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 64px; } .site-header__title { margin: 0; font-size: var(--fs-lg); } .site-header__title a { display: flex; align-items: center; gap: var(--space-2); color: var(--c-text); text-decoration: none; } /* マークの色はここで決まる（SVG 側は currentColor で継ぐ）。 */ .site-logo { flex: none; color: var(--c-accent); } .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); } .site-footer { margin-top: var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--c-border); background: var(--c-bg-subtle); font-size: var(--fs-sm); color: var(--c-text-muted); } /* スクリーンリーダー用 */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 100; width: auto; height: auto; clip: auto; padding: var(--space-2) var(--space-3); background: var(--c-bg); border: 2px solid var(--c-accent); border-radius: var(--radius); } /* ------------------------------------------------------------------ パンくず ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 言語切替 / 言語バナー ------------------------------------------------------------------ */ /* * hidden 属性が効くようにする。 * UAスタイルの [hidden]{display:none} は、この .lang-banner{display:flex} に * 負けるため、指定しないと中身が空のまま黒帯が出る（実機で発覚した）。 */ /* ------------------------------------------------------------------ 広告表記 ------------------------------------------------------------------ */ .disclosure { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--c-bg-subtle); border: 1px solid var(--c-border); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--c-text-muted); } .disclosure__heading { margin: 0 0 var(--space-1); font-weight: 600; color: var(--c-text); } /* ------------------------------------------------------------------ CTA ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 比較表 ------------------------------------------------------------------ */ /* * 表だけ本文カラムの外へ広げる。 * * ラッパーのクラスは compare-wrap。**compare にしてはいけない。** * post_class() が投稿タイプ名を出すので、比較記事の
にも * class="compare" が付き、記事全体がこの指定を食らう（実機で発生）。 * * 記事は l-container--narrow（720px・内容幅は約688px）で組んでいるが、 * 比較表は既定4列＋CTAで750px前後を要る。カラムに合わせると * **デスクトップでも横スクロールに落ちる**（1280px幅で実測：必要749px / 容器688px）。 * カード化の境界は viewport 900px なので、901px 以上では必ずそうなっていた。 * * 幅の上限は l-container と同じ 1080px。狭い画面では画面幅に従う。 * 100vw から --space-5（40px）引いているのは、100vw がスクロールバーを * 含む環境でページ全体が横に溢れるのを避けるため。 * margin の % は親の内容幅に対して解決するので、これで親の中央に載る。 */ /* ツール名の列。狭いと名前と説明が1文字ずつ折り返して読めなくなる。 */ /* * 速度維持率。表の主役の列。 * tabular-nums は桁を等幅にする指定。行ごとに数字の幅が動くと表が波打って見え、 * 数字を売りにしているサイトでそれが起きると、それだけで信用を落とす。 */ /* ------------------------------------------------------------------ 訴求フック（バッジ） 目立たせすぎない。広告らしさが勝つと本文全体の信頼が落ちて、 結局クリックされなくなる。色は1色に絞り、期限のあるものだけ強調する。 ------------------------------------------------------------------ */ .offers { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; } /* 期限のあるものだけ色を持たせる。常時出るバッジまで色を付けると効かなくなる。 */ /* 本文中に置くとき（[tool_offer]）は行の一部として馴染ませる。 */ /* * 比較表の中は情報密度が高いので、枠を消して文字だけにする。 * 横に並べると列幅が足りず、実機で1文字ずつ縦に折れた。1行1バッジで積む。 */ /* display:block にすると inline-flex の gap が効かないので、余白を足す。 */ /* 確認日。読者への注記なので小さく、目立たせない。 */ .is-right { text-align: right; } .is-center { text-align: center; } /* * 狭い画面ではカード型に切り替える。 * 表を横スクロールさせると右側の列が読まれないまま離脱するため。 * DOMは1つのまま、data-label を項目名として使う。 * * 境界は 900px。767px にしていたが、特典列を足したら表が約860px必要になり、 * iPad の縦向き（768px）で横スクロールが出た。表の最大幅に合わせてここを決める。 * 列を増やして表が広くなったら、この数値も見直すこと。 */ @media (max-width: 900px) { /* カードは本文カラムに戻す。広げたままだと本文と左端がずれる。 */ .compare__table td.is-right, .compare__table td.is-center { text-align: right; } /* * CTAのセル。2つ戻す必要がある。 * display : .compare__cta 単体では .compare__table td に詳細度で負け、flex のまま潰れる * width : 表では列を詰めるための width:1% を、カードでは literal な1%として食らう * どちらか片方だけ直すと、ボタンが指1本ぶんの幅で出る。 */ } /* ------------------------------------------------------------------ トップのヒーロー ------------------------------------------------------------------ */ /* * 画像を使わない。読み込むファイルを1本も増やさずに、文字だけで差を出す。 * ヒーローは
の中に入るので、その上余白を打ち消して * ヘッダーの直下に帯を付ける（帯だけ画面幅いっぱいに敷きたいため）。 */ .hero { margin-top: calc(var(--space-5) * -1); margin-bottom: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--c-border); background: var(--c-bg-subtle); } /* チェック印。アイコンフォントも画像も足さずに出す。 */ @media (max-width: 480px) { .hero { padding-block: var(--space-5); } /* * 狭い画面ではバッジをやめて箇条書きにする。 * 丸のまま縦に3つ積むと記事一覧が1画面目から消え、横に流すと * スクロールバーが出て壊れて見える（375pxの実機で確認）。 */ } /* ------------------------------------------------------------------ カード / 一覧 ------------------------------------------------------------------ */ .section { margin-bottom: var(--space-6); } .card { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg); } /* ------------------------------------------------------------------ 記事 ------------------------------------------------------------------ */ /* 編集者にだけ見せる注意書き */ /* ページャ */ /* ------------------------------------------------------------------ 目次 本文の一部として馴染ませる。枠を強くすると本文より先に目に入って、 読み始める前に「長い」と判断されて離脱する。 ------------------------------------------------------------------ */ /* * 入れ子は少しだけ下げる。深く見せると本文の構造まで複雑に見える。 * * 下位に番号を振らないのは、記事側が見出しに「1.」「2.」を書いていると * 「1. 1. 更新時の料金」と二重に見えるため（実機で発生）。 * 番号を持つかどうかは記事の書き方しだいなので、目次側は持たない。 */ /* * アンカーで飛んだ見出しがヘッダーの下に潜らないよう余白を確保する。 * position:sticky なヘッダーは今は無いが、付けたときにここが効く。 */ /* ------------------------------------------------------------------ 関連記事 カード型にしない。記事の末尾で大きな画像を並べると、CTAより 目立って本来押してほしいものが押されなくなる。行のリストで足りる。 ------------------------------------------------------------------ */ /* 種別のラベル。幅を固定して、記事名の頭を縦に揃える。 */ @media (max-width: 480px) { /* 幅が無いと記事名が1〜2文字で折り返す。縦に積む。 */ } /* ------------------------------------------------------------------ 運営者情報 ------------------------------------------------------------------ */ /* ================================================================== ここから下は Claude Design から受け取った改善分（2026-09-07 適用）。 受け取った形は「main.css の末尾に貼る差分」で、そのまま貼っている。 既存の宣言を打ち消すところは同じセレクタを再掲してあり、 詳細度は上げず**追記順（後勝ち）だけ**で効かせている。 だから、このブロックより上を編集するときは ここで打ち消していないかを先に見ること。 [speed_calc] のCSSだけは例外で、上の元ブロックを削除してある。 デザイン側が見たスナップショットは計算機の実装より前のもので、 打ち消しではなく作り直しになっていたため（クラス構成も違う）。 新規クラス名は review / compare / guide / tool を裸で使っていない （post_class() の投稿タイプ名と衝突するため）。 ================================================================== */ /* ================================================================== 1. :root の差分（変更2件・追加7件） ================================================================== */ :root { /* * [変更] CTA色。#f5610a に白文字は 3.2:1 で 4.5:1 に届かない。 * .cta は太字でも 16px なので WCAG の「大きな文字」扱いにもならない。 * 色相を保ったまま暗さだけ足して 4.6:1 にする。 */ --c-cta-dark: #a03d00; /* * [追加] 評価の色。.compare__yes が直に持っていた #1a7f4b をトークンに上げ、 * 対になる「低い側」を足した。維持率のラベルと ○× が同じ色を読む。 */ /* [追加] 期限つき訴求の地。既存の直書き #fff6f0 を置き換える。 */ /* * [追加] 実測ハイライトの数字だけに使う段。 * 本文の最上段（--fs-2xl）よりさらに上に1段だけ出し、 * 「ここは数字を読みに来る場所」を字の大きさで示す。 */ /* [追加] 本文の1行の長さ。日本語で40字前後に収まる幅。 */ } /* ================================================================== 2. 折り返しの土台（1文字ずつ折れる問題の元を直す） ================================================================== */ /* * [置換] body の overflow-wrap。 * * `anywhere` は **min-content 幅を1文字にする**。表のセルやバッジが * 1文字ずつ縦に折れていたのはこれが原因で、各所に white-space:nowrap を * 足して個別に塞いでいた。 * * `break-word` は「はみ出したときだけ途中で折る」で、min-content 幅には * 影響しない。長いURLの横溢れは同じように防げる。 */ body { overflow-wrap: break-word; } /* * 折らせたくない短いラベルは nowrap ではなく keep-all にする。 * 日本語 … 文字間で折らない（nowrap と同じ結果） * 英語 … 語間では折れるので、文字が伸びても行が増えるだけで済む * nowrap だと英語や1.5倍のフォント設定で列を押し広げ、表が壊れる。 * 「速度維持率」「残存率」どちらの語でも同じ挙動になる。 */ .site-header__title { white-space: normal; word-break: keep-all; overflow-wrap: normal; } /* 表内のバッジも同じ扱いに寄せる（既存の nowrap を置換）。 */ /* 期限つきバッジの地色をトークンから読む（#fff6f0 の置換）。 */ /* 桁を揃える。数字が揺れる表は読みにくいだけでなく信用されない。 */ /* ================================================================== 3. フォーカス表示（新規） キーボードの現在地が今どこにも出ていない。 ================================================================== */ /* ================================================================== 4. ヘッダー / ナビ ================================================================== */ .site-header__inner { flex-wrap: wrap; } /* 14px×1.8 ＋ 上下10px ＝ 45px。指で押せる高さを本文サイズのまま作る。 */ .site-nav a { display: inline-block; padding-block: 10px; color: var(--c-text); text-decoration: none; } .site-nav a:hover { color: var(--c-accent); text-decoration: underline; } .site-nav a[aria-current] { color: var(--c-accent); font-weight: 700; } /* * 600px 以下ではナビだけ2段目に落とす。 * サイト名と言語切替は1段目に残したいので order で最後に送る。 */ @media (max-width: 600px) { .site-nav { order: 3; flex: 1 0 100%; padding-bottom: var(--space-1); border-top: 1px solid var(--c-border); } .site-nav ul { gap: var(--space-4); } } /* ================================================================== 5. パンくず ================================================================== */ /* * 480px では末尾（現在ページ）を隠す。4階層あると375pxで3行になり、 * h1 が1画面目から押し出される。末尾は直後の h1 と同じ文字列なので * 読者が失う情報はない。DOM には残るので構造化データ側は変わらない。 */ /* ================================================================== 6. ヒーロー：主張バッジ → 事実の行 ================================================================== */ /* * ✓つきの3バッジ（自分で測った数字だけ載せる…）は書いた側の宣言で、 * 読者からは検証できない。同じ面積に **基準線・計測台数・最終計測日** を * 置くと、1画面目で「この数字は信用していいのか」に答えられる。 * .hero__points のCSSは残してあるので、両方を並行して置ける。 */ @media (max-width: 480px) { /* 3項目を2列に。1列だと事実の行だけで1画面を使ってしまう。 */ } /* ================================================================== 7. 実測ハイライト（新規・このサイト唯一の武器） ================================================================== */ /* * 構成は「基準線の1行」＋「各社の維持率カード」。 * * 基準線を上に独立して置くのは、以降の % が何に対する % なのかを * ブロック内で完結させるため。カードごとに「VPNなし比」と書かなくてよくなる。 * * カードは 数字（大）／評価ラベル／絶対値（小）／計測日 の4点セット。 * 数字だけでは初心者に良し悪しが伝わらず、絶対値だけでは * 「測った側の回線が速いだけ」の話になる。 */ /* * 3枚固定にしない。auto-fit にしておけば計測済みが2社でも4社でも * 崩れず、記事側の都度の手当てが要らない。 */ /* 単位は数字より2段小さく。%が数字と同じ大きさだと桁が読み取りにくい。 */ /* * 評価は色だけで示さない。色覚と白黒印刷の両方で読めるよう文字を持たせる。 * 地色つきにするのは、数字の直下で「良し悪し」を一目で切り分けたい箇所だけ。 */ /* 未計測を空欄にしない。「まだ測っていない」と書くほうが方針の説明になる。 */ @media (max-width: 480px) { :root { } } /* ================================================================== 8. トップの記事カード ================================================================== */ /* * 今のカードは タイトル＋抜粋 だけで、比較・レビュー・ガイドの * どれなのかがカード内で分からない（セクション見出しを覚えていないと分からない）。 * 種別と更新日を1行足す。抜粋は2行で切る。 */ /* * バッジは1行の箱として確定させる。 * flex item は blockify されるので inline-flex を明示する。 * ここだけ nowrap を使うのは、keep-all では「・」が改行位置として扱われ * （Chrome）、「比較・実測3社」のようなラベルが2行に折れて枠から溢れるため。 * バッジは短いので nowrap でも列を押し広げない。 */ /* 実測値を含む記事だけ差を付ける。全部に付けると差が消える。 */ /* タイトルは3行、抜粋は2行で切る。カードの高さが揃い、視線が横に流れる。 */ /* カード全体が押せることを、枠と影ではなく境界の色で示す。 */ .card { transition: border-color 0.12s ease; } .card:hover { border-color: var(--c-accent); } /* 「すべて見る」を右端の小さな文字のままにしない。押せる幅を持たせる。 */ /* 用途から探すのタイル。押せる高さを確保する。 */ /* ================================================================== 9. 記事本文の組み ================================================================== */ /* * 行長。720pxコンテナだと日本語で50字近く入り、読み返しで行を見失う。 * コンテナは触らず、本文の要素だけ 38em に制限する * （表と図は下で除外して、これまで通りコンテナ幅を使える）。 */ /* 見出しの前後。上に空きを作り、下は詰める。段落と見出しの所属を目で分ける。 */ /* リストの行間。本文と同じ 1.8 だと項目の切れ目が見えない。 */ /* 引用。左罫線1本だけ。地色を付けると注意書きブロックと見分けが付かなくなる。 */ /* * 本文中の表。compare-wrap を使わない小さな表がはみ出していた。 * 横スクロールさせ、キーボードでも届くよう tabindex="0" を付けて使う。 */ /* 更新日を本文の頭で見せる。実測を売るサイトで「いつの数字か」は本文の一部。 */ /* ================================================================== 10. 目次 ================================================================== */ /* *
にして畳めるようにする。長い記事では目次が1画面を占め、 * 本文の1行目までスクロールが必要になっていた。 * open 属性を付けておけば、JSなしで既定は開いたまま。 */ /* 開閉の三角。閉じているときだけ回す。 */ /* ================================================================== 11. CTA ================================================================== */ /* * 押せる高さを 44px 確保する。今の .cta は 8px+8px+29px で 45px あるが、 * .cta--sm は 4px+4px+25px = 33px で表内の主要動線がこれになっていた。 */ /* * CTAの直後に、遷移先で何が起きるかを1行置く場所。 * ボタン文言を長くするより、押す前の不安を短い注記で消したほうが効く。 */ /* ================================================================== 12. フッター ================================================================== */ .site-footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); } .site-footer__block { display: grid; gap: var(--space-2); align-content: start; } .site-footer__heading { margin: 0; color: var(--c-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; } .site-footer ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .site-footer a { display: inline-block; padding-block: var(--space-1); color: var(--c-text); } .site-footer__copyright { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--c-border); font-size: 0.75rem; } /* 全サイト共通の固定ページ（運営者情報・プライバシーポリシー・問い合わせ）。横に並べて折り返す。 */ .site-footer ul.site-footer__pages { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: var(--space-2); } /* 親サイトの入口（template-parts/network-hub.php）。ジャンル名の下に説明を置く。 */ /* ================================================================== 13. 動きを減らす設定への追従 ================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ================================================================== 14. 目的から選ぶ（ブロック2） ================================================================== */ /* * 既存の .genre-list（タクソノミー＝文字起こし/海外動画）に代えて、 * トップの2番目には**サジェストの語に合わせた目的**を置く。 * 「安い」「ネットフリックス」「中国」「無料」は実際に打たれている語なので、 * 分岐のラベルをその語のままにすると、検索語と着地点が一致する。 * * ランキングの1位を作らずに結論を先に出せるのは、この分岐だけ。 */ /* 分岐の下に「何で決まるか」を1行。用途で分ける根拠を分岐の中に持たせる。 */ /* ================================================================== 15. 比較表：維持率・基準線・返金保証 ================================================================== */ /* * 維持率は「%＋評価ラベル」の2段。数字だけでは初心者に良し悪しが伝わらない。 * 縦に積むのは、900px以下のカードでも同じ見え方になるため * （横並びにすると data-label と競合して3つ並びになる）。 */ /* * 絶対値と計測日は維持率の下に小さく。主役を入れ替えない。 * * 2要素に分けて縦に積むのは、1要素で「64.9 Mbps・08-31」と書くと * 表モードの狭い列（88px）で「・」が改行位置になり、 * 「64.9 Mbps・08-」「31」と**日付が割れる**ため（Chrome）。 * 数字の信用が主題の表なので、ここは分断させない。 */ /* 台数セル。「無制限」が語中で折れるのを防ぐ。 */ /* * 基準線の行（VPNなし・100%）。 * 表の1行目に置くと、以降の%が何に対する%かを表の中で説明しなくてよくなる。 * 地色を敷いて「これは商品ではない」ことを示し、CTA列は空にする。 */ /* 900px以下のカードでは、基準線だけカードにせず1行の帯で出す。 */ @media (max-width: 900px) { /* 空のセルはカードでは行を作ってしまう。 */ } /* * CTAの直下に返金保証。VPNの購入障壁は「合わなかったら損をする」に集まるので、 * ボタン文言を長くするより、日数を数字で出すほうが効く。 * データに日数が無い行では要素ごと出さない（デザイン側で埋めない）。 */ /* ================================================================== 16. 実効速度の計算機（.speedcalc） ================================================================== */ /* * 唯一の「使う」場所。置き場所は**実測ハイライトの直後**を提案する。 * 維持率を見た読者の次の問いは「自分の環境でも同じか」で、 * 同じ画面で答えられるのはここだけ。比較表より前に置くと、 * 表を読むときには既に自分の回線の数字が頭にある状態になる。 * * 入力は1つ。JSはインライン数行（CHANGES.md に全文）。 */ /* * 入力欄。幅は文字数ではなく ch で決める（4言語で桁数は変わらない）。 * 高さ48pxは指で押せる下限。16px を下回らせないのは、 * iOS が16px未満の入力でズームするため。 */ /* * 幅の決め方。 * * number のスピナーは内側の文字領域を約14px食うので、ch で幅を決めても * 実際に使える桁数が足りない（16px+16pxのパディングと合わせて、9ch でも * 文字に使えるのは約46px＝3桁分。光1Gbpsの読者が打つ「1000」で切れる）。 * * スピナーを消して（値は上下キーで動くので操作は失われない） * パディングを8pxに落とし、10000 まで入る 11ch を確保する。 */ /* * 1行3値（名前／維持率／見込み速度）。 * 375px でも3値を1行に収められるよう、名前だけ可変幅にする。 */ /* 出力。ここだけ数字を大きくする。読者が見に来た1つの値。 */ /* * 以下2つは、デザインが見たスナップショットには無かった実装ぶんの引き継ぎ。 * * 上下の余白：デザイン側の計算機は .section の中に置かれる前提だが、 * [speed_calc] は記事本文にも置く。本文では .section が付かないので、 * 前後の段落とくっつかないよう自分で持たせる。 * * __empty：全社が未計測のときに出す1行。表を出さない代わりの説明で、 * 本文と同じ濃さで出すと「本文の続き」に見える。 */ /* ================================================================== 17. 計測のしかた（ブロック5）／悩み別（6）／VPNとは（7） ================================================================== */ /* * 計測のしかたは3行だけ。ここで方法論を長く書くと本題に着く前に離脱する。 * 番号を振るのは、手順そのものが「再現できる」ことの表明になるため。 */ /* * 悩み別ガイド。「遅くなった」「繋がらない」を入口にする。 * 疑問文をそのままリンクにするのは、検索語がそのまま疑問文で打たれるため。 */ /* * VPNとは（初心者の受け皿）。検索の最多入口なので置くが、 * トップで説明し切らない。1段落＋用語3つに留めて記事へ送る。 */ /* * 専門語の初出説明。
で組むのは、語と説明の対応が * 読み上げでも保たれるため。 */ /* * 広告素材の枠（[tool_banner]）。 * * ASPのバナーは幅が固定（468x60 など）で来るので、はみ出さないことだけを面倒みる。 * 中の見た目には手を出さない——素材はいつ差し替わるか分からず、こちらの CSS が * 特定の寸法を前提にしていると、差し替えた日に崩れる。 */ .tool-banner { margin: var(--space-5) 0; } .tool-banner--center { text-align: center; } .tool-banner img { max-width: 100%; height: auto; } /* 素材が無くてテキストのCTAに落ちたとき、ボタンが行いっぱいに伸びないようにする。 */ /* ================================================================== デザイン v2（2026-09-11）：屋号「比較チェック」とジャンルの差し色 5ジャンルを1ドメインで持つ構成になったので、VPN時代の見た目（青1色・ 文字だけ）から作り直した。ここより上の宣言を**後勝ちで**上書きしている。 上を編集するときは、ここで打ち消していないかを先に見ること。 - 色：ロゴと入口はブランドの緑（--c-brand）。各サイトは .genre-<ジャンル> が差し色（--c-accent / -dark / -soft）を決め、リンク・見出し・カードに効く - 画像ファイルは増やしていない。飾りは CSS のグラデーションとインラインSVG - 数字・文言はここに書かない（config と tool のデータから出る） ================================================================== */ /* ---------- 1. トークン：影・角丸・蛍光ペン・ジャンルの差し色 ---------- */ :root { --c-ink: #14202b; /* フッターとネットワークの帯の地 */ /* 副題・リード。本文より一段だけ弱く */ /* 本文の太字に引く蛍光ペン */ --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07); --shadow-md: 0 10px 28px -12px rgba(16, 24, 40, 0.22); } /* * ジャンルの差し色。白地の文字・白文字の地のどちらでも 4.5:1 以上（2026-09-11 に計算）。 * 橙は申し込みボタン（--c-cta）専用なので、ジャンルの色には使わない。 * tools/brand/make-images.php がこの行の --c-accent を読んでジャンルの画像を描く（1行1ジャンルを崩さない）。 */ .genre-beauty { --c-accent: #b3245e; --c-accent-dark: #8e1a4a; --c-accent-soft: #fcf0f5; } .genre-reuse { --c-accent: #2f7a3a; --c-accent-dark: #235c2c; --c-accent-soft: #edf7ee; } .genre-job { --c-accent: #4f46c8; --c-accent-dark: #3c35a3; --c-accent-soft: #f0effc; } .genre-card { --c-accent: #1f5fbf; --c-accent-dark: #174a96; --c-accent-soft: #edf3fc; } .genre-vpn { --c-accent: #6d3fc0; --c-accent-dark: #55309a; --c-accent-soft: #f4effc; } .genre-mobile { --c-accent: #0369a1; --c-accent-dark: #075985; --c-accent-soft: #eaf5fb; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { text-decoration-thickness: 1px; text-underline-offset: 3px; } /* * 日本語の改行位置。 * * 見出しは文節で折り（auto-phrase：Chrome/Edge 119+。 のときだけ効く）、 * 行の長さをそろえる（balance）。何も指定しないと「…条件で選／ぶ」のように * 1文字だけ次の行に落ちる（2026-09-11 に実機で出た）。 * 段落は最終行が1〜2文字にならないようにだけする（pretty）。 * 対応していないブラウザは今までどおり折れるだけで、崩れはしない。 */ /* タイルの名前は文節で折るだけ。行をそろえると幅の半分で折れて「汗やに／おい」になった。 */ /* ---------- 2. ボタン・チップ ---------- */ /* サイト内の導線（記事へ進む）。申し込みの .cta（橙）とは色で分ける。 */ .button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--c-accent); color: #fff; font-weight: 700; line-height: 1.4; text-decoration: none; box-shadow: 0 8px 20px -10px var(--c-accent); transition: background-color 0.15s ease; } .button::after { content: "\2192"; transition: transform 0.15s ease; } .button:hover { background: var(--c-accent-dark); color: #fff; } .button:hover::after { transform: translateX(3px); } /* ---------- 3. ネットワークの帯（マルチサイトのときだけ出る） ---------- */ .network-bar { background: var(--c-ink); color: #c9d3dc; font-size: 0.8125rem; } /* 狭い画面では横に流す。サイトが増えても2段にしない（ヘッダーが1画面を食う）。 */ .network-bar__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 38px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .network-bar__inner::-webkit-scrollbar { display: none; } .network-bar__home { flex: none; color: #fff; font-weight: 700; text-decoration: none; } .network-bar__list { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .network-bar__link { display: inline-flex; align-items: center; gap: 7px; padding-block: 8px; color: #c9d3dc; text-decoration: none; } /* 各サイトの差し色を点で。文字は白系のまま（濃い地に差し色の文字は読めない）。 */ .network-bar__link::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); } .network-bar a:hover, .network-bar__link[aria-current] { color: #fff; } .network-bar__link[aria-current] { font-weight: 700; } /* ---------- 4. ヘッダー ---------- */ .site-header { background: var(--c-bg); border-bottom: 1px solid var(--c-border); } .site-header__inner { justify-content: flex-start; min-height: 68px; gap: var(--space-2) var(--space-4); } /* * メニューは右寄せで屋号と同じ段に置く。以前は 600px 以下でメニューだけ3段目に落としていたが、 * 項目が1〜3個（ガイド・比較・体験レポート）なので、入らないときだけ自然に折り返せば足りる。 */ .site-nav { margin-left: auto; } @media (max-width: 600px) { .site-nav { order: 0; flex: 0 1 auto; padding-bottom: 0; border-top: 0; } } .site-header__title a { gap: 10px; } /* ロゴは屋号の色で固定する。ジャンルで色が変わると別のサイトに見える。 */ .site-logo { width: 32px; height: 32px; color: var(--c-brand); } .site-header__brand { color: var(--c-text); font-size: 1.1875rem; font-weight: 800; letter-spacing: 0.02em; } .site-header__genre { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-dark); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; white-space: nowrap; } .site-nav ul { gap: var(--space-4); font-size: 0.9375rem; } .site-nav a { font-weight: 700; } .site-nav a:hover { color: var(--c-accent-dark); text-decoration: none; } .site-nav a[aria-current] { color: var(--c-accent-dark); box-shadow: inset 0 -3px 0 var(--c-accent); } @media (max-width: 480px) { .site-header__inner { min-height: 60px; } .site-logo { width: 28px; height: 28px; } .site-header__brand { font-size: 1.0625rem; } .site-header__genre { padding: 2px 8px; font-size: 0.75rem; } } /* ---------- 5. ヒーロー ---------- */ /* * 地は差し色の淡色から白へ。上に表の罫線の地紋を薄く敷く＝「条件を同じ形にそろえて並べる」。 * 画像は使わない（グラデーションだけで描く）。 */ .hero { position: relative; overflow: hidden; padding-block: 56px 64px; border-bottom: 0; background: linear-gradient(160deg, var(--c-accent-soft) 0%, var(--c-bg) 78%); } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(20, 32, 43, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 32, 43, 0.05) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 90%); mask-image: linear-gradient(to bottom, #000 20%, transparent 90%); pointer-events: none; } /* チェック印を差し色の丸に。アイコンフォントも画像も足さない。 */ /* 右の絵（template-parts/hero-art.php）。色はここで決める。 */ /* 狭い画面では丸いバッジをやめ、チェック付きの箇条書きに（1画面目を記事一覧に残す）。 */ @media (max-width: 480px) { .hero { padding-block: 36px 40px; } } /* ---------- 6. セクション・用途のタイル・記事カード ---------- */ .section { margin-bottom: 72px; } /* * 名前は折り返してよい。keep-all のままだと空白の無い日本語が1語扱いになり、 * 長い用途名（「わきの汗やにおいを相談したい」）がタイルからはみ出して件数に重なった（2026-09-11）。 */ .card { position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* 上辺に差し色の帯。どのジャンルのカードかが並びの中で分かる。 */ .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c-accent); } .card:hover { transform: translateY(-2px); border-color: var(--c-border); box-shadow: var(--shadow-md); } /* 読み進める矢印。文言は増やさない。 */ /* ---------- 7. 親サイトの入口：ジャンルのサイトのカード ---------- */ /* 入口の「比べたページ」。ラベルはサイト名（宅配買取・不動産買取 など）で長いので、関連記事より幅を取る。 */ /* ---------- 8. 記事：見出しまわり ---------- */ .disclosure { border-radius: 10px; background: #f8f9fb; } /* ---------- 9. 目次 ---------- */ /* * 見出し帯つきのカード。以前の三角（▸）は開閉できるように見えて開閉しなかったので外した * （目次は