From 602aa1f3831f4ff23fc7ce93662635ebed8614ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E4=BA=95=20=E9=99=B8=E7=99=BB?= Date: Fri, 25 Sep 2026 20:41:45 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=82=A8=E3=83=87=E3=82=A3=E3=82=BF=E3=83=BC=E3=81=AE=20HTML?= =?UTF-8?q?=E3=83=BB=E5=9F=8B=E3=82=81=E8=BE=BC=E3=81=BF=E3=83=BB=E3=82=B0?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=82=92=20develop=20=E3=83=86=E3=83=BC=E3=83=9E=E3=81=A7?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B=EF=BC=88CMS-7912=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 埋め込みブロックの OGP カードが旧埋め込みユニット向けのセレクタ（[class*='column-embed']）に当たらず、 prose の figure の余白とリンク下線だけが当たっていたため、旧ユニットと同じ見た目にする - グループブロックと HTML ブロックの iframe に、他のブロックと同じ余白を付ける - editor-css が空で、管理画面のプレビュー（隔離 iframe）に本文のスタイルが入っていなかったため、 editor.css を CSS 単体のエントリーにして @vite の linkTagAttributes で data-block-editor-stylesheet を付ける （JS エントリーに付随する CSS の link には属性を付けられないため） Co-Authored-By: Claude Opus 5.5 --- themes/develop/admin.html | 8 ++++ themes/develop/src/js/admin.js | 3 +- themes/develop/tailwind.config.js | 80 +++++++++++++++++++++++++++---- themes/develop/vite.config.js | 2 + 4 files changed, 82 insertions(+), 11 deletions(-) diff --git a/themes/develop/admin.html b/themes/develop/admin.html index d510706..40fd5fd 100644 --- a/themes/develop/admin.html +++ b/themes/develop/admin.html @@ -1,6 +1,14 @@ @extends("/_layouts/admin.html") @section("editor-css") + +@vite("src/style/editor.css", { + "linkTagAttributes": { + "data-block-editor-stylesheet": true + } +}) @endsection @section("admin-js") diff --git a/themes/develop/src/js/admin.js b/themes/develop/src/js/admin.js index 92ffbca..6c15b99 100644 --- a/themes/develop/src/js/admin.js +++ b/themes/develop/src/js/admin.js @@ -1,4 +1,3 @@ /** - * スタイルの読み込み + * スタイル（editor.css）は admin.html の editor-css で読み込む */ -import '../style/editor.css'; diff --git a/themes/develop/tailwind.config.js b/themes/develop/tailwind.config.js index 6d1bfe3..b184a48 100644 --- a/themes/develop/tailwind.config.js +++ b/themes/develop/tailwind.config.js @@ -204,12 +204,14 @@ module.exports = { // ------------------------------ // 埋め込みカード // ------------------------------ - "[class*='column-embed']": { + "[class*='column-embed'], .embed-block": { // Align with media/figure rhythm: 32px -> 2em marginTop: em(32, 16), marginBottom: em(32, 16), }, - "[class*='column-embed'] .acms-embed-link": { + // 埋め込みブロックはカード全体ではなくタイトルだけが a なので、タイトルのリンク領域をカード全体へ広げる + "[class*='column-embed'] .acms-embed-link, .embed-block .acms-embed-link": { + position: 'relative', overflow: 'hidden', display: 'block', padding: '0', @@ -223,8 +225,16 @@ module.exports = { textDecoration: 'none', transitionProperty: 'opacity', }, + // 埋め込みブロックの画像。typography のセレクタは詳細度が揃うため、md の幅指定より前に置く。 + // figure 内の画像の角丸（figure img）がカードの画像にまで当たらないよう打ち消す + '.embed-block .acms-embed-link > img': { + display: 'block', + width: '100%', + margin: '0', + borderRadius: '0', + }, [`@media (min-width: ${theme('breakpoint.md')})`]: { - "[class*='column-embed'] .acms-embed-link": { + "[class*='column-embed'] .acms-embed-link, .embed-block .acms-embed-link": { display: 'flex', transitionProperty: 'opacity', }, @@ -236,11 +246,17 @@ module.exports = { height: '100%', objectFit: 'cover', }, - "[class*='column-embed'] .acms-embed-link-content": { + // 埋め込みブロックは画像を包む要素が無いので、画像自身が旧ユニットの入れ物と同じ幅を持つ + '.embed-block .acms-embed-link > img': { + width: '33.333333%', + flex: 'none', + objectFit: 'cover', + }, + "[class*='column-embed'] .acms-embed-link-content, .embed-block .acms-embed-link-content": { width: '66.666667%', }, }, - "[class*='column-embed'] .acms-embed-link:hover": { + "[class*='column-embed'] .acms-embed-link:hover, .embed-block .acms-embed-link:hover": { opacity: '0.7', }, "[class*='column-embed'] .acms-embed-link-image-container": { @@ -251,14 +267,27 @@ module.exports = { width: '100%', margin: '0', }, - "[class*='column-embed'] .acms-embed-link-content": { + '.embed-block .acms-embed-link-title, .embed-block .acms-embed-link-site-name': { + display: 'block', + }, + '.embed-block a.acms-embed-link-title::before': { + content: '""', + position: 'absolute', + inset: '0', + }, + // 配置用の外側 div が余白を持つため、figure の余白は打ち消す + '.embed-block > figure': { + marginTop: '0', + marginBottom: '0', + }, + "[class*='column-embed'] .acms-embed-link-content, .embed-block .acms-embed-link-content": { display: 'flex', flexDirection: 'column', maxWidth: 'none', padding: '2em', backgroundColor: 'var(--color-white)', }, - "[class*='column-embed'] .acms-embed-link-title": { + "[class*='column-embed'] .acms-embed-link-title, .embed-block .acms-embed-link-title": { marginBottom: '.375em', marginTop: '0', fontSize: 'var(--text-base)', @@ -267,7 +296,7 @@ module.exports = { color: 'var(--color-gray-700)', textDecoration: 'none', }, - "[class*='column-embed'] .acms-embed-link-site-name": { + "[class*='column-embed'] .acms-embed-link-site-name, .embed-block .acms-embed-link-site-name": { order: '-1', padding: '0', marginTop: '0', @@ -275,7 +304,7 @@ module.exports = { color: 'var(--color-gray-700)', fontSize: 'var(--text-sm)', }, - "[class*='column-embed'] .acms-embed-link-description": { + "[class*='column-embed'] .acms-embed-link-description, .embed-block .acms-embed-link-description": { padding: '0', margin: '0', fontSize: 'var(--text-xs)', @@ -299,6 +328,39 @@ module.exports = { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', }, + // ------------------------------ + // グループ（複数ブロックをまとめるラッパー） + // ------------------------------ + // 中の最後の子の下余白を打ち消すため、グループ自身が他のブロックと同じ余白を持つ + "[data-type='group']": { + boxSizing: 'border-box', + marginTop: em(32, 16), + marginBottom: em(32, 16), + }, + // 先頭・末尾の子ブロックの余白を打ち消し、グループの枠と中身が二重に空かないようにする + "[data-type='group'] > :first-child": { + marginTop: '0', + }, + "[data-type='group'] > :last-child": { + marginBottom: '0', + }, + // カラーパレットで背景色だけ付けたグループでも、文字が背景の端に貼り付かないようにする + "[data-type='group'][style*='background-color']": { + padding: em(24, 16), + }, + + // ------------------------------ + // HTML ブロック + // ------------------------------ + // ラッパーを持たず、編集者が書いた iframe 等がブロックの並びに直接置かれるため、並びの直下にあるものだけに余白を付ける。 + // Why not iframe 全般に付けないか: 埋め込みブロックの iframe は外側の .embed-block が余白を持つため、二重に空いてしまう + ":is(.column-block-editor, [data-type='group'], [data-type='column']) > :is(iframe, video, object, embed)": + { + maxWidth: '100%', + marginTop: em(32, 16), + marginBottom: em(32, 16), + }, + // ------------------------------ // 配置 // ------------------------------ diff --git a/themes/develop/vite.config.js b/themes/develop/vite.config.js index d643d10..9f91813 100644 --- a/themes/develop/vite.config.js +++ b/themes/develop/vite.config.js @@ -65,6 +65,8 @@ export default defineConfig(({ command, mode }) => ({ input: { bundle: resolve(import.meta.dirname, 'src/js/main.js'), admin: resolve(import.meta.dirname, 'src/js/admin.js'), + // 管理画面の editor-css から CSS 単体のエントリーとして読み込む（admin.html 参照） + editor: resolve(import.meta.dirname, 'src/style/editor.css'), }, output: { manualChunks(id) { From dda3acb05823c5b7985441a7a9b14c3552e65738 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E4=BA=95=20=E9=99=B8=E7=99=BB?= Date: Fri, 25 Sep 2026 22:09:27 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E5=9F=8B=E3=82=81=E8=BE=BC=E3=81=BF?= =?UTF-8?q?=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF=E3=81=AE=20OGP=20=E3=82=AB?= =?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=A8=20HTML=20=E3=83=96=E3=83=AD?= =?UTF-8?q?=E3=83=83=E3=82=AF=E3=81=AE=20iframe=20=E3=81=AE=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=82=92=E5=AE=9F=E6=A9=9F=E7=A2=BA=E8=AA=8D=E3=81=AB?= =?UTF-8?q?=E5=90=88=E3=82=8F=E3=81=9B=E3=81=A6=E4=BF=AE=E6=AD=A3=E3=81=99?= =?UTF-8?q?=E3=82=8B=EF=BC=88CMS-7912=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - md 以上でカードを横並びにする指定が、typography 設定の @media のキーごとセレクタとして :where() に包まれて 無効になっていた（旧埋め込みユニットも横並びになっていなかった）。editor.css に通常の CSS として移す - 管理画面のカードは embed-block-card-* しか持たないため、公開側と共通のクラスで指定する - 埋め込みブロックはグループ・カラムと同じくデータタイプで指定する - HTML ブロックの iframe は width="600" 等の固定幅を持つことが多いため、本文幅いっぱいに広げる Co-Authored-By: Claude Opus 5.5 --- themes/develop/src/style/editor.css | 33 +++++++++++++++ themes/develop/tailwind.config.js | 65 +++++++++++------------------ 2 files changed, 57 insertions(+), 41 deletions(-) diff --git a/themes/develop/src/style/editor.css b/themes/develop/src/style/editor.css index e8f603d..2ff0520 100644 --- a/themes/develop/src/style/editor.css +++ b/themes/develop/src/style/editor.css @@ -10,3 +10,36 @@ @plugin "@tailwindcss/typography"; @config '../../tailwind.config.js'; + +/* ------------------------------ + 埋め込みカード（旧埋め込みユニット・埋め込みブロック共通）：md 以上で横並びにする + Why not tailwind.config.js の typography に書かないか: typography は @media のキーもセレクタとして + :where() で包み、ルールごと無効になるため（それ以外の指定は typography 側にある） + ------------------------------ */ +/* stylelint-disable-next-line media-query-no-invalid */ +@media (width >= theme(--breakpoint-md)) { + .prose :where([class*='column-embed'] .acms-embed-link, [data-type='embedBlock'] .embed-block-card) { + display: flex; + } + + .prose :where([class*='column-embed'] .acms-embed-link-image-container) { + flex: none; + width: calc(100% / 3); + } + + .prose :where([class*='column-embed'] .acms-embed-link-image-container img) { + height: 100%; + object-fit: cover; + } + + /* 埋め込みブロックは画像を包む要素が無いので、画像自身が旧ユニットの入れ物と同じ幅を持つ */ + .prose :where([data-type='embedBlock'] .embed-block-card > img) { + flex: none; + width: calc(100% / 3); + object-fit: cover; + } + + .prose :where([class*='column-embed'] .acms-embed-link-content, [data-type='embedBlock'] .embed-block-card-content) { + width: calc(100% / 3 * 2); + } +} diff --git a/themes/develop/tailwind.config.js b/themes/develop/tailwind.config.js index b184a48..bb76861 100644 --- a/themes/develop/tailwind.config.js +++ b/themes/develop/tailwind.config.js @@ -204,13 +204,14 @@ module.exports = { // ------------------------------ // 埋め込みカード // ------------------------------ - "[class*='column-embed'], .embed-block": { + "[class*='column-embed'], [data-type='embedBlock']": { // Align with media/figure rhythm: 32px -> 2em marginTop: em(32, 16), marginBottom: em(32, 16), }, - // 埋め込みブロックはカード全体ではなくタイトルだけが a なので、タイトルのリンク領域をカード全体へ広げる - "[class*='column-embed'] .acms-embed-link, .embed-block .acms-embed-link": { + // 埋め込みブロックは旧ユニットと並べて宣言を共有する。管理画面のカードは embed-block-card-* しか持たないため + // 公開側と共通のこちらのクラスで指定する。カード全体ではなくタイトルだけが a なので、リンク領域をカード全体へ広げる + "[class*='column-embed'] .acms-embed-link, [data-type='embedBlock'] .embed-block-card": { position: 'relative', overflow: 'hidden', display: 'block', @@ -227,36 +228,15 @@ module.exports = { }, // 埋め込みブロックの画像。typography のセレクタは詳細度が揃うため、md の幅指定より前に置く。 // figure 内の画像の角丸（figure img）がカードの画像にまで当たらないよう打ち消す - '.embed-block .acms-embed-link > img': { + "[data-type='embedBlock'] .embed-block-card > img": { display: 'block', width: '100%', margin: '0', borderRadius: '0', }, - [`@media (min-width: ${theme('breakpoint.md')})`]: { - "[class*='column-embed'] .acms-embed-link, .embed-block .acms-embed-link": { - display: 'flex', - transitionProperty: 'opacity', - }, - "[class*='column-embed'] .acms-embed-link-image-container": { - width: '33.333333%', - flex: 'none', - }, - "[class*='column-embed'] .acms-embed-link-image-container img": { - height: '100%', - objectFit: 'cover', - }, - // 埋め込みブロックは画像を包む要素が無いので、画像自身が旧ユニットの入れ物と同じ幅を持つ - '.embed-block .acms-embed-link > img': { - width: '33.333333%', - flex: 'none', - objectFit: 'cover', - }, - "[class*='column-embed'] .acms-embed-link-content, .embed-block .acms-embed-link-content": { - width: '66.666667%', - }, - }, - "[class*='column-embed'] .acms-embed-link:hover, .embed-block .acms-embed-link:hover": { + // md 以上でカードを横並びにする指定は src/style/editor.css にある。 + // Why not ここに @media のキーで書かないか: typography は @media のキーもセレクタとして :where() で包み、ルールごと無効になるため + "[class*='column-embed'] .acms-embed-link:hover, [data-type='embedBlock'] .embed-block-card:hover": { opacity: '0.7', }, "[class*='column-embed'] .acms-embed-link-image-container": { @@ -267,27 +247,27 @@ module.exports = { width: '100%', margin: '0', }, - '.embed-block .acms-embed-link-title, .embed-block .acms-embed-link-site-name': { + "[data-type='embedBlock'] .embed-block-card-title, [data-type='embedBlock'] .embed-block-card-provider": { display: 'block', }, - '.embed-block a.acms-embed-link-title::before': { + "[data-type='embedBlock'] a.embed-block-card-title::before": { content: '""', position: 'absolute', inset: '0', }, // 配置用の外側 div が余白を持つため、figure の余白は打ち消す - '.embed-block > figure': { + "[data-type='embedBlock'] > figure": { marginTop: '0', marginBottom: '0', }, - "[class*='column-embed'] .acms-embed-link-content, .embed-block .acms-embed-link-content": { + "[class*='column-embed'] .acms-embed-link-content, [data-type='embedBlock'] .embed-block-card-content": { display: 'flex', flexDirection: 'column', maxWidth: 'none', padding: '2em', backgroundColor: 'var(--color-white)', }, - "[class*='column-embed'] .acms-embed-link-title, .embed-block .acms-embed-link-title": { + "[class*='column-embed'] .acms-embed-link-title, [data-type='embedBlock'] .embed-block-card-title": { marginBottom: '.375em', marginTop: '0', fontSize: 'var(--text-base)', @@ -296,7 +276,7 @@ module.exports = { color: 'var(--color-gray-700)', textDecoration: 'none', }, - "[class*='column-embed'] .acms-embed-link-site-name, .embed-block .acms-embed-link-site-name": { + "[class*='column-embed'] .acms-embed-link-site-name, [data-type='embedBlock'] .embed-block-card-provider": { order: '-1', padding: '0', marginTop: '0', @@ -304,13 +284,14 @@ module.exports = { color: 'var(--color-gray-700)', fontSize: 'var(--text-sm)', }, - "[class*='column-embed'] .acms-embed-link-description, .embed-block .acms-embed-link-description": { - padding: '0', - margin: '0', - fontSize: 'var(--text-xs)', - color: 'var(--color-gray-500)', - lineHeight: 'var(--leading-relaxed)', - }, + "[class*='column-embed'] .acms-embed-link-description, [data-type='embedBlock'] .embed-block-card-description": + { + padding: '0', + margin: '0', + fontSize: 'var(--text-xs)', + color: 'var(--color-gray-500)', + lineHeight: 'var(--leading-relaxed)', + }, // ------------------------------ // カラムレイアウト @@ -356,6 +337,8 @@ module.exports = { // Why not iframe 全般に付けないか: 埋め込みブロックの iframe は外側の .embed-block が余白を持つため、二重に空いてしまう ":is(.column-block-editor, [data-type='group'], [data-type='column']) > :is(iframe, video, object, embed)": { + // Google マップ等の埋め込みコードは width="600" のような固定幅を持つことが多いため、本文幅いっぱいに広げる（高さは属性の値のまま） + width: '100%', maxWidth: '100%', marginTop: em(32, 16), marginBottom: em(32, 16), From 2588607f36baaa01d66a9b2a63b6be77ea60268d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E4=BA=95=20=E9=99=B8=E7=99=BB?= Date: Fri, 25 Sep 2026 23:54:50 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=82=A8=E3=83=87=E3=82=A3=E3=82=BF=E3=83=BC=E3=81=AE=E3=83=97?= =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=82=92=E5=85=AC=E9=96=8B?= =?UTF-8?q?=E5=81=B4=E3=81=AE=E6=9C=AC=E6=96=87=E3=81=A8=E5=90=8C=E3=81=98?= =?UTF-8?q?=E5=B9=85=E3=81=AB=E3=81=99=E3=82=8B=EF=BC=88CMS-7912=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - エディターに付けるクラスが prose だけで、prose の max-width: 65ch によりプレビュー（隔離 iframe）の本文幅が 狭まっていた。公開側の本文（include/entry/body.twig）と同じ prose max-w-none にする - プレビューでは HTML ブロックの中身が acms-isolated-preview-root の直下に置かれるため、iframe を本文幅に広げる - typography が @media を扱えない理由をコメントで具体的に説明する Co-Authored-By: Claude Opus 5.5 --- themes/develop/admin.html | 4 +++- themes/develop/src/style/editor.css | 15 +++++++++++++-- themes/develop/tailwind.config.js | 3 ++- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/themes/develop/admin.html b/themes/develop/admin.html index 40fd5fd..0ed5105 100644 --- a/themes/develop/admin.html +++ b/themes/develop/admin.html @@ -16,7 +16,9 @@ diff --git a/themes/develop/src/style/editor.css b/themes/develop/src/style/editor.css index 2ff0520..424115c 100644 --- a/themes/develop/src/style/editor.css +++ b/themes/develop/src/style/editor.css @@ -13,8 +13,10 @@ /* ------------------------------ 埋め込みカード（旧埋め込みユニット・埋め込みブロック共通）：md 以上で横並びにする - Why not tailwind.config.js の typography に書かないか: typography は @media のキーもセレクタとして - :where() で包み、ルールごと無効になるため（それ以外の指定は typography 側にある） + Why not tailwind.config.js の typography に書かないか: typography の css 設定はキーをすべてセレクタとして + :where() で包む（@media のキーも区別しない）ため、ルールごと無効なセレクタになる。typography 自体は + 画面幅での切り替えを md:prose-lg のようなクラスのバリアントで行う設計で、設定の中にメディアクエリを持たない + （それ以外の指定は typography 側にある） ------------------------------ */ /* stylelint-disable-next-line media-query-no-invalid */ @media (width >= theme(--breakpoint-md)) { @@ -43,3 +45,12 @@ width: calc(100% / 3 * 2); } } + +/* ------------------------------ + ブロックエディターのプレビュー（隔離 iframe）では、HTML ブロックの中身が独自要素 acms-isolated-preview-root の直下に置かれる。 + 公開側（tailwind.config.js の HTML ブロックの指定）と同じく本文幅いっぱいに広げる（余白はプレビュー枠の中に空きができるため付けない） + ------------------------------ */ +:where(acms-isolated-preview-root) > :where(iframe, video, object, embed) { + width: 100%; + max-width: 100%; +} diff --git a/themes/develop/tailwind.config.js b/themes/develop/tailwind.config.js index bb76861..fc69a20 100644 --- a/themes/develop/tailwind.config.js +++ b/themes/develop/tailwind.config.js @@ -235,7 +235,8 @@ module.exports = { borderRadius: '0', }, // md 以上でカードを横並びにする指定は src/style/editor.css にある。 - // Why not ここに @media のキーで書かないか: typography は @media のキーもセレクタとして :where() で包み、ルールごと無効になるため + // Why not ここに @media のキーで書かないか: typography はキーをすべてセレクタとして :where() で包み（@media も区別しない）、 + // ルールごと無効になるため。typography の画面幅での切り替えは md:prose-lg のようなクラスのバリアントで行う設計になっている "[class*='column-embed'] .acms-embed-link:hover, [data-type='embedBlock'] .embed-block-card:hover": { opacity: '0.7', }, From fc56ee3ab04e087ddc1eadb2f5a5f2ea160c7156 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E4=BA=95=20=E9=99=B8=E7=99=BB?= Date: Mon, 28 Sep 2026 10:27:27 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E6=9C=AC=E6=96=87=E3=81=AE=E5=9F=8B?= =?UTF-8?q?=E3=82=81=E8=BE=BC=E3=81=BF=E3=82=B3=E3=83=B3=E3=83=86=E3=83=B3?= =?UTF-8?q?=E3=83=84=E3=81=A8=E5=9F=8B=E3=82=81=E8=BE=BC=E3=81=BF=E3=83=96?= =?UTF-8?q?=E3=83=AD=E3=83=83=E3=82=AF=E3=81=AE=E9=85=8D=E7=BD=AE=E3=82=92?= =?UTF-8?q?=E5=85=AC=E9=96=8B=E5=81=B4=E3=83=BB=E3=83=97=E3=83=AC=E3=83=93?= =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=81=A7=E6=8F=83=E3=81=88=E3=82=8B=EF=BC=88?= =?UTF-8?q?CMS-7912=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit プレビューで段落の中などに置いた iframe 等が本文幅からはみ出していたため本文幅に収め、 中央・右揃えの埋め込みブロックでは狭い埋め込み（X のウィジェット等）も配置の向きへ寄せる。 OGP カードのキーボード操作時のフォーカスの枠をカード全体に出す。 Co-Authored-By: Claude Opus 5.5 --- themes/develop/admin.html | 7 ++-- themes/develop/src/js/admin.js | 2 +- themes/develop/src/style/editor.css | 14 +++----- themes/develop/tailwind.config.js | 55 +++++++++++++++++++---------- 4 files changed, 43 insertions(+), 35 deletions(-) diff --git a/themes/develop/admin.html b/themes/develop/admin.html index 0ed5105..eb79765 100644 --- a/themes/develop/admin.html +++ b/themes/develop/admin.html @@ -1,9 +1,7 @@ @extends("/_layouts/admin.html") @section("editor-css") - + @vite("src/style/editor.css", { "linkTagAttributes": { "data-block-editor-stylesheet": true @@ -16,8 +14,7 @@ diff --git a/themes/develop/src/js/admin.js b/themes/develop/src/js/admin.js index 6c15b99..209ff84 100644 --- a/themes/develop/src/js/admin.js +++ b/themes/develop/src/js/admin.js @@ -1,3 +1,3 @@ /** - * スタイル（editor.css）は admin.html の editor-css で読み込む + * 管理画面用のJavaScript */ diff --git a/themes/develop/src/style/editor.css b/themes/develop/src/style/editor.css index 424115c..13ae9e1 100644 --- a/themes/develop/src/style/editor.css +++ b/themes/develop/src/style/editor.css @@ -12,11 +12,7 @@ @config '../../tailwind.config.js'; /* ------------------------------ - 埋め込みカード（旧埋め込みユニット・埋め込みブロック共通）：md 以上で横並びにする - Why not tailwind.config.js の typography に書かないか: typography の css 設定はキーをすべてセレクタとして - :where() で包む（@media のキーも区別しない）ため、ルールごと無効なセレクタになる。typography 自体は - 画面幅での切り替えを md:prose-lg のようなクラスのバリアントで行う設計で、設定の中にメディアクエリを持たない - （それ以外の指定は typography 側にある） + 埋め込みカード（埋め込みユニット・埋め込みブロック共通）：md 以上で横並びにする ------------------------------ */ /* stylelint-disable-next-line media-query-no-invalid */ @media (width >= theme(--breakpoint-md)) { @@ -34,7 +30,6 @@ object-fit: cover; } - /* 埋め込みブロックは画像を包む要素が無いので、画像自身が旧ユニットの入れ物と同じ幅を持つ */ .prose :where([data-type='embedBlock'] .embed-block-card > img) { flex: none; width: calc(100% / 3); @@ -47,10 +42,9 @@ } /* ------------------------------ - ブロックエディターのプレビュー（隔離 iframe）では、HTML ブロックの中身が独自要素 acms-isolated-preview-root の直下に置かれる。 - 公開側（tailwind.config.js の HTML ブロックの指定）と同じく本文幅いっぱいに広げる（余白はプレビュー枠の中に空きができるため付けない） + 本文の埋め込みコンテンツ（ブロックエディターのプレビュー用） ------------------------------ */ -:where(acms-isolated-preview-root) > :where(iframe, video, object, embed) { - width: 100%; +:where(acms-isolated-preview-root) :where(iframe, video, object, embed) { + box-sizing: border-box; /* 枠線を含めて本文幅に収める */ max-width: 100%; } diff --git a/themes/develop/tailwind.config.js b/themes/develop/tailwind.config.js index fc69a20..f556227 100644 --- a/themes/develop/tailwind.config.js +++ b/themes/develop/tailwind.config.js @@ -209,8 +209,6 @@ module.exports = { marginTop: em(32, 16), marginBottom: em(32, 16), }, - // 埋め込みブロックは旧ユニットと並べて宣言を共有する。管理画面のカードは embed-block-card-* しか持たないため - // 公開側と共通のこちらのクラスで指定する。カード全体ではなくタイトルだけが a なので、リンク領域をカード全体へ広げる "[class*='column-embed'] .acms-embed-link, [data-type='embedBlock'] .embed-block-card": { position: 'relative', overflow: 'hidden', @@ -226,17 +224,14 @@ module.exports = { textDecoration: 'none', transitionProperty: 'opacity', }, - // 埋め込みブロックの画像。typography のセレクタは詳細度が揃うため、md の幅指定より前に置く。 - // figure 内の画像の角丸（figure img）がカードの画像にまで当たらないよう打ち消す + // カードの画像の角丸を打ち消す "[data-type='embedBlock'] .embed-block-card > img": { display: 'block', width: '100%', margin: '0', borderRadius: '0', }, - // md 以上でカードを横並びにする指定は src/style/editor.css にある。 - // Why not ここに @media のキーで書かないか: typography はキーをすべてセレクタとして :where() で包み（@media も区別しない）、 - // ルールごと無効になるため。typography の画面幅での切り替えは md:prose-lg のようなクラスのバリアントで行う設計になっている + // md 以上でカードを横並びにする指定は src/style/editor.css にある "[class*='column-embed'] .acms-embed-link:hover, [data-type='embedBlock'] .embed-block-card:hover": { opacity: '0.7', }, @@ -256,11 +251,33 @@ module.exports = { position: 'absolute', inset: '0', }, - // 配置用の外側 div が余白を持つため、figure の余白は打ち消す + // キーボード操作時のフォーカスの枠をカード全体に出す + "[data-type='embedBlock'] a.embed-block-card-title:focus-visible": { + outline: 'none', + }, + "[data-type='embedBlock'] .embed-block-card:has(a.embed-block-card-title:focus-visible)": { + outline: 'auto 1px', + outlineColor: '-webkit-focus-ring-color', + outlineOffset: '1px', + }, + // 埋め込みブロックの figure の余白を打ち消す "[data-type='embedBlock'] > figure": { marginTop: '0', marginBottom: '0', }, + // 中央・右揃えでは、figure（表示サイズまで広がる）より狭い埋め込み（X のウィジェット等）も同じ向きに寄せる。 + // Why not 子要素に margin-inline: auto: Instagram 等は margin をインラインで指定しており上書きできない + ":where([data-type='embedBlock'][data-align='center'], [data-type='embedBlock'][data-align='right']) [data-embed-content]": + { + display: 'flex', + flexDirection: 'column', + }, + ":where([data-type='embedBlock'][data-align='center']) [data-embed-content]": { + alignItems: 'center', + }, + ":where([data-type='embedBlock'][data-align='right']) [data-embed-content]": { + alignItems: 'flex-end', + }, "[class*='column-embed'] .acms-embed-link-content, [data-type='embedBlock'] .embed-block-card-content": { display: 'flex', flexDirection: 'column', @@ -311,36 +328,36 @@ module.exports = { }, // ------------------------------ - // グループ（複数ブロックをまとめるラッパー） + // グループ // ------------------------------ - // 中の最後の子の下余白を打ち消すため、グループ自身が他のブロックと同じ余白を持つ "[data-type='group']": { boxSizing: 'border-box', marginTop: em(32, 16), marginBottom: em(32, 16), }, - // 先頭・末尾の子ブロックの余白を打ち消し、グループの枠と中身が二重に空かないようにする + // 先頭・末尾の子ブロックの余白を打ち消す "[data-type='group'] > :first-child": { marginTop: '0', }, "[data-type='group'] > :last-child": { marginBottom: '0', }, - // カラーパレットで背景色だけ付けたグループでも、文字が背景の端に貼り付かないようにする + // カラーパレットで背景色を付けたグループの内側の余白 "[data-type='group'][style*='background-color']": { padding: em(24, 16), }, // ------------------------------ - // HTML ブロック + // 本文の埋め込みコンテンツ（iframe・video・object・embed） // ------------------------------ - // ラッパーを持たず、編集者が書いた iframe 等がブロックの並びに直接置かれるため、並びの直下にあるものだけに余白を付ける。 - // Why not iframe 全般に付けないか: 埋め込みブロックの iframe は外側の .embed-block が余白を持つため、二重に空いてしまう - ":is(.column-block-editor, [data-type='group'], [data-type='column']) > :is(iframe, video, object, embed)": + // 本文より広いときは幅を縮める + 'iframe, video, object, embed': { + boxSizing: 'border-box', // 枠線を含めて本文幅に収める + maxWidth: '100%', + }, + // 前後の余白（外枠が余白を持つ埋め込みブロック・配置（align-*）の中は除く） + ":is(iframe, video, object, embed):not(:is([data-type='embedBlock'], [class^='align-'], [class*=' align-']) *)": { - // Google マップ等の埋め込みコードは width="600" のような固定幅を持つことが多いため、本文幅いっぱいに広げる（高さは属性の値のまま） - width: '100%', - maxWidth: '100%', marginTop: em(32, 16), marginBottom: em(32, 16), },