/* ============================================================ 記事本文で使うブロック（表示側・編集画面で共用） ------------------------------------------------------------ 現行サイト https://www.fleet.suzuki/ の実測値に合わせている。 case-list/safety-management/877/ … リードボックス event-list/exhibition/872/ … 赤ボタン このファイルは 表示側 … style.css から @import せず、enqueue.php で読む 編集画面 … inc/editor.php の add_editor_style( 'assets/css/editor.css' ) （editor.css がこのファイルを @import する） の2経路で使う。定義を1箇所に保つため、直接ここだけを編集すること。 ============================================================ */ /* ---- リードボックス（段落ブロックの背景色） ---- 実測：#e1f1ff／padding 20px 38px（＝1.25em 2.375em）／16px・行送り1.6。 パディングはコアのブロックCSSと同値だが、コアは 「そのブロックがページにある時だけ」CSSを読み込む仕様のため、 ここでも同じ値を持たせて取りこぼしを防ぐ。 */ p.has-background { padding: 1.25em 2.375em; } /* * 企業紹介のBOX（AUN #9「枠線だけのシンプルなものに。中のテキストは少し小さく」）。 * 塗りつぶしをやめて枠線だけにする。色クラス（has-lead-blue-background-color）と * ブロックスタイル（is-style-suzuki-lead）のどちらで作っても同じ見た目になる。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p:is(.has-lead-blue-background-color, .is-style-suzuki-lead) { /* 塗りは無し。枠線は薄いグレー。本文と区別が付くよう文字も少し落とす。 ブロック側で色を選ぶと style="background-color:…" がインラインで付き、 クラスの指定では勝てないので !important で潰す。 */ background: transparent !important; background-color: transparent !important; border: 1px solid #dcdcdc; border-radius: 10px; color: #555; font-size: .85rem; /* 本文(.92rem)より少し小さく */ line-height: 1.9; /* 本文から独立した囲みなので、上下は段落間よりしっかり空ける。 */ margin-block: 3.2em; padding: 1.75em 2em; } /* パレットの色クラス。 add_theme_support( 'editor-color-palette' ) は編集画面に色見本を並べるだけで、 表示側の .has-◯◯-color / .has-◯◯-background-color は作ってくれない （theme.json を使う場合と違う点）。ここで対で定義しておく。 inc/editor.php のパレットと slug を必ず一致させること。 */ .has-lead-blue-color { color: #e1f1ff; } .has-lead-blue-background-color { background-color: #e1f1ff; } .has-navy-color { color: #00368f; } .has-navy-background-color { background-color: #00368f; } .has-blue-bright-color { color: #0098d9; } .has-blue-bright-background-color { background-color: #0098d9; } .has-cta-red-color { color: #de0039; } .has-cta-red-background-color { background-color: #de0039; } .has-gray-color { color: #939393; } .has-gray-background-color { background-color: #939393; } .has-white-color { color: #fff; } .has-white-background-color { background-color: #fff; } .has-black-color { color: #000; } .has-black-background-color { background-color: #000; } /* ---- 本文中のボタン ---- 実測（来場登録をする）： 背景 linear-gradient(88deg, #de0039 0%, #ab002c 100%) 白フチ1px／白文字18px 600／padding 8px 48px／角丸100 影 0 2px 8px rgb(0,0,0,.3)／上下マージン64px ボタンブロックの「スタイル」から選ぶ。 */ /* 記事本文に置いたボタンは、何も選ばなくても最初から赤ボタンにする。 毎回「スタイル」を選ぶ手間をなくすため。白ボタンにしたいときだけ スタイルから「SUZUKI 白ボタン」を選ぶ。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) .wp-block-button:not(.is-style-suzuki-outline) .wp-block-button__link { background: linear-gradient(88deg, #de0039 0%, #ab002c 100%); border: 1px solid #fff; color: #fff; } .wp-block-button.is-style-suzuki-cta .wp-block-button__link, .wp-block-button.is-style-suzuki-outline .wp-block-button__link, :is(.case-single__body, .p-page__body, .editor-styles-wrapper) .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 48px; border-radius: 100px; font-size: 1.125rem; font-weight: 600; line-height: 1.6; text-decoration: none; box-shadow: 0 2px 8px rgb(0, 0, 0, .3); } .wp-block-button.is-style-suzuki-cta .wp-block-button__link { background: linear-gradient(88deg, #de0039 0%, #ab002c 100%); border: 1px solid #fff; color: #fff; } .wp-block-button.is-style-suzuki-outline .wp-block-button__link { background: #fff; border: 1px solid #00368f; color: #00368f; } /* 別タブで開くリンクには、現行サイトと同じ「外部リンク」アイコンを付ける。 target="_blank" を付けた時だけ出るので、記事側で意識する必要はない。 */ .wp-block-button.is-style-suzuki-cta .wp-block-button__link[target="_blank"]::after, .wp-block-button.is-style-suzuki-outline .wp-block-button__link[target="_blank"]::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } @media (hover: hover) { .wp-block-button.is-style-suzuki-cta .wp-block-button__link:hover, .wp-block-button.is-style-suzuki-outline .wp-block-button__link:hover { opacity: .85; } } /* ============================================================ 記事本文の基本ブロック ------------------------------------------------------------ 対象は「記事の本文」だけ。TOP（front-page.php）は同じコアブロックを 別デザインで使っているので、必ずこの3つのスコープに閉じること。 .case-single__body … 導入事例・活用事例・お役立ち記事・最新情報・イベント .p-page__body … 固定ページ .editor-styles-wrapper … 編集画面 余白は現行サイト実測（見出し・段落とも上下24px）。 ============================================================ */ /* ---- 見出し・段落の余白 ---- */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) :is(h2, h3, h4) { margin: 1.5em 0 .75em; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) :is(h2, h3, h4):first-child { margin-top: 0; } /* ---- 見出しの見た目（AUN #24 / #27「この辺りのcss」）---- 記事を書く人が h2 / h3 / h4 を選ぶだけで体裁が付くようにする。 セクション見出し（.section-head）はTOP用なので、本文では使わない。 h2 … 黒の太字＋下に薄い罫（AUN #29「飾りなし？」で左の縦バーは外した） h3 … 紺の太字＋左に水色の縦バー h4 … 紺の太字のみ サイズは本文(.92rem/14.7px)を基準に相対で置く。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) h2 { position: relative; margin-top: 2.2em; /* AUN #29「飾りなし？」：左の紺の縦バーを外し、下の罫だけで区切る。 バーが無くなったぶん、左のインデントも取らない。 */ padding: 0 0 .5em; border-bottom: 1px solid #dbe3ef; color: #000; font-size: 1.45em; /* 黒にすると太字が重く見えるので 800 → 600。 */ font-weight: 600; line-height: 1.5; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) h3 { position: relative; margin-top: 1.9em; padding-left: .7em; color: var(--navy, #00368f); font-size: 1.22em; font-weight: 800; line-height: 1.55; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) h3::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 3px; background: var(--blue-bright, #0098d9); } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) h4 { color: var(--navy, #00368f); font-size: 1.08em; font-weight: 800; line-height: 1.6; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p { margin: 0 0 1.5em; } /* ---- インタビューの質問（AUN #28「質問は太字」）---- 「── 」で始まる段落は inc/editor.php が自動で is-style-suzuki-q を付ける。 回答（通常の段落）と見分けが付くよう、太字にして少しだけ間を空ける。 色は本文と同じ（紺にはしない：本多さん指示）。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p.is-style-suzuki-q { margin-top: 2em; font-weight: 700; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p.is-style-suzuki-q:first-child { margin-top: 0; } /* ---- リスト ---- テーマのリセットで list-style:none / padding:0 になっていて、 記事本文でも「・」や番号が消えていたので、ここだけ戻す。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) :is(ul, ol) { margin: 0 0 1.5em; padding-left: 1.6em; } /* 記事本文の「ul」は行頭「ー」が既定（AUN #6「●をやめて「ー」」）。 ●に戻したいリストだけ、ブロックのスタイルから「●の箇条書き」を選ぶ。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) ul { list-style: none; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) ul.is-style-suzuki-dot { list-style: disc; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) ol { list-style: decimal; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) li { list-style: inherit; margin-bottom: .4em; } /* ---- 記事の締め「SUZUKI FLEET より」 ---- 導入事例の最後に入る、取材の感想や伴走についてのコメント。 本文と混ざらないよう、紺の枠＋左上のラベルで囲む。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p.is-style-suzuki-voice { position: relative; margin: 56px 0 1.5em; padding: 34px 30px 26px; border: 1px solid var(--navy, #00368f); border-radius: 12px; background: #f5f9fd; color: var(--ink, #1a1a1a); font-size: .875rem; line-height: 1.95; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p.is-style-suzuki-voice::before { content: "SUZUKI FLEET より"; position: absolute; top: 0; left: 24px; transform: translateY(-50%); padding: 6px 18px; border-radius: 999px; background: var(--navy, #00368f); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .04em; line-height: 1.4; white-space: nowrap; } /* ---- 行頭「ー」の箇条書き（AUN #6）---- 「●」をやめて全角のダッシュにする。行頭の位置は ● の時と揃える。 既定なので ul 全般に当て、is-style-suzuki-dot を選んだ時だけ ● に戻す。 （is-style-suzuki-dash は明示的に選んだ時用。既定と同じ見た目） */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) ul:not(.is-style-suzuki-dot) { padding-left: 0; list-style: none; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) ul:not(.is-style-suzuki-dot) > li { list-style: none; padding-left: 1.5em; text-indent: -1.5em; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) ul:not(.is-style-suzuki-dot) > li::before { content: "ー"; display: inline-block; width: 1.5em; text-indent: 0; color: var(--navy, #00368f); } /* ---- 画像 ---- img が原寸（例：400px）のまま左に寄っていたので、本文幅に合わせる。 角丸は導入事例カード等と揃えて12px。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) figure.wp-block-image { margin: 0 0 1.5em; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) figure.wp-block-image img { display: block; /* AUN #10：本文の写真は幅80%で中央に置く（以前は本文幅いっぱい）。 */ width: 80%; max-width: 100%; margin-inline: auto; height: auto; border-radius: 12px; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) figcaption { margin: .6em 0 0; color: #939393; font-size: .8125rem; line-height: 1.7; } /* ---- 2カラム（画像を横に並べる） ---- */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) .wp-block-columns { margin: 0 0 1.5em; } @media (max-width: 767px) { :is(.case-single__body, .p-page__body, .editor-styles-wrapper) .wp-block-columns { flex-wrap: wrap; } } /* ---- 引用 ---- カンプに指定が無いので、ブランド色で控えめに（淡い青＋紺の縦罫）。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) blockquote { margin: 0 0 1.5em; padding: 1.25em 1.5em; border-left: 4px solid var(--navy, #00368f); background: #f2f7fc; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) blockquote > :last-child { margin-bottom: 0; } /* ---- 表 ---- イベントの「開催概要」はカスタムフィールドで出すので、 ここは本文中に手で置く表（比較表など）のためのもの。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) figure.wp-block-table { margin: 0 0 1.5em; overflow-x: auto; /* 狭い画面でも表だけ横スクロールさせ、ページは崩さない */ } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) table { width: 100%; border-collapse: collapse; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) :is(th, td) { padding: .75em 1em; border: 1px solid #cfd8e6; text-align: left; vertical-align: top; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) th { background: #e1f1ff; color: var(--navy, #00368f); font-weight: 700; white-space: nowrap; } /* ---- 区切り線 ---- */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) hr.wp-block-separator { height: 0; margin: 2.5em 0; border: 0; border-top: 1px solid #dbe3ef; } /* ---- ボタンの上下余白（本文中に置いたとき） ---- */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) .wp-block-buttons { margin: 2.5em 0; } /* ---- 本文リンク ---- 現行サイト実測（event-list/exhibition/872/）： 色 #00368f・下線・通常ウェイト 別タブで開くリンク（target="_blank"）… 紺の「別タブ」アイコン 20px PDFへのリンク … 赤の「PDF」アイコン 20px アイコンは href / target から自動で付くので、記事側での指定は不要。 ボタンブロックは別デザインなので除外する。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) a:not(.wp-block-button__link):not(.btn):not(.p-doc-banner__btn) { color: var(--navy, #00368f); text-decoration: underline; text-underline-offset: .2em; } :is(.case-single__body, .p-page__body, .editor-styles-wrapper) a:not(.wp-block-button__link):not(.btn):not(.p-doc-banner__btn):is([target="_blank"], [href$=".pdf"])::after { content: ""; display: inline-block; width: 20px; height: 20px; margin-left: .3em; vertical-align: -.25em; /* アイコンはデータURIで埋め込む。編集画面ではWPがこのCSSを インライン展開するため、相対パスの url() が解決できないため。 */ background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%2300368F%22%20d=%22M19%203v14H1V3h18ZM3%2015h14V5H3v10Z%22/%3E%3Cpath%20fill=%22%2300368F%22%20d=%22M23%203h-2v16H3v2h20V3Z%22/%3E%3C/svg%3E") center / contain no-repeat; } /* PDFは別タブ指定と併用されることが多いので、後ろに置いて上書きする。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) a:not(.wp-block-button__link):not(.btn):not(.p-doc-banner__btn)[href$=".pdf"]::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23DE0039%22%20fill-rule=%22evenodd%22%20d=%22M8.536%209.46c.55.001.96.151%201.23.441.27.29.41.72.41%201.29v.69c0%20.57-.14%201-.41%201.29-.27.29-.68.44-1.23.44h-.52v2.85h-1.1v-7h1.62Zm-.52%203.151h.52c.18%200%20.32-.05.41-.15.09-.1.13-.27.13-.51v-.83c0-.24-.04-.41-.13-.51-.09-.1-.23-.15-.41-.15h-.52v2.15Zm4.44-3.151c.55%200%20.96.151%201.23.441.27.29.41.72.41%201.29v3.54c0%20.57-.14%201-.41%201.29-.27.29-.68.44-1.23.44h-1.68v-7h1.68Zm-.58%206h.56c.18%200%20.32-.05.42-.16.1-.11.15-.28.15-.519v-3.64c0-.24-.05-.41-.15-.52-.1-.11-.23-.16-.42-.16h-.56v5Z%22/%3E%3Cpath%20fill=%22%23DE0039%22%20d=%22M17.746%2010.46h-1.81v1.951h1.42v1h-1.42v3.05h-1.1v-7h2.91v1Z%22/%3E%3Cpath%20fill=%22%23DE0039%22%20fill-rule=%22evenodd%22%20d=%22m16.578%202.146%203.34%203.33.147.146V22H3.935V2h12.497l.146.146ZM4.935%2021h14.13V6.07h-3.009V3.037L16.017%203H4.935v18Z%22/%3E%3C/svg%3E"); } @media (hover: hover) { :is(.case-single__body, .p-page__body, .editor-styles-wrapper) a:not(.wp-block-button__link):not(.btn):not(.p-doc-banner__btn):hover { text-decoration: none; } } /* ---- 選択したテキストの装飾（editor-formats.js で付くクラス） ---- */ .suzuki-marker { background: linear-gradient(transparent 60%, #e1f1ff 60%); padding-bottom: .1em; } .suzuki-strong-navy { color: var(--navy, #00368f); font-weight: 700; } /* ---- 段落のスタイル「リードボックス」 ---- 色パネルから背景色を選ぶ方法と同じ見た目にする。 （どちらの入り口で作っても表示は変わらない） */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) p.is-style-suzuki-lead { padding: 1.25em 2.375em; } /* ---- 資料ダウンロードバナー（記事本文に置く版）---- ショートコード [suzuki_doc_banner wrap="none"] が付ける修飾クラス。 TOPのようにセクションの余白を持たないので、ここで上下を空ける。 */ :is(.case-single__body, .p-page__body, .editor-styles-wrapper) .p-doc-banner--inline { margin-block: 2.5em; }