SmaVeksiveサンプル工務店のテーマにおいてスタイルバリエーション.jsonファイルでのフォントの指定について

このトピックには3件の返信、2人の参加者があり、最後にY.INABAにより7分前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2026年10月14日 7:58 AM #130757

webfactoryjp
参加者

■ WordPress のバージョン
バージョン 7.1.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
その他

■ プラグインの種類・バージョン
VK FullSite Installer　プラグインインストールの初期状態

■ 期待する動作
スタイルバリエーション（自作の styles/halloween.json）を切り替えた際に、「見出し (VK)」ブロックのH2およびその直上にある英語サブテキストのフォントを、連動して別フォント（Google FontsのHenny Penny）に切り替えたいと考えています。全体の色を自作の styles/halloween.jsonスタイルボタンで変更することはできています。

■ 自分で試した事
子テーマの theme.json の settings.typography.fontFamilies に、ローカルアセットとしてフォントファイル（HennyPenny-Regular.ttf）を登録しました。

“blocks”: {
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
}

■ 症状が発生するブラウザ
chrome

■ 実際の症状
styles/halloween.json の styles.blocks[“vk-blocks/heading”] 内で、登録したフォント変数（var(–wp–preset–font-family–henny-penny)）を指定していますが、フォントが切り替わりません。

■ その他特記事項
スタイル切り替えと同時に「見出し（VK）ブロック」のサブテキストフォントをきれいに連動させるには、theme.json（または halloween.json）の styles 内に具体的にどのような階層・プロパティで記述するのが正しい仕様でしょうか？

工務店における見出しブロック指定名です

添付画像の[CHECK見学会でわかること]のCHECKの部分です

2026年10月14日 9:05 AM #130758

Y.INABA
参加者

お手数ですが、以下ご確認いただけますでしょうか。

1. 記載いただいたtheme.jsonの書式は正しいでしょうか。
　コンマなどは抜けていませんか？　余計な括弧やコンマなどは入っていたりはしませんか？
　恐れ入りますが、子テーマ内のtheme.jsonをご教示いただいてもよろしいでしょうか？

2. 書式が正しい場合でも、一度どこかの画面でスタイルを設定済の場合、theme.jsonよりも保存済の設定が優先されるため「スタイルをリセット」を押下するまでは切り替わりません。
　「スタイルをリセット」操作はお試しでいらっしゃいますでしょうか？
※一度「スタイルをリセット」をする前に、事前にバックアップの取得をお願いします。
※こちらはWordPress本体側の仕様になります。テーマ側で制御できる部分ではないので、ご容赦くださいませ。

▼ご参考
https://ja.wordpress.org/support/topic/theme-json%e3%81%ae%e4%b8%80%e9%83%a8%e3%81%8c%e5%8f%8d%e6%98%a0%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84/

2026年10月14日 9:27 AM #130759

webfactoryjp
参加者

お世話になっております。
回答ありがとうございます。

{
“$schema”: “https://wp.org”,
“version”: 3,
“settings”: {
“color”: {
“palette”: [
{ “name”: “Primary”, “slug”: “primary”, “color”: “#0ABAB5” },
{ “name”: “Secondary”, “slug”: “secondary”, “color”: “#4DC9C2” },
{ “name”: “Tertiary”, “slug”: “tertiary”, “color”: “#81D8D2” },
{ “name”: “Quaternary”, “slug”: “quaternary”, “color”: “#C6EFEB” },
{ “name”: “Primary Hover”, “slug”: “primary-hover”, “color”: “#099E9E” },
{ “name”: “Background Primary”, “slug”: “bg-primary”, “color”: “#F1FFFB” },
{ “name”: “Background Secondary”, “slug”: “bg-secondary”, “color”: “#f6ebe0” },
{ “name”: “Background Tertiary”, “slug”: “bg-tertiary”, “color”: “#fff” },
{ “name”: “Text Normal”, “slug”: “text-normal”, “color”: “#333” },
{ “name”: “Text Secondary”, “slug”: “text-secondary”, “color”: “rgba(0,0,0,0.5)” },
{ “name”: “Border Normal”, “slug”: “border-normal”, “color”: “rgba(0,0,0,0.1)” },
{ “name”: “Background Dark”, “slug”: “bg-dark”, “color”: “#222” },
{ “name”: “Background Dark Transparent”, “slug”: “bg-dark-transparent”, “color”: “rgba(0,0,0,0.05)” },
{ “name”: “Text Normal Dark Background”, “slug”: “text-normal-darkbg”, “color”: “rgba(255,255,255,0.7)” },
{ “name”: “Text Secondary Dark Background”, “slug”: “text-secondary-darkbg”, “color”: “rgba(255,255,255,0.6)” },
{ “name”: “Border Normal Dark Background”, “slug”: “border-normal-darkbg”, “color”: “rgba(255,255,255,0.1)” },
{ “name”: “Tiffany 001”, “slug”: “tiffany-color-001”, “color”: “#5DC1CF” },
{ “name”: “Tiffany 002”, “slug”: “tiffany-color-002”, “color”: “#7EC9C1” },
{ “name”: “Tiffany 003”, “slug”: “tiffany-color-003”, “color”: “#81CAC4” },
{ “name”: “Attend”, “slug”: “attend-color”, “color”: “#5C6BC0” },
{ “name”: “Soku”, “slug”: “soku-color”, “color”: “#0D3B66” },
{ “name”: “Room”, “slug”: “room-color”, “color”: “#26A69A” },
{ “name”: “Media”, “slug”: “media-color”, “color”: “#3163C8” }
]
},
“typography”: {
“fontFamilies”: [
{
“name”: “System Font”,
“slug”: “system-font”,
“fontFamily”: “-apple-system, BlinkMacSystemFont, \”Segoe UI\”, sans-serif”
},
{
“name”: “Nothing You Could Do”,
“slug”: “nothing-you-could-do”,
“fontFamily”: “\”Nothing You Could Do\”, cursive”,
“fontFace”: [
{
“fontFamily”: “Nothing You Could Do”,
“fontStyle”: “normal”,
“fontWeight”: “400”,
“src”: [ “file:./assets/fonts/nothing-you-could-do/nothing-you-could-do-400-normal.woff2” ]
}
]
},
{
“name”: “Noto Sans JP”,
“slug”: “noto-sans-jp”,
“fontFamily”: “\”Noto Sans JP\”, sans-serif”,
“fontFace”: [
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-400-normal.woff2” ] },
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “100”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-100-normal.woff2” ] },
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “600”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-600-normal.woff2” ] },
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “900”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-900-normal.woff2” ] }
]
},
{
“name”: “Anton”,
“slug”: “anton”,
“fontFamily”: “Anton, sans-serif”,
“fontFace”: [
{ “fontFamily”: “Anton”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/anton/anton-400-normal.woff2” ] }
]
},
{
“name”: “Zen Old Mincho”,
“slug”: “zen-old-mincho”,
“fontFamily”: “\”Zen Old Mincho\”, serif”,
“fontFace”: [
{ “fontFamily”: “Zen Old Mincho”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/zen-old-mincho/zen-old-mincho-400-normal.woff2” ] }
]
},
{
“name”: “Shippori Mincho”,
“slug”: “shippori-mincho”,
“fontFamily”: “\”Shippori Mincho\”, serif”,
“fontFace”: [
{ “fontFamily”: “Shippori Mincho”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/shippori-mincho/shippori-mincho-400-normal.woff2” ] }
]
},
{
“name”: “LINE Seed JP”,
“slug”: “line-seed-jp”,
“fontFamily”: “\”LINE Seed JP\”, sans-serif”,
“fontFace”: [
{ “fontFamily”: “LINE Seed JP”, “fontStyle”: “normal”, “fontWeight”: “700”, “src”: [ “file:./assets/fonts/line-seed-jp/line-seed-jp-700-normal.woff2” ] }
]
},
{
“name”: “Playfair Display”,
“slug”: “playfair-display”,
“fontFamily”: “\”Playfair Display\”, serif”,
“fontFace”: [
{ “fontFamily”: “Playfair Display”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/playfair-display/playfair-display-400-normal.woff2” ] }
]
},
{
“name”: “Source Serif Pro”,
“slug”: “source-serif-pro”,
“fontFamily”: “\”Source Serif Pro\”, serif”,
“fontFace”: [
{ “fontFamily”: “Source Serif Pro”, “fontStyle”: “normal”, “fontWeight”: “100 900”, “src”: [ “file:./assets/fonts/source-serif-pro/source-serif-pro-variable.woff2” ] },
{ “fontFamily”: “Source Serif Pro”, “fontStyle”: “italic”, “fontWeight”: “100 900”, “src”: [ “file:./assets/fonts/source-serif-pro/source-serif-pro-italic-variable.woff2” ] }
]
},
{
“name”: “Henny Penny”,
“slug”: “henny-penny”,
“fontFamily”: “\”Henny Penny\”, system-ui”,
“fontFace”: [
{
“fontFamily”: “Henny Penny”,
“fontWeight”: “400”,
“fontStyle”: “normal”,
“src”: [
“file:./assets/fonts/henny-penny/HennyPenny-Regular.ttf”
]
}
]
}
]
}
}
}

上記はtheme.json

{
“$schema”: “https://schemas.wp.org/wp/7.1/theme.json”,
“version”: 3,
“title”: “ハロウィン”,
“settings”: {
“color”: {
“palette”: [
{
“name”: “Primary”,
“slug”: “primary”,
“color”: “#F28C28”
},
{
“name”: “Secondary”,
“slug”: “secondary”,
“color”: “#7541A8”
},
{
“name”: “Tertiary”,
“slug”: “tertiary”,
“color”: “#292033”
},
{
“name”: “Quaternary”,
“slug”: “quaternary”,
“color”: “#FFF4E5”
},
{
“name”: “Primary Hover”,
“slug”: “primary-hover”,
“color”: “#D96B0B”
},
{
“name”: “Background Primary”,
“slug”: “bg-primary”,
“color”: “#FFF4E5”
},
{
“name”: “Background Secondary”,
“slug”: “bg-secondary”,
“color”: “#EEE4F5”
},
{
“name”: “Background Tertiary”,
“slug”: “bg-tertiary”,
“color”: “#FFFFFF”
},
{
“name”: “Text Normal”,
“slug”: “text-normal”,
“color”: “#292033”
},
{
“name”: “Text Secondary”,
“slug”: “text-secondary”,
“color”: “rgba(0,0,0,0.5)”
},
{
“name”: “Border Normal”,
“slug”: “border-normal”,
“color”: “rgba(0,0,0,0.1)”
},
{
“name”: “Background Dark”,
“slug”: “bg-dark”,
“color”: “#292033”
},
{
“name”: “Background Dark Transparent”,
“slug”: “bg-dark-transparent”,
“color”: “rgba(0,0,0,0.05)”
},
{
“name”: “Text Normal Dark Background”,
“slug”: “text-normal-darkbg”,
“color”: “rgba(255,255,255,0.7)”
},
{
“name”: “Text Secondary Dark Background”,
“slug”: “text-secondary-darkbg”,
“color”: “rgba(255,255,255,0.6)”
},
{
“name”: “Border Normal Dark Background”,
“slug”: “border-normal-darkbg”,
“color”: “rgba(255,255,255,0.1)”
},
{
“name”: “Tiffany 001”,
“slug”: “tiffany-color-001”,
“color”: “#5DC1CF”
},
{
“name”: “Tiffany 002”,
“slug”: “tiffany-color-002”,
“color”: “#7EC9C1”
},
{
“name”: “Tiffany 003”,
“slug”: “tiffany-color-003”,
“color”: “#81CAC4”
},
{
“name”: “Attend”,
“slug”: “attend-color”,
“color”: “#5C6BC0”
},
{
“name”: “Soku”,
“slug”: “soku-color”,
“color”: “#0D3B66”
},
{
“name”: “Room”,
“slug”: “room-color”,
“color”: “#26A69A”
},
{
“name”: “Media”,
“slug”: “media-color”,
“color”: “#3163C8”
},
{
“name”: “Purple”,
“slug”: “purple”,
“color”: “#7541A8”
},
{
“name”: “Cream”,
“slug”: “cream”,
“color”: “#FFF4E5”
},
{
“name”: “Gold”,
“slug”: “gold”,
“color”: “#A8C940”
}
]
}
},
“styles”: {
“color”: {
“background”: “var(–wp–preset–color–bg-primary)”,
“text”: “var(–wp–preset–color–text-normal)”
},
“elements”: {
“link”: {
“color”: {
“text”: “var(–wp–preset–color–primary-hover)”
}
},
“button”: {
“color”: {
“text”: “#FFFFFF”,
“background”: “var(–wp–preset–color–primary)”
},
“border”: {
“radius”: “8px”
}
}
},
“blocks”: {
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
}
}
}

上記がhalloween.jsonです

色は変わりますが、フォントが切り替わらずです。

スタイルリセット、キャッシュのクリアは行っております。

2026年10月14日 9:50 AM #130760
Y.INABA
参加者
ご教示いただきありがとうございます。

ざっと見るだけでも目立つ誤りが4点ほどありますので、修正いただけますでしょうか？

1. 引用符の記号が全体的に間違っています（コードで囲わないと自動変換されるのかもしれませんが）。半角のダブルクオーテーションに全て変更してください。
▼例：“blocks” → "blocks"、“vk-blocks/heading” → "vk-blocks/heading" に修正をお願いします。
```
“blocks”: {
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
}
```
フォントファミリーの箇所は以下のように書き換えると良いかもです。
"fontFamily": "'Noto Sans JP', sans-serif"

2. theme.json側のschemeのURLも現在の書式にあったものではありませんので、以下修正してください。
"$schema": "https://wp.org"

3. var(–wp–preset–color–bg-primary) ではなく var(--wp--preset--color--bg-primary) です。（ハイフンは2つです）
　ハイフンの数が誤っている箇所が多いですので、修正をお願いします。

4. H2のCSSの箇所などは以下のとおり修正すると良いかと思います。
```
"vk-blocks/heading": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "& h2.vk_heading_title { font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
```
投稿者

投稿