webfactoryjp
フォーラムへの返信
-
投稿
-
ありがとうございます
無事に目的通りの表示にすることが出来ました
theme.json
{ "$schema": "https://schemas.wp.org/trunk/theme.json", "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', sans-serif", "fontStyle": "normal", "fontWeight": "400", "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-400-normal.woff2"] }, { "fontFamily": "'Noto Sans JP', sans-serif", "fontStyle": "normal", "fontWeight": "100", "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-100-normal.woff2"] }, { "fontFamily": "'Noto Sans JP', sans-serif", "fontStyle": "normal", "fontWeight": "600", "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-600-normal.woff2"] }, { "fontFamily": "'Noto Sans JP', sans-serif", "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" ] }] } ] } }, "styles": { "blocks": { "core/paragraph": { "color": { "text": "var(--wp--preset--color--primary)" }, "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--playfair-display); }" } } } }halloween.json
{ "$schema": "https://schemas.wp.org/trunk/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": { "core/paragraph": { "color": { "text": "var(--wp--preset--color--primary)" }, "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--henny-penny) !important; }" } } } }当該のパターンブロック『見出し_背景手書き英語_中央_プライマリー』の追加CSSに設定されている既存の『has-nothing-you-could-do-font-family』と入れ替えて、
上記theme.jsonとhalloween.jsonをアップロード。
キャッシュを解除してスタイルをリセット。
ハロウィンのスタイルを選択すると当該部分のフォントが切り替わったことを確認しました。
さて、デフォルトに戻るのか…ですが、
デフォルトを押してもフォントはplayfairdisplayにならず、hennypennyのまま…一瞬ダメかと思いましたが、「そうだリセットだ」と思い出し、リセットを押下したら、見事デフォルトがplayfairdisplayに戻りましたここ数日間、jsonファイルたちと格闘し、生成AIにコード書かせたり試行錯誤しましたが、最後の砦のベクトルフォーラムに助けられました
このhalloween.jsonファイルを基本モデルにして、クリスマス用、お正月用、春用、夏用…と挑戦していこうと思います
対馬様、Y.INABA様ありがとうございました。
すみません
私の理解が足りていないせいで何度も質問をしてしまいますがthema.jsonには
"blocks"の定義はありません(halloween.jsonにはあります。ハロウィン用のフォントを定義するため)
ですので、以下は不要になりますので、以下と差し替えでお願いします。
とは、halloween.jsonの
"blocks"でしょうか？
入れ替えてしまうとハロウィンスタイルでもPlayfair Displayが表示されてしまう気がしますが、わたし理解できていませんでしょうか？結構混乱してますw
バリエーションに応じてフォントの入替をご希望とのことなので、どうしてもそれ以外のクラスを追記、登録いただく必要がございます。
ということはボタン一つでフォントもバッと変わるっていうのはできない。追加classを書き換えなければ実現できないという理解でいいでしょうか？
追記で問題ありません。
念のため、記載いただくのはstylesの括弧内にblocksを作成し、その中に更にcore/paragraphを作成いただく形になるかと思います。こちらについてもhalloween.jsonにはもともと
"styles"がありその中に"blocks"は既に記載があります(ハロウィンのフォント指定の内容)もう一度確認お願いできますでしょうか
本当にすみません早速のご指導ありがとうございます
作業前の質問ですお手数ですがクラス名 has-background-text-font-family （一例）などに変更いただき、 theme.jsonについて以下に再度変更いただいてもよろしいでしょうか。
こちらはtheme.jsonの
"styles"の中に"color""elements"と同階層に"blocks"をつくりその中に入れるでいいでしょうか？加えて、halloween.json 側に以下の設定の追記をお願いします（blocks等の親設定は省略していますが、こちらも漏れなく追記をお願いします）。
こちらは入れ替えではなく「追記」でよろしいでしょうか？
お忙しいところ恐れ入りますが、再度ご教授頂けると助かります
1.に関しましてはわたしがcodeで囲まなかったせいでした。「
"」で囲ってあります2.
"$schema"は、"$schema": "https://schemas.wp.org/trunk/theme.json",に変更しました3.
var(--wp--preset--color--bg-primary)ハイフンは最後以外は2つこちらも見直し修正しました4.H2のCSSのところは、対馬様のご指摘も含め
"blocks": { "core/paragraph": { "color": { "text": "var(--wp--preset--color--primary)" }, "css": "&.has-henny-penny-font-family { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--henny-penny) !important; }" } }にしました
5.
has-nothing-you-could-do-font-familyは削除してhas-henny-penny-font-familyを高度な設定の追加CSSクラスで置き替えました結果ですが、
無事にhennypennyがH2の見出しの後ろに表示されるようになりました(^^)/ですが…デフォルトスタイルもH2の見出しの後ろがhennypennyに…
halloween.jsonのスタイルを選択したときだけにhennypennyに置き換わり
デフォルトに戻した時はデフォルトで設定しているフォントPlayfair Displayに戻したいのですが今回ご教授頂いたjsonコードにすると、デフォルトもハロウィンもどちらもhennypennyです
どこがいけないのでしょうか
お世話になっております。
回答ありがとうございます。{
“$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です
色は変わりますが、フォントが切り替わらずです。
スタイルリセット、キャッシュのクリアは行っております。
お世話になっております
検証いただきありがとうございますパレットの色を変更したら、ハイライトの背景色が設定されている箇所を
すべて再設定する作業が発生する可能性があるってことになりますね。はい、そのようになりますので現状これではスタイルの変更ができない。できないというより不完全で気にしなければいいのかもしれませんが、なんかキモチワルイ感じがします
お世話になっております
ご教授くださいまして誠にありがとうございます
こちらの案内の通りに操作いたしましたところ、問題の部分(背景が透明・背景がしたまで伸びていない)は解決しましたが、実機(iPhone16)で確認したところ、オーバーレーの背景部分を指で上下にスワイプするとオーバーレイの背景がビヨーンと動き、隠れていなければならないコンテンツが見え隠れする状態です。PCブラウザでみるとそうはなりません。スマホの実機で確認してみていただけますでしょうか。当方の固有の問題かわかりません。うなこ様
お世話になります。
詳しくわかりやすく手順、解説をいただき大変ありがとうございました。＞これで、左ペインには元の「ヘッダー メニュー」、トグルボタンで展開されるメニューには「ヘッダー メニュー (コピー)」が表示されるようになるはずです。
このように設定することができました。
ヘッダーメニューをPC左ペイン用とスマホオーバーレイ表示用とで分けるということだったのですね
こちらの説明で理解できました。大変ありがとうございました。Y.INABA様
お世話になります。
ナビゲーションオーバーレイ」テンプレートのエリアの実装を待ちたいと思います。メニューの操作のしやすさ、しにくさは離脱率に大きく関係してくると思いますので早期実装を切に願います対馬様をはじめ、うなこ様、Y.INABA様
大変助かりました。今回は、カスタムのきっかけを作っていただいた対馬様にベストアンサーを。
みなさま、大変ありがとうございました。
感謝です。お世話になっております
＞アップされた画像を見ると、
＞SmaVeksive の子テーマを作っているように思いますが、
＞私はブロックテーマの子テーマの挙動については詳しくないので、
＞どなたかわかる方の回答をお待ちください。ご指摘の通り子テーマを作ってカスタム投稿のカスタマイズを行っております。
＞X-T9 で子テーマを使ったときに挙動が把握できず扱いづらかった
いままでLightningをカスタマイズしてきましたが、ワードプレス.1にバージョンアップした際に、思い切ってブロックテーマのテーマを触っている次第です。対馬さんでさえ「使いづらかった」と言われるのであれば、わたし程度ではもうお手上げです。
Smaveksiveではブロックテーマの利点であるボタンひとつでカラースタイルを一新できる機能がございますが、インストール直後のスタイル変更でもトグルボタンは同色化してしまいます。運営の方、お手隙の際に確認していただければと思います。
対馬様、ご教授に心から感謝申し上げます。
ヘッダーメニュー(コピー)に設定されていると思うのですが、何がいけないのでしょう
ヘッダーメニュー · テンプレートパーツ
ではなく
wp-custom-part · テンプレートパーツ
になっているのがいけないのでしょうかそもそもパターン＞テンプレートパーツ一覧の中には10あり
wp-custom-part
footer
smaponsive-blank
sidebar2
sidebar
breadscram
Loop Archive
Header
Header Loop Mobile Navi
smaponsive-initial-header-footerとなり日本語名称「ヘッダーメニュー」はございませんでしたが、名称がちがうだけでロゴとトグルメニューがスクショでみてとれましたので当該ファイルを編集した次第です
お世話になっております。
＞ボタンの大きさを設定する画面は存在せず、以下の例のような CSS を記述する必要があります。
こちらにつきましては、理解いたしました。
オリジナルですと×ボタンが小さく、且つ最上部上端に位置しているためエンドユーザーにわかりにくいように思えましたので…。＞どう設定したら「電話番号」や「ロゴ」を変更できる設定画面にいけるでしょうか。
こちらにつきまして、ご指導いただいた設定を試してみましたが、添付画像のようにPCの左ペインに出てきてしまいます。CSSで非表示にするしかないでしょうか？
対馬様
ありがとうございます＞Q. 背景色を変更できるでしょうか
＞
＞[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー] と
＞進んで、サブメニューとオーバーレイ背景 を変更します。（添付画像 smaveksive-1 を参照）こちらはご教授いただいたとおりに変更することができました
＞Q. ロゴや電話番号、SNS情報なども設置したい
＞[ダッシュボード] → [外観] → [エディター] → [ナビゲーション] → [ヘッダーメニュー] と進んで、
＞ヘッダーメニューを複製します。（添付画像 smaveksive-2 を参照）
＞[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー]
＞と進んで、メニューを複製したものに切り替えます。（添付画像 smaveksive-3 を参照）複製したもの「ヘッダー メニュー(コピー)」に設定することはできましたが、この先、縦型メニューのコンテンツはどう設定したら「電話番号」や「ロゴ」「×閉じるボタンの大きさ」を変更できる設定画面にいけるでしょうか。
ヘッダーメニュー(コピー)の三本戦をクリックすると縦型メニューの画面にはなります。そこの画面で＋ボタンからロゴを選択し手保存するとPC画面で表示される左側のメニューにもロゴが表示されてしまいます。×ボタンはクリックすると閉じてしまいます。お忙しいところ恐れ入りますがお教えいただければと思います。
本当にありがとうございます石川様
ご回答ありがとうございます。最終的には
プラグインACFを組んで
任意の画像をメディアから選択したものを読ませたいのです。
最低限必要な操作ができる程度のユーザーさんでも
メニューから画像を選択するだけでスライダーに組めるようにしたいのです。VK Blocks はわかっている人からしたらとても使い勝手の良いツールですが、エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり、その都度修正してあげなくてはなりません。
エンドユーザーには最低限出来る事だけを公開しておきたいのです。
最終的には下記のようなコードでACFで設定した画像を呼び出したいと考えています。
<div class="swiper"> <div class="swiper-wrapper"> <?php if( have_rows('banner_top', 'option') ): ?> <?php while( have_rows('banner_top', 'option') ): the_row(); // vars $image = get_sub_field('banner_top_img', 'option'); $link = get_sub_field('banner_top_url', 'option'); ?> <div class="swiper-slide> <?php if( $link ): ?> <a href="<?php echo $link; ?>"> <?php endif; ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" /> <?php if( $link ): ?> </a> <?php endif; ?> </div> <?php endwhile; ?> <?php endif; ?> </div> </div>
