/* Theme Name: SWELL CHILD Theme URI: https://swell-theme.com/ Template: swell Description: SWELLの子テーマ / UTAGEメディア用カスタマイズ Version: 1.0.1 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ */ /* UTAGEメディア 子テーマCSS ブランドトークン（ロゴ実測・本体LP照合済み） */ :root{ --u-blue:#58A3E6; --u-purple:#A75FF5; --u-mid:#7B82EE; --u-link:#1D75C3; --u-ink:#1A1A1A; --u-text:#222222; --u-muted:#6B7280; --u-line:#E5E7EB; --u-bg2:#F7F7F7; --u-grad:linear-gradient(135deg,#58A3E6,#A75FF5); } /* 1. ヘッダーCTAボタン（通常ヘッダー・追従ヘッダーの両方に適用） */ .c-gnav > li.header-cta{ display:flex; align-items:center; } .c-gnav > li.header-cta > a{ background:var(--u-grad); color:#fff !important; border-radius:6px; padding:.62em 1.3em !important; margin-left:.6em; font-weight:700; line-height:1.4; height:auto !important; white-space:nowrap; transition:opacity .2s ease, transform .2s ease; } .c-gnav > li.header-cta > a::before, .c-gnav > li.header-cta > a::after{ display:none !important; } .c-gnav > li.header-cta > a .ttl{ color:#fff !important; padding:0 !important; } .c-gnav > li.header-cta > a:hover{ opacity:.88; transform:translateY(-1px); } /* スマホ側では通常リンクに戻す */ .p-spMenu .header-cta > a, .p-spHeadMenu .header-cta > a{ background:none !important; color:inherit !important; border-radius:0; margin:0; } /* 2. 資料請求CTAの共通部品（サイドバー・記事末で共用） グラデーションの板に白ボタン、という型をやめ、白いカードに導入ガイドの実物（表紙と中面）を載せる。 何がもらえるかを見せるほうが押される。画像は assets/cta-visual/build.py で作る（実物の合成。生成画像は使わない） */ .u-free{ /* 「無料」バッジ */ position: absolute; top: 14px; right: 12px; z-index: 1; font-size: .7em; font-weight: 700; letter-spacing: .06em; color: #fff; background: #F0567A; border-radius: 999px; padding: .25em .75em; box-shadow: 0 4px 10px -4px rgba(240, 86, 122, .6); } .u-kicker{ margin: 0 0 .15em; font-size: .72em; font-weight: 700; letter-spacing: .08em; color: var(--u-mid); } .u-check, .post_content .u-check{ list-style: none; margin: 0 0 1em; padding: 0; } /* 本文内のリスト用の字下げを打ち消す */ .u-check li{ position: relative; margin: 0 0 .35em; padding-left: 1.35em; font-size: .88em; line-height: 1.6; color: var(--u-text); } .u-check li::before{ /* チェックの丸 */ content: ""; position: absolute; left: 0; top: .32em; width: .95em; height: .95em; border-radius: 50%; background: var(--u-grad); } .u-check li::after{ /* チェックの印 */ content: ""; position: absolute; left: .3em; top: .5em; width: .32em; height: .5em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .u-pill{ /* 丸いボタン */ display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--u-grad); color: #fff !important; font-weight: 700; padding: .85em 1.8em; border-radius: 999px; text-decoration: none !important; /* 本文内のリンク装飾（下線）を打ち消す */ white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(123, 90, 238, .7); transition: transform .2s ease, box-shadow .2s ease; } .u-pill::after{ content: "→"; transition: transform .2s ease; } .u-pill:hover{ transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(123, 90, 238, .8); opacity: 1; } .u-pill:hover::after{ transform: translateX(3px); } .u-note-s{ margin: .6em 0 0; font-size: .72em; color: var(--u-muted); } /* 2-1. サイドバー */ .u-side-cta{ position: relative; overflow: hidden; background: linear-gradient(180deg, #F3F1FF 0%, #fff 58%); border: 1px solid #E4E0FB; border-radius: 14px; padding: 18px 16px 16px; text-align: left; box-shadow: 0 10px 28px -14px rgba(91, 70, 190, .35); } .u-side-cta::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--u-grad); } .u-side-cta__img{ display: block; width: 100%; height: auto; margin: 6px 0 10px; transition: transform .35s ease; } .u-side-cta:hover .u-side-cta__img{ transform: translateY(-4px) rotate(-.6deg); } .u-side-cta__t{ margin: 0 0 .6em; font-size: 1.08em; font-weight: 800; line-height: 1.45; color: var(--u-ink); } .u-side-cta .u-check li{ font-size: .82em; } .u-side-cta .u-pill{ display: flex; font-size: .95em; padding: .85em 1em; } .u-side-cta .u-note-s{ text-align: center; } /* 4. 記事冒頭の結論枠 */ .u-lead{ border-left:4px solid var(--u-blue); background:var(--u-bg2); padding:1.1em 1.3em; border-radius:0 8px 8px 0; margin-bottom:1.8em; } .u-lead p:last-child{ margin-bottom:0; } /* 5. 記事下CTAカード */ .u-cta{ border:1px solid var(--u-mid); background:#F4F5FF; border-radius:10px; padding:1.4em 1.5em; } .u-cta__t{ font-size:1.12em; font-weight:700; margin:0 0 .5em; color:var(--u-ink); } .u-cta__b{ display:inline-block; background:var(--u-grad); color:#fff !important; font-weight:700; padding:.8em 2em; border-radius:6px; text-decoration:none; transition:opacity .2s ease; } .u-cta__b:hover{ opacity:.88; } /* 5-1. 記事末カード（左にビジュアル、右に中身） -guide … 資料請求（ブログパーツ175。導入ガイドの実物） -trial … トライアル（事例記事の記事末。assets/case-article/build.py の trial_card。UTAGEの管理画面） */ .u-cta.-card{ position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: 1.2em 1.8em; align-items: center; background: linear-gradient(135deg, #F3F1FF 0%, #fff 62%); border: 1px solid #E4E0FB; border-radius: 16px; padding: 1.8em 2em; box-shadow: 0 14px 34px -18px rgba(91, 70, 190, .35); } .u-cta.-card::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--u-grad); } .u-cta.-card .u-free{ top: 16px; right: 16px; } .u-cta__visual img{ display: block; width: 100%; height: auto; transition: transform .35s ease; } .u-cta.-guide:hover .u-cta__visual img{ transform: translateY(-4px) rotate(-.6deg); } .u-cta.-trial:hover .u-cta__visual img{ transform: translateY(-4px); } .u-cta.-card .u-cta__t{ margin: 0 0 .45em; font-size: 1.3em; font-weight: 800; line-height: 1.4; } .u-cta.-card .u-cta__lead{ margin: 0 0 .9em; } .u-cta.-card p{ margin-bottom: 0; } .u-cta.-trial{ grid-template-columns: minmax(0, 48%) 1fr; } /* 画面は横長なので少し広く */ .u-cta__label{ font-size: .74em; font-weight: 700; color: var(--u-muted); margin: .2em 0 .35em !important; } .u-chips, .post_content .u-chips{ list-style: none; display: flex; flex-wrap: wrap; gap: .35em; margin: 0 0 .9em; padding: 0; } .u-chips li{ margin: 0; padding: .2em .7em; font-size: .76em; font-weight: 700; line-height: 1.6; color: var(--u-ink); background: #fff; border: 1px solid #D9D3FA; border-radius: 999px; } .u-chips li::before{ content: none; } .u-cta__alt{ margin-top: .9em !important; padding-top: .8em; border-top: 1px dashed #E0DCF6; font-size: .8em; color: var(--u-muted); } .u-cta__alt a{ font-weight: 700; } @media (max-width: 600px){ .u-cta.-card{ grid-template-columns: 1fr; padding: 1.4em 1.2em; text-align: left; } .u-cta__visual{ max-width: 340px; margin: 0 auto; } .u-cta.-card .u-cta__t{ font-size: 1.15em; } .u-cta.-card .u-pill{ display: flex; } .u-cta.-trial .u-pill{ white-space: normal; padding: .85em 1em; text-align: center; } /* 文言が長く、320px幅で1行に収まらない */ } /* 5-2. 資料請求カードは、どこを押しても資料請求ページへ（9/29 和泉様「ボタンの箇所じゃないと反応しないのは、見ている方の予測と異なる」） ボタンのリンクをカード全体に広げる。文章はテキストのまま残す（SEOのため画像1枚にはしない） ボタン自身の hover の transform は切る（transform があると広げた範囲がボタンに縮み、カーソルの下でちらつく） */ .u-cta.-guide, .u-side-cta{ cursor: pointer; } .u-cta.-guide .u-pill, .u-side-cta .u-pill{ transform: none !important; } .u-cta.-guide .u-pill::before, .u-side-cta .u-pill::before{ content: ""; position: absolute; inset: 0; z-index: 2; } .u-cta.-guide:hover .u-pill, .u-side-cta:hover .u-pill{ box-shadow: 0 12px 22px -8px rgba(123, 90, 238, .8); } .u-cta.-guide:hover .u-pill::after, .u-side-cta:hover .u-pill::after{ transform: translateX(3px); } /* 記事下CTAカードの本文 */ .u-cta__lead{ margin: 0 0 1em; font-size: .92em; line-height: 1.8; color: var(--u-muted); } /* 6. 比較表 UTAGE列の強調 */ .wp-block-table.is-style-compare td.u, .wp-block-table.is-style-compare th.u{ background:#EEF3FF; font-weight:700; } /* 7. 本文の可読性 */ .post_content{ line-height:1.9; } .post_content a{ text-decoration:underline; text-underline-offset:.18em; } /* -------------------------------------------------------------------------- 8. トップ：ピックアップ（モック P-01「PICKUP / ピラー記事」） メインはサムネイルをカード全面に敷き、小見出しとタイトルを下端に重ねる （モックの .m-hero-main = justify-content:flex-end）。 カードの高さはサブ2枚の積み上がりで決まり、min-height を下限として効かせる。 -------------------------------------------------------------------------- */ .u-pickup{ margin-bottom: 2.2em; } .u-pickup__grid{ display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 960px){ .u-pickup__grid{ grid-template-columns: 1.6fr 1fr; } } .u-pickup__col{ display: grid; gap: 14px; } .u-pickup__col.-subCol{ grid-auto-rows: 1fr; } .u-pickup__card{ transition: box-shadow .2s ease, transform .2s ease; } .u-pickup__card:hover{ transform: translateY(-2px); } .u-pickup__ttl{ font-weight: 700; margin: 0; } /* メイン（大）：画像を上、タイトルを下に分ける。 以前は画像をカード全面に敷いてタイトルを重ねていたが、アイキャッチに見出しを入れる型 （事例記事・assets/eyecatch-guide/）にしたため、画像の文字とタイトルが二重になった（2026-10-04）。 画像は16:9を切らずに見せ、文字は白地に置く（どの画像に差し替えても読める）。 */ .u-pickup__card.-main{ overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid var(--u-line); } .u-pickup__card.-main:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.10); } .u-pickup__card.-main .u-pickup__link{ display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .u-pickup__card.-main .u-pickup__thumb{ position: relative; aspect-ratio: 16 / 9; background: var(--u-bg2); } .u-pickup__img{ width: 100%; height: 100%; object-fit: cover; display: block; } .u-pickup__card.-main .u-pickup__body{ flex: 1 1 auto; padding: 16px 20px 18px; } .u-pickup__card.-main .u-pickup__ttl{ color: var(--u-ink); font-size: 1.2em; line-height: 1.5; } .u-pickup__eyebrow{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--u-mid); margin-bottom: .45em; } /* サブ（小）：白ボックス＋枠線 */ .u-pickup__card.-sub{ background: #fff; border: 1px solid var(--u-line); border-radius: 8px; } .u-pickup__card.-sub:hover{ box-shadow: 0 4px 14px rgba(0,0,0,.07); } .u-pickup__card.-sub .u-pickup__link{ display: block; height: 100%; color: inherit; text-decoration: none; } .u-pickup__card.-sub .u-pickup__body{ padding: 22px 16px 16px; } /* 上だけ広め。カテゴリ名がカード上端に貼り付いて見えないように */ .u-pickup__card.-sub .u-pickup__ttl{ font-size: .95em; line-height: 1.6; color: var(--u-ink); } .u-pickup__cat{ display: block; font-size: 11px; font-weight: 700; line-height: 1; color: var(--u-link); letter-spacing: .04em; margin-bottom: .6em; } /* ヘッダー帯：文字とアイコンを一段小さく */ .l-header__bar .c-catchphrase{ font-size: 11px; } .l-header__bar .c-iconList__link{ font-size: 13px; } /* -------------------------------------------------------------------------- 9. トップ：カテゴリタブ SWELL既定はPC4分割・SP2分割の固定幅。カテゴリ名が長いので モックどおり可変幅のピルにして折り返す -------------------------------------------------------------------------- */ .p-postListTab > .c-tabList{ --the-tab-flex: 0 0 auto; --the-tab-flex_wrap: wrap; --the-tab-item-margin: 0 6px 6px 0; --the-tab-btn-padding: .6em 1.1em; justify-content: flex-start; } .p-postListTab .c-tabList__item{ padding: 0 !important; } .p-postListTab .c-tabList__button{ border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--u-line); background: #fff; opacity: 1; } .p-postListTab .c-tabList__button::before, .p-postListTab .c-tabList__button::after{ display: none !important; } .p-postListTab .c-tabList__button:hover{ border-color: var(--u-mid); color: var(--u-link); background: #fff; } .p-postListTab .c-tabList__button[aria-selected="true"]{ background: var(--u-grad); border-color: transparent; color: #fff; font-weight: 700; } /* -------------------------------------------------------------------------- 10. サイドバー：人気記事の順位バッジをブランド色に寄せる （SWELLの既定は金銀銅。メディアの記事ランキングでは主張が強いので単色にする） -------------------------------------------------------------------------- */ .-w-ranking .p-postList__item::before, .-w-ranking .p-postList__item:first-child::before, .-w-ranking .p-postList__item:nth-child(2)::before, .-w-ranking .p-postList__item:nth-child(3)::before{ background-color: var(--u-mid); background-image: none; border-radius: 3px; } /* -------------------------------------------------------------------------- 11. スマホ固定フッターのCTA（要件: スマホはハンバーガー＋固定フッターにCTA） -------------------------------------------------------------------------- */ /* SWELLはアイコン未指定の項目にも を出力する（アイコンはメニュー項目の 「説明」欄にクラス名を書く仕様）。CTAはボタンなのでアイコンを付けていないが、 空の が20pxの箱として残り、文字がその下＝ボタンの下端に寄ってしまう。 空アイコンだけを畳んで、ラベルをボタンの中央に置く。 ※ラベルの文字サイズは他の項目(10px)と揃える。記事ページでは「目次」が増えて 4分割(1枠97px)になるため、大きくすると収まらない。 */ #fix_bottom_menu .fixfoot-cta > a > i:not([class*="icon-"]){ display: none; } /* ul.menu_list は align-items:center なので、放っておくと項目の高さは中身なりになる。 他の項目はアイコン＋ラベルで34px、CTAはアイコンを畳んだので文字だけの14pxになってしまう。 CTAだけ stretch させ、バーの高さいっぱいのボタンにする。 */ #fix_bottom_menu .fixfoot-cta{ align-self: stretch; display: flex; } #fix_bottom_menu .fixfoot-cta > a{ background: var(--u-grad); color: #fff !important; font-weight: 700; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 .4em; line-height: 1.35; text-align: center; } #fix_bottom_menu .fixfoot-cta > a:hover{ opacity: .9; } /* -------------------------------------------------------------------------- 12. トップページの余白 ・#content の padding-top 64px は、記事ページではパンくずが入る場所。 トップはSWELLがパンくずを出さない仕様なので、空白だけが残る。トップのみ詰める。 ・SWELLはタブ枠に左右マージンを持たせているため、ピックアップや記事一覧と 左端が揃わない。0 にして揃える。 -------------------------------------------------------------------------- */ @media (min-width: 960px){ .home #content{ padding-top: 48px; } /* ピックアップとタブの間。SWELL既定の64pxは下側(32px)の2倍で離れすぎ。 ヘッダー直下と同じ48pxにして「区切り48 / 塊の中32」の2段階に揃える */ .home .p-homeContent{ margin-top: 48px !important; } /* SWELLの .u-mt-40 が !important のため */ } .p-postListTab{ margin-left: 0; margin-right: 0; } /* -------------------------------------------------------------------------- 13. ラベルの色ルール（モック準拠） モックは「ラベル＝アクセント色の文字」「ボタン・選択状態＝アクセント色の塗り」で統一している。 SWELL既定はカテゴリを白文字のチップでサムネイルに重ねるため、「投稿日時の横（beside_date）」に 出す設定へ変え、ここで文字色をブランド色にする。フォルダのアイコンはモックに無いので出さない。 -------------------------------------------------------------------------- */ .p-postList__cat{ color: var(--u-link); font-weight: 700; } .p-postList__cat.icon-folder::before{ display: none; } /* モックはカテゴリを見出しの上に置いている。カード型のみメタ行を見出しの前へ */ .p-postList.-type-card .p-postList__body{ display: flex; flex-direction: column; } .p-postList.-type-card .p-postList__meta{ order: -1; margin-bottom: .4em; } /* -------------------------------------------------------------------------- 14. ヘッダーのメディア名（ロゴの右に並べる / モック P-01） ロゴ画像は「Uマーク＋UTAGE」まで。メディア名は画像に焼かずテキストで置く。 -------------------------------------------------------------------------- */ .c-headLogo{ display: flex; align-items: center; gap: .6em; } /* ロゴの上下余白。SWELL既定は 16px でヘッダーが厚くなるため詰める。 PC限定にすること。SWELLは .c-headLogo__link 側にも上下10pxを持っており、 スマホでは枠(40px)から二重に引かれてロゴが20pxまで潰れる（2026-09-15 実測）。 */ @media (min-width: 960px){ .-series .l-header__logo{ padding-top: 10px; padding-bottom: 10px; } } .c-headLogo__link{ display: inline-flex; align-items: center; } .u-mediaName{ font-size: 17px; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .02em; /* ロゴのUマークと同じグラデーション。背景を文字型に切り抜く */ background: var(--u-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* 背景クリップ非対応の環境では単色にフォールバックする */ @supports not (background-clip: text){ color: var(--u-link); -webkit-text-fill-color: currentColor; } } @media (max-width: 959px){ /* スマホはロゴが中央。名称は一段小さくして収める */ .u-mediaName{ font-size: 13px; } } /* -------------------------------------------------------------------------- 15. フッター（要件10章 / O-06） 配色はブランド青 #58A3E6 の色相208度を保った暗色。白文字で16.7:1、 淡色 #C9D3DE で11.0:1。いずれも WCAG AA を大きく上回る。 -------------------------------------------------------------------------- */ :root{ --u-foot-bg: #151F28; /* 色相208度・彩度30%・明度12% */ --u-foot-text: #C9D3DE; --u-foot-line: rgba(255,255,255,.12); } .l-footer{ background: var(--u-foot-bg) !important; color: var(--u-foot-text) !important; } .l-footer a{ color: var(--u-foot-text); text-decoration: none; } .l-footer a:hover{ color: #A9D3F5; } .u-foot{ padding: 56px 0 8px; } /* 「このメディアについて」列は固定ページが無い間は出ないので、 列数が 3 でも 4 でも隙間ができないフレックスにする */ .u-foot__grid{ display: flex; flex-wrap: wrap; gap: 36px 48px; } .u-foot__brand{ flex: 1 1 100%; } .u-foot__col{ flex: 1 1 100%; } @media (min-width: 600px){ /* ロゴ34px + 溝9.6px + 名称141.4px = 245px（2026-09-24 実測）。 220px だと名称が「UTAGE公式メディ／ア」で折り返す */ .u-foot__brand{ flex: 1 1 250px; max-width: 280px; } .u-foot__col{ flex: 0 1 auto; min-width: 140px; } /* カテゴリは2列。最長「会員サイト・オンライン講座」が208px必要なので 2列分 208*2 + 溝24 = 440px を下限にする（実測値ベース） */ .u-foot__col.-cats{ flex: 1 1 440px; max-width: 480px; } } @media (min-width: 960px){ .u-foot__grid{ gap: 48px 64px; justify-content: space-between; } } /* 名称は途中で割らない。列が足りないときはロゴの下へ落とす（幅を詰めるより読める） */ .u-foot__logo{ display: inline-flex; align-items: center; gap: .6em; flex-wrap: wrap; } .u-foot__logoImg{ width: auto; height: 34px; } .u-foot__name{ font-size: 15px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: var(--u-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .u-foot__lead{ margin: 1em 0 0; font-size: 13px; line-height: 1.9; color: rgba(201,211,222,.78); max-width: 24em; } .u-foot__h{ font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #fff; margin: 0 0 1.1em; padding: 0; } .u-foot__list{ list-style: none; margin: 0; padding: 0; } .u-foot__list li{ margin: 0 0 .85em; } .u-foot__list a{ font-size: 13.5px; line-height: 1.6; } /* カテゴリ名が伸びたときに中途半端な位置で折れないようにする */ .u-foot__list.-two a{ word-break: keep-all; overflow-wrap: anywhere; } @media (min-width: 600px){ /* カテゴリは8件あるので2列に割る */ .u-foot__list.-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } } .u-foot__cta{ display: inline-block; margin-top: 1.2em; background: var(--u-grad); color: #fff !important; font-size: 13px; font-weight: 700; line-height: 1; padding: .95em 1.4em; border-radius: 6px; transition: opacity .2s ease, transform .2s ease; } .u-foot__cta:hover{ opacity: .88; transform: translateY(-1px); color: #fff !important; } /* 最下段（SWELL標準のコピーライト行） */ .l-footer__foot{ border-top: 1px solid var(--u-foot-line); margin-top: 40px; } .l-footer__foot .copyright{ font-size: 12px; color: rgba(201,211,222,.62); padding: 22px 0; } /* フッターメニューはカテゴリ列と重複するので出さない */ .l-footer__nav{ display: none; } /* -------------------------------------------------------------------------- 16. 追尾サイドバーの停止位置 SWELLは top を「8px + --swl-fix_headerH」で決めるが、この変数はロゴを大きく する前の高さ(66px)のまま更新されず、実際の固定ヘッダー(98px)に食い込む。 変数に頼らず、実測したヘッダー高さ + 余白24px を直接指定する。 ヘッダーの高さを変えたら、この値も見直すこと。 -------------------------------------------------------------------------- */ @media (min-width: 960px){ .w-fixSide{ /* SWELLの margin-top: 2.5em(40px) が top に上乗せされるため、それを打ち消す。 margin-top は「追尾前に直前のウィジェットと空ける間隔」、 top は「追尾中にヘッダーから空ける間隔」。この2つは独立して効く。 実測: margin-top:32px / top:58px のとき 追尾中は -6px だった。 24px にするため top を +30px して 88px にしている。 */ top: 88px; margin-top: 32px; max-height: calc(100vh - 130px - 16px); } .admin-bar .w-fixSide{ top: 120px; } /* 管理バー32px分を足す */ } /* -------------------------------------------------------------------------- 17. スマートフォン最適化（〜959px） iPhone相当（幅390px）で実測したところ、1本目の記事が y=858px＝2画面分下にあった。 内訳は ヘッダー60 / 余白56 / ピックアップ428 / 余白56 / タブ183。 半分近くが「余白」と「タブの折り返し」で、写真と記事に面積が回っていなかった。 ここでその配分を組み直す。数値はすべて実測に基づく。 -------------------------------------------------------------------------- */ @media (max-width: 959px){ /* ロゴが指定の半分（20px）しか出ていなかった。 SWELLはスマホで枠 --logo_size_sp(=40px) の内側の .c-headLogo__link に さらに上下10pxを置くため、画像に20pxしか残らない（2026-09-15 実測）。 枠とヘッダー高(60px)は動かさず、内側の余白だけ詰めてロゴを32pxにする。 */ .-img .c-headLogo__link{ padding-top: 4px; padding-bottom: 4px; } /* ロゴ枠(40px)がそのままヘッダー高になるため、上下に余白を戻して56pxにする。 ロゴ自体は32pxのまま（枠の内側の余白は上で4pxに詰めてある） */ .l-header__logo{ padding-top: 8px; padding-bottom: 8px; } .u-mediaName{ font-size: 15px; } /* 32pxのロゴと釣り合う大きさ。13pxでは負ける */ /* ヘッダー直下。SWELLの .top #content{padding-top:4em}(=56px) が効いている。 トップはパンくずが入らないので、ここは純粋な空白にしかならない */ .home #content{ padding-top: 22px; } /* --- ピックアップ --- */ .u-pickup{ margin-bottom: 0; } /* 下の余白は .p-homeContent 側で一本化する */ .u-pickup__grid{ gap: 10px; } .u-pickup__col{ gap: 10px; } .u-pickup__card.-main .u-pickup__body{ padding: 13px 15px 15px; } .u-pickup__card.-main .u-pickup__ttl{ font-size: 1.08em; line-height: 1.5; } /* サブ：PCは文字だけの白箱でよいが、スマホでは ①写真が無く情報量が乏しい ②高さを揃えるため短いタイトルのカードに空白が残る の2点が出る。サムネイル付きの横型にして、高さは内容なりにする */ .u-pickup__col.-subCol{ grid-auto-rows: auto; } .u-pickup__card.-sub{ overflow: hidden; } /* サムネの角を親の角丸で切る */ .u-pickup__card.-sub .u-pickup__link{ display: flex; align-items: stretch; height: auto; } .u-pickup__card.-sub .u-pickup__thumb{ position: relative; flex: 0 0 104px; align-self: stretch; overflow: hidden; background: var(--u-bg2); } .u-pickup__card.-sub .u-pickup__img{ width: 100%; height: 100%; object-fit: cover; display: block; } .u-pickup__card.-sub .u-pickup__body{ flex: 1 1 auto; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; } .u-pickup__card.-sub .u-pickup__cat{ margin-bottom: .45em; } .u-pickup__card.-sub .u-pickup__ttl{ font-size: .9em; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .u-pickup__card:hover{ transform: none; } /* 指で触れて浮くのは邪魔なだけ */ /* ピックアップとタブの間 */ .home .p-homeContent{ margin-top: 26px !important; } /* SWELLの .u-mt-40 が !important のため */ /* --- カテゴリタブ --- 9件を折り返すと5行=183pxを占め、記事が画面外へ押し出される。 1行の横スクロールにする。右端で次のピルが切れて見えるのが、そのまま 「横に続いている」という合図になるので、矢印やフェードは足さない */ .p-postListTab > .c-tabList{ --the-tab-flex_wrap: nowrap; --the-tab-item-margin: 0 6px 0 0; --the-tab-btn-padding: .95em 1.15em; /* 実測 約40px。ピルの行高が1.0なので em を大きめに取る */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } .p-postListTab > .c-tabList::-webkit-scrollbar{ display: none; } .p-postListTab .c-tabList__item{ scroll-snap-align: start; } .p-postListTab .c-tabList__button{ white-space: nowrap; } } /* PCはモック P-01 どおり、サブは文字だけの白ボックスに戻す。 サムネイルのマークアップは出しているが、ここで隠す（表示されないので読み込まれない） */ @media (min-width: 960px){ .u-pickup__card.-sub .u-pickup__thumb{ display: none; } } /* -------------------------------------------------------------------------- 18. 404ページ（要件 P-14「案内文 / 検索窓 / 人気記事 / トップへ」＋汎用CTA） 中身は functions.php の get_search_form フィルタで差し込んでいる。 [utage_popular] はサイドバー用のリスト型なので、サムネイルの幅が 親要素の36%＝868px幅では312pxまで伸びてしまう（実測）。 本文カラムに置いても成立するように、サムネ幅を固定して縦の空きを詰める。 -------------------------------------------------------------------------- */ .u-404{ margin-top: 2.6em; } .u-404__popular{ margin-bottom: 2.4em; } .u-404__popular .p-postList__item{ margin-bottom: 1em; } .u-404__popular .p-postList__link{ align-items: center; gap: 16px; } .u-404__popular .p-postList__thumb{ flex: 0 0 auto; width: clamp(96px, 22vw, 160px); /* スマホ96px / PC160px。%指定だと横に伸び切る */ } .u-404__popular .p-postList__body{ flex: 1 1 0; min-width: 0; width: auto; /* SWELL既定の width:60% のままだと、余った幅の分だけ サムネと本文が187px離れる（実測）。基準を0にしないと、 長いタイトルの記事だけ本文がサムネの下へ落ちる（10/6 実測） */ } .u-404__cta{ text-align: center; } .u-404__cta .u-cta__t{ margin-bottom: .4em; } .u-404__cta p{ margin-bottom: 1.1em; } /* -------------------------------------------------------------------------- 19. 記事の書式（要件「見出しデザイン: H2=下線(メインカラー)、H3=左ボーダー」） H3の左ボーダーはSWELLの設定（見出し3のデザイン = 左に縦線）で足りる。 H2は SWELL に「下線」の選択肢が無い（帯・塗り潰し・左線・付箋・ステッチ・ ふきだし・上下線・1文字目のみ）。そのため見出し2のデザインは「装飾なし」にして、 下線はここで作る。SWELLがH3で使っている「2色の下線」と同じ語彙に揃える。 -------------------------------------------------------------------------- */ .post_content h2{ position: relative; border-bottom: 2px solid var(--u-line); padding-bottom: .45em; } /* 下線の左側だけブランド色。線なので文字コントラストの制約は受けない */ .post_content h2::after{ content: ""; position: absolute; left: 0; bottom: -2px; width: 4em; height: 2px; background: var(--u-grad); } /* 本文ブロックを記事カラムの左端に揃える（2026-09-17） SWELLは記事本文に左右余白を持たせ（--swl-pad_post_content、PC16px）、 H2 だけ --swl-h2-margin--x（PC -16px / SP -2vw）でその分を外へ戻している。 塗りつぶしの見出しなら「見出しだけ幅いっぱい」で成立するが、 本サイトのH2は下線タイプなので、見た目には本文が16px内側にずれるだけになる （実測 PC：カラムとタイトルとH2が48px、本文の段落だけ64px）。 スマホは逆に本文の余白が0なのでH2だけ8pxはみ出していた。 余白と打ち消しの両方を0にして、タイトル・H2・本文・図をすべて同じ左端に置く。 padding を直接書くと .l-mainContent__inner > .post_content（詳細度0,2,0）に負けるため、 SWELLが用意している変数の側を0にする。 */ .post_content{ --swl-pad_post_content: 0px; --swl-h2-margin--x: 0px; } /* 自前のブロックに、SWELLのリスト用パディングが入るのを打ち消す（2026-09-17） SWELLは .post_content ol, .post_content ul（詳細度0,1,1）に --swl-list-padding--left を入れている。ファネル図も結果サマリも中身は
    /