/* ========================================================= honne-jiten.css --------------------------------------------------------- "本音辞典" (custom post type: honne_phrase) 専用デザイン。 読み込み条件: inc/enqueue.php の nt_enqueue_honne_jiten_assets() で、以下のいずれかを満たすページだけで enqueue: - is_singular('honne_phrase') - is_post_type_archive('honne_phrase') - is_tax( array('honne_intent','honne_scene','honne_tone') ) honne_phrase post type が登録されていないサイトでは条件が 常に false になるため、配布テーマとしての副作用は無い。 全セレクタを .single-honne_phrase / .post-type-archive-honne_phrase / .tax-honne_* にスコープし、Home / Products / Services / Contact や通常 post への漏れを物理的に防ぐ。 ========================================================= */ /* ========================================================= 0. テーマカラー: 本音辞典はピンク系で展開 --------------------------------------------------------- Neutrope Biz 全体は青系 (--nt-color-primary = #2563eb) だが、 本音辞典は別コンテンツとしてやわらかいピンク基調にする。 親テーマ / 子テーマの既存ルールは `var(--nt-color-primary)` を 多く参照しているため、本音辞典 body スコープに限って --nt-color-primary を pink に上書きするだけで、ボタン / チップ / pagination / 見出しアクセント / 本文リンク / カウンタ など多くが自動的にピンクに切り替わる。 theme.json 由来の `--wp--preset--color--primary` も同様に 上書きすることで、core が出力する body リンク (`a:where(:not( .wp-element-button)) { color: var(--wp--preset--color--primary) }`) が青く残るのを防ぐ。 ヘッダー / フッターは Neutrope Biz 共通の DOM スコープ外に あるため影響しない (= ロゴまわりは無変更)。 配色: primary #e85d8f メインのピンク (チップ / ボタン / current) primary-dark #c93f73 hover やアクセント強調用 soft #fff7fa 淡いピンク背景 (alt セクション系) softer #fffafb さらに淡い背景 border #f4c7d8 淡いピンクの枠線 accent-text #b73568 文字向けの濃いピンク ========================================================= */ .post-type-archive-honne_phrase, .single-honne_phrase, .tax-honne_intent, .tax-honne_scene, .tax-honne_tone { --honne-color-primary: #e85d8f; --honne-color-primary-dark: #c93f73; --honne-color-primary-soft: #fff7fa; --honne-color-primary-softer: #fffafb; --honne-color-border: #f4c7d8; --honne-color-accent-text: #b73568; /* 既存ルールが参照する 2 つの primary token を本音辞典スコープ だけ pink に差し替え。子要素はすべて inherit で pink を受け取る。 */ --nt-color-primary: var(--honne-color-primary); --wp--preset--color--primary: var(--honne-color-primary); } /* ========================================================= 0.5 ピンクテーマの「見える」直接適用 --------------------------------------------------------- 前段 (セクション 0) で --nt-color-primary を pink に上書きして いるが、本音辞典で目立つ大型要素は「画像ボタン」「画像」「白 背景カード」「グレー本文」が中心で、変数経由のピンク化だけ では視覚的なテーマ転換が伝わりにくかった。 ここでは「ピンクに見せたい主要素」に直接スコープ付きで色を 塗り、本音辞典 = 別コンテンツ感が一目で伝わる強度を出す。 ========================================================= */ /* --- Hero / archive header --- */ .post-type-archive-honne_phrase .nt-page-hero, .single-honne_phrase .nt-page-hero, .tax-honne_intent .nt-page-hero, .tax-honne_scene .nt-page-hero, .tax-honne_tone .nt-page-hero { background: linear-gradient(180deg, #fff7fa 0%, #fffafb 100%); } .post-type-archive-honne_phrase .nt-page-hero__lead, .single-honne_phrase .nt-page-hero__lead, .tax-honne_intent .nt-page-hero__lead, .tax-honne_scene .nt-page-hero__lead, .tax-honne_tone .nt-page-hero__lead { color: var(--nt-color-text); } /* --- Eyebrow ラベル (本音から探す / 場面から探す / 等) --- 親テーマ .nt-eyebrow / .nt-hero__eyebrow は color: var(--nt-color-primary) 経由で pink になるが、明示色も併用してキャッシュやテーマ プリセット変更の影響に耐えるようにする。 */ .post-type-archive-honne_phrase .nt-eyebrow, .single-honne_phrase .nt-eyebrow, .tax-honne_intent .nt-eyebrow, .tax-honne_scene .nt-eyebrow, .tax-honne_tone .nt-eyebrow, .post-type-archive-honne_phrase .nt-hero__eyebrow, .single-honne_phrase .nt-hero__eyebrow, .tax-honne_intent .nt-hero__eyebrow, .tax-honne_scene .nt-hero__eyebrow, .tax-honne_tone .nt-hero__eyebrow { color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .nt-hero__eyebrow, .single-honne_phrase .nt-hero__eyebrow, .tax-honne_intent .nt-hero__eyebrow, .tax-honne_scene .nt-hero__eyebrow, .tax-honne_tone .nt-hero__eyebrow { background: color-mix(in srgb, var(--honne-color-primary) 8%, #fff); border-color: var(--honne-color-border); } /* --- archive-honne_phrase.php のセクション背景 (--alt) を 淡いピンクに。intent/scene/tone セレクト欄、トーン欄、 PHILOSOPHY 欄、CTA 外側など、本音辞典トップで広く露出する 帯領域すべてを pink テーマに馴染ませる。 --- */ .post-type-archive-honne_phrase .nt-section--alt { background: var(--honne-color-primary-soft); } /* --- Card 全体 (archive grid / 単一ページ末尾の関連カード) --- */ .post-type-archive-honne_phrase .nt-card, .tax-honne_intent .nt-card, .tax-honne_scene .nt-card, .tax-honne_tone .nt-card, .single-honne_phrase .nt-card { border-color: var(--honne-color-border); } .post-type-archive-honne_phrase .nt-card:hover, .tax-honne_intent .nt-card:hover, .tax-honne_scene .nt-card:hover, .tax-honne_tone .nt-card:hover, .single-honne_phrase .nt-card:hover { border-color: var(--honne-color-primary); } /* --- 気持ちチップ (.honne-card__intent) を明示的にピンク --- */ .post-type-archive-honne_phrase .honne-card__intent, .tax-honne_intent .honne-card__intent, .tax-honne_scene .honne-card__intent, .tax-honne_tone .honne-card__intent, .single-honne_phrase .honne-card__intent { background: var(--honne-color-primary-soft); border-color: var(--honne-color-border); color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .honne-card__intent:hover, .post-type-archive-honne_phrase .honne-card__intent:focus-visible, .tax-honne_intent .honne-card__intent:hover, .tax-honne_intent .honne-card__intent:focus-visible, .tax-honne_scene .honne-card__intent:hover, .tax-honne_scene .honne-card__intent:focus-visible, .tax-honne_tone .honne-card__intent:hover, .tax-honne_tone .honne-card__intent:focus-visible, .single-honne_phrase .honne-card__intent:hover, .single-honne_phrase .honne-card__intent:focus-visible { background: #ffeaf2; border-color: var(--honne-color-primary); color: var(--honne-color-primary-dark); } /* --- ページネーション (前 commit faa54e6 の構造を維持しつつ色だけ pink に) --- */ .post-type-archive-honne_phrase .nt-pagination a.page-numbers, .post-type-archive-honne_phrase .nt-pagination span.page-numbers, .tax-honne_intent .nt-pagination a.page-numbers, .tax-honne_intent .nt-pagination span.page-numbers, .tax-honne_scene .nt-pagination a.page-numbers, .tax-honne_scene .nt-pagination span.page-numbers, .tax-honne_tone .nt-pagination a.page-numbers, .tax-honne_tone .nt-pagination span.page-numbers { border-color: var(--honne-color-border); color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .nt-pagination a.page-numbers:hover, .post-type-archive-honne_phrase .nt-pagination a.page-numbers:focus-visible, .tax-honne_intent .nt-pagination a.page-numbers:hover, .tax-honne_intent .nt-pagination a.page-numbers:focus-visible, .tax-honne_scene .nt-pagination a.page-numbers:hover, .tax-honne_scene .nt-pagination a.page-numbers:focus-visible, .tax-honne_tone .nt-pagination a.page-numbers:hover, .tax-honne_tone .nt-pagination a.page-numbers:focus-visible { background: var(--honne-color-primary-soft); border-color: var(--honne-color-primary); color: var(--honne-color-primary-dark); } .post-type-archive-honne_phrase .nt-pagination span.page-numbers.current, .tax-honne_intent .nt-pagination span.page-numbers.current, .tax-honne_scene .nt-pagination span.page-numbers.current, .tax-honne_tone .nt-pagination span.page-numbers.current { background: var(--honne-color-primary); border-color: var(--honne-color-primary); color: #fff; } /* --- ボタン全般 (.nt-btn / .wp-block-button__link) --- 親テーマ + WP core が背景に #2563eb や #32373c を直接当てる ところもあるので、本音辞典スコープでは pink で塗り直す。 .nt-btn--image は画像 button のホスト要素で、background は 親 CSS で var(--nt-color-bg) になっているので別途扱う。 */ .post-type-archive-honne_phrase .nt-btn:not(.nt-btn--image), .single-honne_phrase .nt-btn:not(.nt-btn--image), .tax-honne_intent .nt-btn:not(.nt-btn--image), .tax-honne_scene .nt-btn:not(.nt-btn--image), .tax-honne_tone .nt-btn:not(.nt-btn--image), .post-type-archive-honne_phrase .wp-block-button__link, .single-honne_phrase .wp-block-button__link, .tax-honne_intent .wp-block-button__link, .tax-honne_scene .wp-block-button__link, .tax-honne_tone .wp-block-button__link { background: var(--honne-color-primary); border-color: var(--honne-color-primary); color: #fff; } .post-type-archive-honne_phrase .nt-btn:not(.nt-btn--image):hover, .post-type-archive-honne_phrase .nt-btn:not(.nt-btn--image):focus-visible, .single-honne_phrase .nt-btn:not(.nt-btn--image):hover, .single-honne_phrase .nt-btn:not(.nt-btn--image):focus-visible, .tax-honne_intent .nt-btn:not(.nt-btn--image):hover, .tax-honne_intent .nt-btn:not(.nt-btn--image):focus-visible, .tax-honne_scene .nt-btn:not(.nt-btn--image):hover, .tax-honne_scene .nt-btn:not(.nt-btn--image):focus-visible, .tax-honne_tone .nt-btn:not(.nt-btn--image):hover, .tax-honne_tone .nt-btn:not(.nt-btn--image):focus-visible, .post-type-archive-honne_phrase .wp-block-button__link:hover, .post-type-archive-honne_phrase .wp-block-button__link:focus-visible, .single-honne_phrase .wp-block-button__link:hover, .single-honne_phrase .wp-block-button__link:focus-visible, .tax-honne_intent .wp-block-button__link:hover, .tax-honne_intent .wp-block-button__link:focus-visible, .tax-honne_scene .wp-block-button__link:hover, .tax-honne_scene .wp-block-button__link:focus-visible, .tax-honne_tone .wp-block-button__link:hover, .tax-honne_tone .wp-block-button__link:focus-visible { background: var(--honne-color-primary-dark); border-color: var(--honne-color-primary-dark); color: #fff; } /* --- nt-btn--ghost (border のみのボタン) を pink に --- */ .post-type-archive-honne_phrase .nt-btn--ghost, .single-honne_phrase .nt-btn--ghost, .tax-honne_intent .nt-btn--ghost, .tax-honne_scene .nt-btn--ghost, .tax-honne_tone .nt-btn--ghost { background: #fff; border-color: var(--honne-color-border); color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .nt-btn--ghost:hover, .single-honne_phrase .nt-btn--ghost:hover, .tax-honne_intent .nt-btn--ghost:hover, .tax-honne_scene .nt-btn--ghost:hover, .tax-honne_tone .nt-btn--ghost:hover { background: var(--honne-color-primary-soft); border-color: var(--honne-color-primary); color: var(--honne-color-primary-dark); } /* --- 画像ボタン (.nt-btn--image) は画像本体は触らず、外側カード の border / shadow / background のみ淡ピンク寄りに --- */ .post-type-archive-honne_phrase #honne-intent .nt-btn--image, .post-type-archive-honne_phrase #honne-scene .nt-btn--image, .post-type-archive-honne_phrase #honne-tone .nt-btn--image { border: 1px solid var(--honne-color-border); } /* --- 本文中リンク (`a:not(.wp-element-button)`) --- theme.json 由来の link 色は --wp--preset--color--primary。 セクション 0 で本音辞典 body スコープで pink に上書きしている が、ここで明示色も併用しておくことで、もし他の rule で青に 戻されても本音辞典では pink を維持できる。 */ .single-honne_phrase .nt-article-content a:not(.wp-element-button):not(.nt-btn), .post-type-archive-honne_phrase .nt-article-content a:not(.wp-element-button):not(.nt-btn), .tax-honne_intent .nt-article-content a:not(.wp-element-button):not(.nt-btn), .tax-honne_scene .nt-article-content a:not(.wp-element-button):not(.nt-btn), .tax-honne_tone .nt-article-content a:not(.wp-element-button):not(.nt-btn) { color: var(--honne-color-accent-text); } .single-honne_phrase .nt-article-content a:not(.wp-element-button):not(.nt-btn):hover, .post-type-archive-honne_phrase .nt-article-content a:not(.wp-element-button):not(.nt-btn):hover, .tax-honne_intent .nt-article-content a:not(.wp-element-button):not(.nt-btn):hover, .tax-honne_scene .nt-article-content a:not(.wp-element-button):not(.nt-btn):hover, .tax-honne_tone .nt-article-content a:not(.wp-element-button):not(.nt-btn):hover { color: var(--honne-color-primary-dark); } /* --- 単一記事の H2 番号 / リストマーカーを明示的に pink --- */ .single-honne_phrase .nt-article-content > h2::before, .single-honne_phrase .nt-article-content > ul > li::before { color: var(--honne-color-primary); } /* ========================================================= 0.7 残留の青を一掃 (ユーザー報告ベース直接上書き) --------------------------------------------------------- 1. タクソノミータグ (.nt-post-meta__category / .nt-card__category / .nt-post-meta a) を pink リテラル指定で確実に塗る 2. 記事内本文リンク (.nt-main 配下の ) を pink に 3. 親テーマ .nt-section--alt の --nt-color-surface (#f8fafc) 由来の 青っぽい背景を pink soft (#fff7fa) に。子テーマ .nbc-section-bg-* が万一混入しても pink に倒す 4. フッター上の .nt-cta (archive-honne_phrase.php セクション 8、 親テーマ既定で dark navy #0f172a 背景) を pink グラデに置換、 内部 text / button も pink テーマで読めるように ========================================================= */ /* ---- 1. タクソノミータグ / メタチップ ---- */ .post-type-archive-honne_phrase .nt-post-meta a, .single-honne_phrase .nt-post-meta a, .tax-honne_intent .nt-post-meta a, .tax-honne_scene .nt-post-meta a, .tax-honne_tone .nt-post-meta a, .post-type-archive-honne_phrase .nt-post-meta__category, .single-honne_phrase .nt-post-meta__category, .tax-honne_intent .nt-post-meta__category, .tax-honne_scene .nt-post-meta__category, .tax-honne_tone .nt-post-meta__category, .post-type-archive-honne_phrase .nt-post-meta__label, .single-honne_phrase .nt-post-meta__label, .tax-honne_intent .nt-post-meta__label, .tax-honne_scene .nt-post-meta__label, .tax-honne_tone .nt-post-meta__label, .post-type-archive-honne_phrase .nt-card__category, .single-honne_phrase .nt-card__category, .tax-honne_intent .nt-card__category, .tax-honne_scene .nt-card__category, .tax-honne_tone .nt-card__category, .post-type-archive-honne_phrase .wp-block-post-terms a, .single-honne_phrase .wp-block-post-terms a, .tax-honne_intent .wp-block-post-terms a, .tax-honne_scene .wp-block-post-terms a, .tax-honne_tone .wp-block-post-terms a { background: var(--honne-color-primary-soft); border-color: var(--honne-color-border); color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .nt-post-meta a:hover, .post-type-archive-honne_phrase .nt-post-meta a:focus-visible, .single-honne_phrase .nt-post-meta a:hover, .single-honne_phrase .nt-post-meta a:focus-visible, .tax-honne_intent .nt-post-meta a:hover, .tax-honne_intent .nt-post-meta a:focus-visible, .tax-honne_scene .nt-post-meta a:hover, .tax-honne_scene .nt-post-meta a:focus-visible, .tax-honne_tone .nt-post-meta a:hover, .tax-honne_tone .nt-post-meta a:focus-visible, .post-type-archive-honne_phrase .wp-block-post-terms a:hover, .single-honne_phrase .wp-block-post-terms a:hover, .tax-honne_intent .wp-block-post-terms a:hover, .tax-honne_scene .wp-block-post-terms a:hover, .tax-honne_tone .wp-block-post-terms a:hover { background: #ffeaf2; border-color: var(--honne-color-primary); color: var(--honne-color-primary-dark); text-decoration: none; } /* ---- 2. 本文リンクを
スコープで pink に ---- theme.json 由来の a:where(:not(.wp-element-button)) は specificity 0,0,1 なので、ここの (0, 5, 1) 相当で確実に勝つ。 chill peek banner / chip / pagination / ボタン等は :not() で除外。 */ .post-type-archive-honne_phrase .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek), .single-honne_phrase .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek), .tax-honne_intent .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek), .tax-honne_scene .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek), .tax-honne_tone .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek) { color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek):hover, .single-honne_phrase .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek):hover, .tax-honne_intent .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek):hover, .tax-honne_scene .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek):hover, .tax-honne_tone .nt-main a:not(.wp-element-button):not(.nt-btn):not(.honne-card__intent):not(.page-numbers):not(.nbc-chill-peek):hover { color: var(--honne-color-primary-dark); } /* ---- 3. 青っぽい背景 (#f8fafc / #f8fbff) を本音辞典内で pink soft に ・ .nt-section--alt は親テーマ既定で --nt-color-surface = #f8fafc 背景 ・ .nbc-section-bg-soft / .nbc-section-bg-blue は biz-overrides.css の ユーティリティ。honne-jiten ページでは通常使われないが、混入時の 防御策として pink にフォールバック ---- */ .post-type-archive-honne_phrase .nt-section--alt, .single-honne_phrase .nt-section--alt, .tax-honne_intent .nt-section--alt, .tax-honne_scene .nt-section--alt, .tax-honne_tone .nt-section--alt, .post-type-archive-honne_phrase .nbc-section-bg-soft, .single-honne_phrase .nbc-section-bg-soft, .tax-honne_intent .nbc-section-bg-soft, .tax-honne_scene .nbc-section-bg-soft, .tax-honne_tone .nbc-section-bg-soft, .post-type-archive-honne_phrase .nbc-section-bg-blue, .single-honne_phrase .nbc-section-bg-blue, .tax-honne_intent .nbc-section-bg-blue, .tax-honne_scene .nbc-section-bg-blue, .tax-honne_tone .nbc-section-bg-blue { background: var(--honne-color-primary-soft); } /* body ベース背景もさらに淡く pink に倒す (Neutrope Biz 全体には影響しない よう、本音辞典 body class でだけ宣言) */ .post-type-archive-honne_phrase, .single-honne_phrase, .tax-honne_intent, .tax-honne_scene, .tax-honne_tone { background: var(--honne-color-primary-softer); } /* ---- 4. フッター上の .nt-cta (dark navy 帯) を pink グラデに ---- archive-honne_phrase.php 末尾の
は親テーマ 既定で var(--nt-bg-cta) = var(--nt-color-secondary) = #0f172a を 背景に塗っている。本音辞典内ではこの青ブロックを pink グラデに 置き換え、内部 text と button も pink テーマで再構成する。 */ .post-type-archive-honne_phrase .nt-cta, .single-honne_phrase .nt-cta, .tax-honne_intent .nt-cta, .tax-honne_scene .nt-cta, .tax-honne_tone .nt-cta { background: linear-gradient(135deg, var(--honne-color-primary) 0%, var(--honne-color-primary-dark) 100%); color: #fff; } /* CTA 内部の text 系を白に揃える */ .post-type-archive-honne_phrase .nt-cta .nt-eyebrow, .post-type-archive-honne_phrase .nt-cta .nt-cta__title, .post-type-archive-honne_phrase .nt-cta .nt-cta__lead, .single-honne_phrase .nt-cta .nt-eyebrow, .single-honne_phrase .nt-cta .nt-cta__title, .single-honne_phrase .nt-cta .nt-cta__lead, .tax-honne_intent .nt-cta .nt-eyebrow, .tax-honne_intent .nt-cta .nt-cta__title, .tax-honne_intent .nt-cta .nt-cta__lead, .tax-honne_scene .nt-cta .nt-eyebrow, .tax-honne_scene .nt-cta .nt-cta__title, .tax-honne_scene .nt-cta .nt-cta__lead, .tax-honne_tone .nt-cta .nt-eyebrow, .tax-honne_tone .nt-cta .nt-cta__title, .tax-honne_tone .nt-cta .nt-cta__lead { color: #fff; background: transparent; border: 0; } /* CTA 内ボタン (filled / outline 共に) を 白 bg + pink 文字 に反転 --- 親 04-components.css の .nt-cta .nt-btn--primary や .nt-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link は var(--nt-color-primary) bg を出力するが、ここでは pink グラデの 上で読みやすくするため白基調に切り替える。 */ .post-type-archive-honne_phrase .nt-cta .nt-btn, .post-type-archive-honne_phrase .nt-cta .wp-block-button__link, .single-honne_phrase .nt-cta .nt-btn, .single-honne_phrase .nt-cta .wp-block-button__link, .tax-honne_intent .nt-cta .nt-btn, .tax-honne_intent .nt-cta .wp-block-button__link, .tax-honne_scene .nt-cta .nt-btn, .tax-honne_scene .nt-cta .wp-block-button__link, .tax-honne_tone .nt-cta .nt-btn, .tax-honne_tone .nt-cta .wp-block-button__link { background: #fff; border-color: #fff; color: var(--honne-color-accent-text); } .post-type-archive-honne_phrase .nt-cta .nt-btn:hover, .post-type-archive-honne_phrase .nt-cta .wp-block-button__link:hover, .single-honne_phrase .nt-cta .nt-btn:hover, .single-honne_phrase .nt-cta .wp-block-button__link:hover, .tax-honne_intent .nt-cta .nt-btn:hover, .tax-honne_intent .nt-cta .wp-block-button__link:hover, .tax-honne_scene .nt-cta .nt-btn:hover, .tax-honne_scene .nt-cta .wp-block-button__link:hover, .tax-honne_tone .nt-cta .nt-btn:hover, .tax-honne_tone .nt-cta .wp-block-button__link:hover { background: var(--honne-color-primary-soft); border-color: var(--honne-color-primary-soft); color: var(--honne-color-primary-dark); } /* ========================================================= 0.8 温かみのある pink トーンに微調整 (ユーザー残対応 5 点) --------------------------------------------------------- 1. 単一記事 H2 番号「01」「02」(CSS counter ::before) の色を literal hex で確実に rose 系 (#d95784) に 2. 単一記事 header / footer の .nt-post-meta__category / .nt-card__category チップを literal hex で淡 pink に (var 経由でなく直接指定、cache や cascade に依らず確実) 3. /honne-jiten/ や taxonomy archive のカードチップも同色に統一 4. hero グラデーションから青みを除去、warm cream + 淡 pink へ 5. フッター上 .nt-cta を濃いベタ pink から品のあるローズ グラデに変更 (#e8739c → #c44d78) ========================================================= */ /* ---- 1. 単一記事 H2 番号「01」を rose に ---- 既存セクション 3 で var(--nt-color-primary) を当てているが、 literal hex で再宣言して cache / cascade 影響を排除。 */ .single-honne_phrase .nt-article-content > h2::before { color: #d95784; } .single-honne_phrase .nt-article-content > ul > li::before { color: #d95784; } /* ---- 2 + 3. タクソノミーチップ統一 (single header / footer + archive カード) ---- セクション 2 と 0.7 で同要素を扱っているが、ここでは literal hex を使い、最終的な見た目を確実に warm pink に固定する。 */ .post-type-archive-honne_phrase .nt-post-meta a, .single-honne_phrase .nt-post-meta a, .tax-honne_intent .nt-post-meta a, .tax-honne_scene .nt-post-meta a, .tax-honne_tone .nt-post-meta a, .post-type-archive-honne_phrase .nt-post-meta__category, .single-honne_phrase .nt-post-meta__category, .tax-honne_intent .nt-post-meta__category, .tax-honne_scene .nt-post-meta__category, .tax-honne_tone .nt-post-meta__category, .post-type-archive-honne_phrase .nt-post-meta__label, .single-honne_phrase .nt-post-meta__label, .tax-honne_intent .nt-post-meta__label, .tax-honne_scene .nt-post-meta__label, .tax-honne_tone .nt-post-meta__label, .post-type-archive-honne_phrase .nt-card__category, .single-honne_phrase .nt-card__category, .tax-honne_intent .nt-card__category, .tax-honne_scene .nt-card__category, .tax-honne_tone .nt-card__category, .post-type-archive-honne_phrase .wp-block-post-terms a, .single-honne_phrase .wp-block-post-terms a, .tax-honne_intent .wp-block-post-terms a, .tax-honne_scene .wp-block-post-terms a, .tax-honne_tone .wp-block-post-terms a, .post-type-archive-honne_phrase .honne-card__intent, .single-honne_phrase .honne-card__intent, .tax-honne_intent .honne-card__intent, .tax-honne_scene .honne-card__intent, .tax-honne_tone .honne-card__intent { background: #fff6f8; border-color: #f3c6d5; color: #a83a63; } .post-type-archive-honne_phrase .nt-post-meta a:hover, .post-type-archive-honne_phrase .nt-post-meta a:focus-visible, .single-honne_phrase .nt-post-meta a:hover, .single-honne_phrase .nt-post-meta a:focus-visible, .tax-honne_intent .nt-post-meta a:hover, .tax-honne_intent .nt-post-meta a:focus-visible, .tax-honne_scene .nt-post-meta a:hover, .tax-honne_scene .nt-post-meta a:focus-visible, .tax-honne_tone .nt-post-meta a:hover, .tax-honne_tone .nt-post-meta a:focus-visible, .post-type-archive-honne_phrase .nt-card__category:hover, .single-honne_phrase .nt-card__category:hover, .tax-honne_intent .nt-card__category:hover, .tax-honne_scene .nt-card__category:hover, .tax-honne_tone .nt-card__category:hover, .post-type-archive-honne_phrase .wp-block-post-terms a:hover, .single-honne_phrase .wp-block-post-terms a:hover, .tax-honne_intent .wp-block-post-terms a:hover, .tax-honne_scene .wp-block-post-terms a:hover, .tax-honne_tone .wp-block-post-terms a:hover, .post-type-archive-honne_phrase .honne-card__intent:hover, .post-type-archive-honne_phrase .honne-card__intent:focus-visible, .single-honne_phrase .honne-card__intent:hover, .single-honne_phrase .honne-card__intent:focus-visible, .tax-honne_intent .honne-card__intent:hover, .tax-honne_intent .honne-card__intent:focus-visible, .tax-honne_scene .honne-card__intent:hover, .tax-honne_scene .honne-card__intent:focus-visible, .tax-honne_tone .honne-card__intent:hover, .tax-honne_tone .honne-card__intent:focus-visible { background: #ffe8f0; border-color: #e85d8f; color: #b83d68; text-decoration: none; } /* ---- 4. hero 背景を warm cream → 淡 pink グラデに ---- 青み (#fff7fa は青系 pink) を除去、cream (#fffaf5) を起点に。 微弱な radial overlay で奥行きを少し出す。 */ .post-type-archive-honne_phrase .nt-page-hero, .single-honne_phrase .nt-page-hero, .tax-honne_intent .nt-page-hero, .tax-honne_scene .nt-page-hero, .tax-honne_tone .nt-page-hero { background: radial-gradient(circle at 18% 18%, rgba(255, 226, 236, 0.78) 0%, rgba(255, 226, 236, 0) 34%), linear-gradient(180deg, #fffaf5 0%, #fff2f6 55%, #fff7fa 100%); } /* ---- 5. フッター上 CTA を品のあるローズグラデに ---- 従来の濃いベタ pink (#e85d8f → #c93f73) を、もう少しトーンを 抑えた #e8739c → #c44d78 に。微弱な白の radial overlay で ハイライト感を出し「青の時のような落ち着き」を再現。 */ .post-type-archive-honne_phrase .nt-cta, .single-honne_phrase .nt-cta, .tax-honne_intent .nt-cta, .tax-honne_scene .nt-cta, .tax-honne_tone .nt-cta { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 35%), linear-gradient(135deg, #e8739c 0%, #c44d78 100%); color: #fff; border-color: rgba(255, 255, 255, 0.24); } /* CTA 内ボタン: 白背景 + accent rose 文字。文字色は CTA 背景に pop しすぎないよう #a83a63 (落ち着いた rose)。 */ .post-type-archive-honne_phrase .nt-cta .nt-btn, .post-type-archive-honne_phrase .nt-cta .wp-block-button__link, .single-honne_phrase .nt-cta .nt-btn, .single-honne_phrase .nt-cta .wp-block-button__link, .tax-honne_intent .nt-cta .nt-btn, .tax-honne_intent .nt-cta .wp-block-button__link, .tax-honne_scene .nt-cta .nt-btn, .tax-honne_scene .nt-cta .wp-block-button__link, .tax-honne_tone .nt-cta .nt-btn, .tax-honne_tone .nt-cta .wp-block-button__link { background: #fff; border-color: #fff; color: #a83a63; } .post-type-archive-honne_phrase .nt-cta .nt-btn:hover, .post-type-archive-honne_phrase .nt-cta .wp-block-button__link:hover, .single-honne_phrase .nt-cta .nt-btn:hover, .single-honne_phrase .nt-cta .wp-block-button__link:hover, .tax-honne_intent .nt-cta .nt-btn:hover, .tax-honne_intent .nt-cta .wp-block-button__link:hover, .tax-honne_scene .nt-cta .nt-btn:hover, .tax-honne_scene .nt-cta .wp-block-button__link:hover, .tax-honne_tone .nt-cta .nt-btn:hover, .tax-honne_tone .nt-cta .wp-block-button__link:hover { background: #fff7fa; border-color: #fff7fa; color: #b83d68; } /* ========================================================= 0.9 最終調整: カード見出しを黒に戻す + 残留 blue を確定上書き + CTA を一段やわらかく --------------------------------------------------------- セクション 0.7 で .nt-main a:not(...) を accent-text に塗った ため、archive 系の .nt-card__title もピンクに飲み込まれて しまった。本文見出しとしては可読性が落ちるので、カード タイトルだけは黒系に戻す。 また、ユーザー報告で「01 counter」「単一記事のチップ背景」が 引き続き青に見えるケースがあった。cascade / cache に左右され ないよう literal hex + !important で最終確定する。 CTA は #e8739c → #c44d78 でも彩度が高いという指摘を受け、 一段やわらかい #f29ab7 → #d86f98 に再調整。 !important は本セクションの色定義に限定し、ヒーロー / ボタン サイズ / pagination 構造 etc には不使用。 ========================================================= */ /* ---- 1. カードタイトルを黒系に戻す ---- セクション 0.7 の .nt-main a:not(...) は specificity (0, 7, 1) と高いため、対抗するには .nt-card__title a に !important が必要。 */ .post-type-archive-honne_phrase .nt-card__title, .post-type-archive-honne_phrase .nt-card__title a, .single-honne_phrase .nt-card__title, .single-honne_phrase .nt-card__title a, .tax-honne_intent .nt-card__title, .tax-honne_intent .nt-card__title a, .tax-honne_scene .nt-card__title, .tax-honne_scene .nt-card__title a, .tax-honne_tone .nt-card__title, .tax-honne_tone .nt-card__title a { color: var(--nt-color-text) !important; text-decoration: none; } .post-type-archive-honne_phrase .nt-card__title a:hover, .post-type-archive-honne_phrase .nt-card__title a:focus-visible, .single-honne_phrase .nt-card__title a:hover, .single-honne_phrase .nt-card__title a:focus-visible, .tax-honne_intent .nt-card__title a:hover, .tax-honne_intent .nt-card__title a:focus-visible, .tax-honne_scene .nt-card__title a:hover, .tax-honne_scene .nt-card__title a:focus-visible, .tax-honne_tone .nt-card__title a:hover, .tax-honne_tone .nt-card__title a:focus-visible { color: var(--nt-color-text) !important; text-decoration: underline; } /* ---- 2. 単一記事 H2「01」「02」 counter を確定で rose に ---- ユーザー報告で blue 残留があるため !important で最終固定。 */ .single-honne_phrase .nt-article-content > h2::before { color: #d95784 !important; } .single-honne_phrase .nt-article-content > ul > li::before { color: #d95784 !important; } /* ---- 3. タクソノミーチップ (single + archive + taxonomy) ---- 現状の var 経由 / literal 指定でまだ blue 残留が見えるという 報告。最終的に確実に warm pink を見せるため !important で固定。 */ .post-type-archive-honne_phrase .nt-post-meta a, .single-honne_phrase .nt-post-meta a, .tax-honne_intent .nt-post-meta a, .tax-honne_scene .nt-post-meta a, .tax-honne_tone .nt-post-meta a, .post-type-archive-honne_phrase .nt-post-meta__category, .single-honne_phrase .nt-post-meta__category, .tax-honne_intent .nt-post-meta__category, .tax-honne_scene .nt-post-meta__category, .tax-honne_tone .nt-post-meta__category, .post-type-archive-honne_phrase .nt-post-meta__label, .single-honne_phrase .nt-post-meta__label, .tax-honne_intent .nt-post-meta__label, .tax-honne_scene .nt-post-meta__label, .tax-honne_tone .nt-post-meta__label, .post-type-archive-honne_phrase .nt-card__category, .single-honne_phrase .nt-card__category, .tax-honne_intent .nt-card__category, .tax-honne_scene .nt-card__category, .tax-honne_tone .nt-card__category, .post-type-archive-honne_phrase .wp-block-post-terms a, .single-honne_phrase .wp-block-post-terms a, .tax-honne_intent .wp-block-post-terms a, .tax-honne_scene .wp-block-post-terms a, .tax-honne_tone .wp-block-post-terms a, .post-type-archive-honne_phrase .honne-card__intent, .single-honne_phrase .honne-card__intent, .tax-honne_intent .honne-card__intent, .tax-honne_scene .honne-card__intent, .tax-honne_tone .honne-card__intent { background: #fff6f8 !important; border-color: #f3c6d5 !important; color: #a83a63 !important; } .post-type-archive-honne_phrase .nt-post-meta a:hover, .post-type-archive-honne_phrase .nt-post-meta a:focus-visible, .single-honne_phrase .nt-post-meta a:hover, .single-honne_phrase .nt-post-meta a:focus-visible, .tax-honne_intent .nt-post-meta a:hover, .tax-honne_intent .nt-post-meta a:focus-visible, .tax-honne_scene .nt-post-meta a:hover, .tax-honne_scene .nt-post-meta a:focus-visible, .tax-honne_tone .nt-post-meta a:hover, .tax-honne_tone .nt-post-meta a:focus-visible, .post-type-archive-honne_phrase .nt-card__category:hover, .single-honne_phrase .nt-card__category:hover, .tax-honne_intent .nt-card__category:hover, .tax-honne_scene .nt-card__category:hover, .tax-honne_tone .nt-card__category:hover, .post-type-archive-honne_phrase .wp-block-post-terms a:hover, .single-honne_phrase .wp-block-post-terms a:hover, .tax-honne_intent .wp-block-post-terms a:hover, .tax-honne_scene .wp-block-post-terms a:hover, .tax-honne_tone .wp-block-post-terms a:hover, .post-type-archive-honne_phrase .honne-card__intent:hover, .post-type-archive-honne_phrase .honne-card__intent:focus-visible, .single-honne_phrase .honne-card__intent:hover, .single-honne_phrase .honne-card__intent:focus-visible, .tax-honne_intent .honne-card__intent:hover, .tax-honne_intent .honne-card__intent:focus-visible, .tax-honne_scene .honne-card__intent:hover, .tax-honne_scene .honne-card__intent:focus-visible, .tax-honne_tone .honne-card__intent:hover, .tax-honne_tone .honne-card__intent:focus-visible { background: #ffe8f0 !important; border-color: #e85d8f !important; color: #b83d68 !important; text-decoration: none; } /* ---- 4. フッター上 CTA を一段やわらかい rose グラデに ---- 前回 #e8739c → #c44d78 でも濃すぎという指摘。さらに彩度を 抑えた #f29ab7 → #d86f98 に再調整。白の radial overlay も 少し強めにして陰影感を出す。 */ .post-type-archive-honne_phrase .nt-cta, .single-honne_phrase .nt-cta, .tax-honne_intent .nt-cta, .tax-honne_scene .nt-cta, .tax-honne_tone .nt-cta { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 36%), linear-gradient(135deg, #f29ab7 0%, #d86f98 100%); color: #fff; border-color: rgba(255, 255, 255, 0.24); } /* ========================================================= 1. 本文 reading column を辞典向けに少し広げる --------------------------------------------------------- 既定の .nt-article は content track = --nt-container-narrow (760px)。 "辞典" は短文の項目集なので、760px だと頻繁に改行が走って索引感が 薄れる。840px までゆるく広げる。grid-template-columns を再宣言する ことで wide / full トラックの数式に新しい content 幅 (840px) を 差し込み、alignwide / alignfull の整合も保つ。 ========================================================= */ .single-honne_phrase .nt-article { grid-template-columns: [full-start] minmax(var(--nt-container-padding), 1fr) [wide-start] minmax(0, calc((var(--nt-content-wide) - 840px) / 2)) [content-start] min(calc(100% - (var(--nt-container-padding) * 2)), 840px) [content-end] minmax(0, calc((var(--nt-content-wide) - 840px) / 2)) [wide-end] minmax(var(--nt-container-padding), 1fr) [full-end]; } /* ========================================================= 2. メタタグ (scene / intent / tone) を統一チップに --------------------------------------------------------- single テンプレが scene/intent/tone を出力する際、scene には .nt-post-meta__category クラス、intent には .nt-card__category クラスが付いており、既存の theme CSS では片方が塗りつぶしブルー チップ、片方が通常リンク見え、と分裂している。 ここで .nt-post-meta 内の全タームリンクをひとつの「索引チップ」 デザインに統一する。塗り潰しではなく淡い primary 背景 + 線で、 辞典の項目ラベルらしい落ち着き。 ========================================================= */ .single-honne_phrase .nt-post-meta, .post-type-archive-honne_phrase .nt-post-meta, .tax-honne_intent .nt-post-meta, .tax-honne_scene .nt-post-meta, .tax-honne_tone .nt-post-meta { gap: 6px 6px; margin-bottom: 0.6em; } .single-honne_phrase .nt-post-meta a, .single-honne_phrase .nt-post-meta__category, .single-honne_phrase .nt-post-meta .nt-card__category, .post-type-archive-honne_phrase .nt-post-meta a, .post-type-archive-honne_phrase .nt-post-meta__category, .post-type-archive-honne_phrase .nt-card__category, .tax-honne_intent .nt-post-meta a, .tax-honne_intent .nt-post-meta__category, .tax-honne_intent .nt-card__category, .tax-honne_scene .nt-post-meta a, .tax-honne_scene .nt-post-meta__category, .tax-honne_scene .nt-card__category, .tax-honne_tone .nt-post-meta a, .tax-honne_tone .nt-post-meta__category, .tax-honne_tone .nt-card__category { display: inline-block; padding: 0.2em 0.85em; background: color-mix(in srgb, var(--nt-color-primary) 8%, var(--nt-color-bg)); color: var(--nt-color-primary); border: 1px solid color-mix(in srgb, var(--nt-color-primary) 22%, transparent); border-radius: 999px; font-size: var(--nt-fs-xs); font-weight: 600; line-height: 1.55; text-decoration: none; letter-spacing: 0.02em; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .single-honne_phrase .nt-post-meta a:hover, .single-honne_phrase .nt-post-meta a:focus-visible, .post-type-archive-honne_phrase .nt-post-meta a:hover, .post-type-archive-honne_phrase .nt-post-meta a:focus-visible, .post-type-archive-honne_phrase .nt-card__category:hover, .tax-honne_intent .nt-post-meta a:hover, .tax-honne_scene .nt-post-meta a:hover, .tax-honne_tone .nt-post-meta a:hover { background: color-mix(in srgb, var(--nt-color-primary) 16%, var(--nt-color-bg)); border-color: color-mix(in srgb, var(--nt-color-primary) 38%, transparent); color: var(--nt-color-primary); } /* ========================================================= 3. 辞典らしい H2 — 項番 + 罫線 --------------------------------------------------------- single の本文セクション (本音 / 言い換え / 注意 …) を辞書の項目 のように見せる。CSS counter で 01 / 02 / … と接頭をつけ、下に細い 罫線を引いて索引感を出す。border-bottom は --nt-color-border の 薄いラインで、Home の派手な見出しと混同しない控えめさを維持。 ========================================================= */ .single-honne_phrase .nt-article-content { counter-reset: honne-section; } .single-honne_phrase .nt-article-content > h2 { counter-increment: honne-section; display: flex; align-items: baseline; gap: 0.55em; margin-top: 2.4em; padding-bottom: 0.35em; border-bottom: 1px solid var(--nt-color-border); font-size: var(--nt-fs-xl); line-height: 1.4; color: var(--nt-color-text); } .single-honne_phrase .nt-article-content > h2::before { content: counter(honne-section, decimal-leading-zero); color: var(--nt-color-primary); font-weight: 700; font-size: 0.85em; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ========================================================= 4. 本文の質感 --------------------------------------------------------- 段落の行間を少し広げ (1.9) 、リストは em-dash で項目化して 辞典的な「言い換え候補」リストとして読めるようにする。 ========================================================= */ .single-honne_phrase .nt-article-content > p { line-height: 1.9; } .single-honne_phrase .nt-article-content > ul { list-style: none; padding-left: 0; } .single-honne_phrase .nt-article-content > ul > li { position: relative; padding-left: 1.4em; margin-bottom: 0.5em; line-height: 1.85; } .single-honne_phrase .nt-article-content > ul > li::before { content: "—"; position: absolute; left: 0; color: var(--nt-color-primary); font-weight: 600; } /* ========================================================= 5. Archive / Taxonomy index の調整 --------------------------------------------------------- page-hero の縦余白を本文と揃え、辞典トップから個別記事へ 遷移したときに違和感が出ないようにする。 ========================================================= */ .post-type-archive-honne_phrase .nt-page-hero, .tax-honne_intent .nt-page-hero, .tax-honne_scene .nt-page-hero, .tax-honne_tone .nt-page-hero { padding-block: clamp(48px, 6vw, 88px); } /* ========================================================= 6. intent / scene / tone ボタンを画像化 --------------------------------------------------------- archive-honne_phrase.php の #honne-intent (気持ちで選ぶ) / #honne-scene (シーンで選ぶ) / #honne-tone (トーンで選ぶ) セクション内の nt-btn--ghost に画像が入る場合の表示。 テンプレ側で … の形で出力されることを想定。 方針: - 既存の .nt-btn / .nt-btn--ghost のシャドウ・幅・hover の挙動は壊さない。 - パディングだけ詰め、画像が枠ぴったりに収まるようにする。 - 画像が無い (= テキストだけの) 既存配布テーマ環境では何も変わらない よう、.nt-btn--image をフックにする。 - aria-label を a に付けてリンクの目的を伝え、 はメディア 設定値 (= 視覚を補う代替テキスト) を出す方針。 - 背景色は intent (気持ち) と scene / tone で分ける。 - intent : --nt-color-bg (ページ背景に馴染ませる) - scene/tone : #fff (白カードらしく独立感を出す) ========================================================= */ .post-type-archive-honne_phrase #honne-intent .nt-btn--image, .post-type-archive-honne_phrase #honne-scene .nt-btn--image, .post-type-archive-honne_phrase #honne-tone .nt-btn--image { padding: 0; overflow: hidden; line-height: 0; /* 画像読込前でもボタン高さを確保（lazy + 0高さで読込が走らない事故防止）。 画像は 468x468 の正方形なので 1:1 で固定する。 */ aspect-ratio: 1 / 1; /* nt-btn--ghost 継承の 999px だと完全な丸ボタンに近くなり、辞典の トーンと合わない。画像タイル感を出すために自然な角丸に上書き。 img 側は border-radius: inherit で同じ値を引き継ぐ。 */ border-radius: 18px; background: var(--nt-color-bg); } /* scene / tone は白背景で独立したカード感を出す。intent と外形 (幅 / 角丸 / シャドウ) は揃え、塗りだけ差し替え。 */ .post-type-archive-honne_phrase #honne-scene .nt-btn--image, .post-type-archive-honne_phrase #honne-tone .nt-btn--image { background: #fff; } .post-type-archive-honne_phrase #honne-intent .nt-btn--image img, .post-type-archive-honne_phrase #honne-scene .nt-btn--image img, .post-type-archive-honne_phrase #honne-tone .nt-btn--image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform 0.25s ease; } .post-type-archive-honne_phrase #honne-intent .nt-btn--image:hover img, .post-type-archive-honne_phrase #honne-intent .nt-btn--image:focus-visible img, .post-type-archive-honne_phrase #honne-scene .nt-btn--image:hover img, .post-type-archive-honne_phrase #honne-scene .nt-btn--image:focus-visible img, .post-type-archive-honne_phrase #honne-tone .nt-btn--image:hover img, .post-type-archive-honne_phrase #honne-tone .nt-btn--image:focus-visible img { transform: scale(1.03); } /* テンプレ側で term_name を残す 場合のスクリーンリーダー専用テキスト隠し。WordPress の sr-only と 同等。aria-label を a に付けるなら無くてもよいが、安全側に倒す。 */ .post-type-archive-honne_phrase #honne-intent .nt-btn--image .screen-reader-text, .post-type-archive-honne_phrase #honne-scene .nt-btn--image .screen-reader-text, .post-type-archive-honne_phrase #honne-tone .nt-btn--image .screen-reader-text { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* tone は親 grid が .nt-grid--3 で、各セル幅が intent / scene (.nt-grid--4) より広い。素のままだと PC で画像ボタンが大きく 見えすぎるので、intent / scene と揃う最大幅 (234px) で上限を打ち、 セル内で中央寄せして見た目のサイズを 3 セクション間で統一する。 コンテナが狭い時は width: 100% で自然に縮むので SP には副作用なし。 PC の grid は親テーマの .nt-grid--3 が 3 カラム × 2 行を維持。 */ .post-type-archive-honne_phrase #honne-tone .nt-btn--image { width: 100%; max-width: 234px; justify-self: center; } /* tone の grid 自体の最大幅を絞り、3 つの 234px ボタン + 2 つの 親テーマ既定 gap (--nt-gap) ぶんだけ取って中央寄せ。これにより PC で他セクション (intent / scene の .nt-grid--4) と同じ密度感の ボタン間隔になる。SP では下の media query で grid-template-columns を 2 カラムに上書きしており、かつ SP 幅 (<= 600px) はこの max-width より狭いため、SP 表示には影響しない。画像が無いテキストフォール バック時 (.nt-btn--image が 1 つも無い場合) は :has() でマッチ しないため、親テーマ既定の grid をそのまま使う。 */ .post-type-archive-honne_phrase #honne-tone .nt-grid:has(.nt-btn--image) { max-width: calc(234px * 3 + var(--nt-gap) * 2); margin-inline: auto; } /* SP (max-width: 600px) で intent / scene / tone の画像ボタン一覧を 2 カラムにする。:has(.nt-btn--image) で画像ボタンが存在するときだけ 2 カラム化し、画像が用意されていないテキストフォールバック時 (.nt-btn--image が 1 つも無い場合) は親テーマの .nt-grid--* 既定 (= SP 1 カラム縦並び) のまま維持して、テキストボタンが横に詰まる レイアウト崩れを避ける。PC 時は親テーマの grid 既定 (intent / scene: .nt-grid--4 = 4 カラム / tone: .nt-grid--3 = 3 カラム) を維持。 */ @media (max-width: 600px) { .post-type-archive-honne_phrase #honne-intent .nt-grid:has(.nt-btn--image), .post-type-archive-honne_phrase #honne-scene .nt-grid:has(.nt-btn--image), .post-type-archive-honne_phrase #honne-tone .nt-grid:has(.nt-btn--image) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= 7. 本音辞典マスコットを右下にふわふわ浮遊 --------------------------------------------------------- archive-honne_phrase.php の末尾付近に を置く想定。装飾要素なので aria-hidden、pointer-events: none で 下のリンクをクリック阻害しない。 PC: 200px / SP: 100px。prefers-reduced-motion: reduce では アニメーション停止。 ========================================================= */ .honne-jiten-floating-character { position: fixed; right: clamp(12px, 3vw, 32px); bottom: clamp(72px, 10vh, 112px); width: 200px; max-width: 22vw; pointer-events: none; z-index: 5; animation: honne-jiten-float 4.5s ease-in-out infinite; will-change: transform; } /* ラッパは pointer-events: none のまま (周囲の空白で下のリンク操作を 阻害しない) だが、LINE スタンプ用バナーに差し替えてからは画像が クリック可能な になったため、内側のリンクだけ pointer-events を 復活させる。画像の見た目に当たる領域だけが反応し、ラッパの余白部分は 従来どおり透過する。 */ .honne-jiten-floating-character__link { display: block; pointer-events: auto; cursor: pointer; border-radius: 12px; } .honne-jiten-floating-character__link:focus-visible { outline: 2px solid var(--honne-color-primary, #e85d8f); outline-offset: 4px; } .honne-jiten-floating-character img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12)); } @keyframes honne-jiten-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (max-width: 600px) { .honne-jiten-floating-character { width: 100px; max-width: 28vw; right: 10px; bottom: clamp(56px, 8vh, 80px); } } @media (prefers-reduced-motion: reduce) { .honne-jiten-floating-character { animation: none; } .post-type-archive-honne_phrase #honne-intent .nt-btn--image img, .post-type-archive-honne_phrase #honne-scene .nt-btn--image img, .post-type-archive-honne_phrase #honne-tone .nt-btn--image img { transition: none; } .post-type-archive-honne_phrase #honne-intent .nt-btn--image:hover img, .post-type-archive-honne_phrase #honne-intent .nt-btn--image:focus-visible img, .post-type-archive-honne_phrase #honne-scene .nt-btn--image:hover img, .post-type-archive-honne_phrase #honne-scene .nt-btn--image:focus-visible img, .post-type-archive-honne_phrase #honne-tone .nt-btn--image:hover img, .post-type-archive-honne_phrase #honne-tone .nt-btn--image:focus-visible img { transform: none; } } /* ========================================================= 8. Card intent chips (.honne-card__intents / .honne-card__intent) --------------------------------------------------------- archive-honne_phrase.php と taxonomy-honne_*.php が template-parts/content-honne_phrase.php 経由で出すカードで、 タイトル上に「本音の種類 (honne_intent)」ターム名をチップ 表示するブロック。/honne-intent/ / /honne-scene/ / /honne-tone/ のどのアーカイブでも、同じ「本音の種類」を見せる統一方針。 関連付け済タームを複数チップで横並び、自然に折り返す。 旧 .nt-card__category (場面 1 件、横長

) は PHP 側で 出力されなくなったため、ここではスタイルしない。 スコープは本音辞典系のアーカイブ body class のみで、 サイト全体には影響しない。 ========================================================= */ .post-type-archive-honne_phrase .honne-card__intents, .single-honne_phrase .honne-card__intents, .tax-honne_intent .honne-card__intents, .tax-honne_scene .honne-card__intents, .tax-honne_tone .honne-card__intents { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0.6em; padding: 0; } .post-type-archive-honne_phrase .honne-card__intent, .single-honne_phrase .honne-card__intent, .tax-honne_intent .honne-card__intent, .tax-honne_scene .honne-card__intent, .tax-honne_tone .honne-card__intent { display: inline-flex; align-items: center; width: auto; max-width: 100%; padding: 0.2em 0.85em; background: color-mix(in srgb, var(--nt-color-primary) 8%, var(--nt-color-bg)); color: var(--nt-color-primary); border: 1px solid color-mix(in srgb, var(--nt-color-primary) 22%, transparent); border-radius: 999px; font-size: var(--nt-fs-xs); font-weight: 600; line-height: 1.55; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .post-type-archive-honne_phrase .honne-card__intent:hover, .post-type-archive-honne_phrase .honne-card__intent:focus-visible, .single-honne_phrase .honne-card__intent:hover, .single-honne_phrase .honne-card__intent:focus-visible, .tax-honne_intent .honne-card__intent:hover, .tax-honne_intent .honne-card__intent:focus-visible, .tax-honne_scene .honne-card__intent:hover, .tax-honne_scene .honne-card__intent:focus-visible, .tax-honne_tone .honne-card__intent:hover, .tax-honne_tone .honne-card__intent:focus-visible { background: color-mix(in srgb, var(--nt-color-primary) 16%, var(--nt-color-bg)); border-color: color-mix(in srgb, var(--nt-color-primary) 38%, transparent); color: var(--nt-color-primary); text-decoration: none; } /* ========================================================= 9. Honne-jiten archive pagination --------------------------------------------------------- 親テーマの template-parts/pagination.php は paginate_links( type=list ) を使うため