VK Patternsの１ページテンプレートで「.vk_block-margin-lg–height { height: var(–vk-margin-lg); }」が効かない件
VK Patternsの１ページテンプレートで「.vk_block-margin-lg–height { height: var(–vk-margin-lg); }」が効かない件
- このトピックには5件の返信、3人の参加者があり、最後に
により5時間、 49分前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.7.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 )■ テーマのバージョン
15.29.3■ スキンの種類
Origin III■ プラグインの種類・バージョン
添付のとおり■ 期待する動作
サンプルサイトと同じように指定された場所で「height」がでるようにして、レイアウト崩れがないようにしたいです。■ 自分で試した事
お世話になっております。以前、別に、ご質問させていただいた件ですが、その後、自分で色々と調べましたが、解決できませせんでした。
申し訳ありませんが、先達の方でご見識のある方がいらっしゃいましたら、是非お教えいただけませんでしょうか？
＜実施内容＞
VK Patterns の camp（
https://patterns.vektor-inc.co.jp/vk-patterns/campsite_top_tourism/） のパターンをシングルサイトでコピペしました。実は、他のテンプレートでも同じ現象が出るのですが、この「高さ」.「vk_block-margin-lg–height { height: var(–vk-margin-lg); }（height）」が効きません。
プラグインは添付のとおり最新のものを入れており、特段エラーはでていないように思います。
AIにも聞いて、確認しましたが、わからない状況でした。キャッシュプラグインなどもいれていないと思います。
テストした内容は以下のとおりです
・ロリポップのWAFを外してみた。
・シークレットモードでも確認してみた。
・該当するCSSを見に行きましたが、CSS自体は rootというもので実際の指定と変数のようなものでで指定されたCSSのソースコードはありました。
・BK-ブロックの設定画面でみて、該当するCSSを入れてみましたが、変わりませんでした。（添付）お忙しいところ恐縮ですが、何卒宜しくお願い致します。
■ 症状が発生するブラウザ
chrome等■ 実際の症状
添付画像のとおり、
セクションの間などのheightが有効にならない。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
私の環境では再現しません。
コピペした際にどうしてもテンプレのとおりに行かないのであれば、新たにレスポンシブスペーサーを入れて設定し直すのではダメですか？
テンプレにこだわらなくてもよいのではないかと思うのですが･･･。
―
それと、老婆心から、思うところを申し上げますと･･･
前回のご質問の際にお伝えしましたとおり、一度プロに学ばれたほうがよいように思います。
基本的な設定が間違っていたら、ここでの質問 ⇔ 回答だけでは根本的な解決にならず、ベクトル様のリソースを食いすぎているように感じております。
VK Blocks の共有余白設定にカスタム値を設定していることが原因です。
上記ページを参考にして設定されたのだと思いますが、
このページの「カスタム値を利用する主なケース」の説明の先頭に
「Lightningをご利用の場合は、設定は必要ありません。」と書かれています。カスタム値に
var(--wp--custom--spacing--large)を指定した場合、
テーマ側で--wp--custom--spacing--largeの値が設定されていないと正常に動作しません。Lightning はそのような設定を持たないので、スペーサーの高さを指定できず、
余白なしになってしまった、という状態です。対馬 俊彦 様
お忙しい中、お教えいただき、大変ありがとうございました。
管理画面で、「Lightningをご利用の場合は、設定の必要ありません。主に…（略）」の文言は出てこなかったのですが、その画面内内のカスタム値を全部外したら、固定ページを表示させて、chromeの「検証」で、見ると、「.vk_block-margin-lg–height {height: var(–vk-margin-lg);」が効くようになりました。
管理画面で、不要な（有効でない）cssのclass指定があった為にそれが邪魔となり正規のcssがあたらなかったということで理解しましたが問題ないでしょうか？
自分の方では、初期値でこの値（ var(–wp–custom–spacing–x-small)
…）を入力していないのですが、何か最初の段階で誤った設定、操作をしたのかもしれません。大変助かりました。感謝申し上げます。大変ありがとうございました。m(__)m
（画像キャプチャあり）
管理画面で、不要な（有効でない）cssのclass指定があった為にそれが邪魔となり正規のcssがあたらなかったということで理解しましたが問題ないでしょうか？
はい、その理解で合っています。
自分の方では、初期値でこの値（ var(–wp–custom–spacing–x-small)…）を入力していないのですが、
だとすると、たぶん、X-T9 のデモサイトのデータをインポートしたサイトで Lightning に切り替えたことが原因だと思います。
何か最初の段階で誤った設定、操作をしたのかもしれません。
使い始めたばかりでいろいろいじってみたいのだろうと思いますが、
先日の質問も今回の質問も、いじった結果、本来の動作をしなくなっていて、
このフォーラムに頼っているように見えます。いまのサイトはまだ他に問題があるかもしれません。
ロリポップでは WordPress サイトを複数作ることができるので、
別の WordPress サイトを作って試してみるといいです。
- このトピックに返信するにはログインが必要です。
