対馬 俊彦
フォーラムへの返信
-
投稿
-
現在、カラムを使って仮置きしています
PC画面だと横並びになっていてOKに見えますが
スマホ画面にすると縦に並んでしまいますいくつ並べたいのかにもよりますが、
カラムブロックのままで [モバイルでは縦に並べる] をオフにするのがいちばんかんたんな気がします。
↑
スマホで 150px × 150xpx のまま表示すると大きすぎる気がするので、
4カラムくらいでこのようにした方がいいのかなと思った次第です。サーバーの WAF が誤検出したことが原因の可能性があります。
一時的に WAF を無効にして試してみてください。結果にかかわらず、確認後は WAF をまた有効にしておいてください。
WAF の設定手順は、例えばさくらインターネットなら こちら に説明されています。
検索フォームで2つのプラグインを併用することに無理があります。
プラグインの制作者は両方ともそういう使い方を前提にしていないと思います。
ベクトルさんには有償製品の VK Filter Search Pro があります。
これを使えば、ラジオボタンもチェックボックスも使えて、使いやすい検索フォームができますよ。カラムブロックの カスタム CSS に以下のコードを追加すればいいです。
selector figure { flex-shrink: 0; }横並びブロックに含まれるものは文字数に応じて幅が調整されますので、
文字数が多いと画像に割り振られる幅が縮小します。上記の CSS は「画像を縮小させない」という意味のコードです。
ベストアンサー、ありがとうございます。
解決したと思いますので、このトピックを「解決済み」にしてください。以前は Screenshot_557 の状態だったものが、
いまは Screenshot_20250130 の状態になっている、
という状況だと理解して回答します。おそらく、モバイル固定ナビ（いちばん下に並んでいるボタン）を変更したときに
お問合せダイヤル の部分を削除したのではないかと感じます。モバイル固定ナビを変更した人に確認するのが早いと思います。
それができないとすると…
お問合せダイヤル の部分がどのように作られていたのかわからないので、
アドバイスが難しいのですが、モバイル固定ナビウィジェットエリアに
VK Blocks のボタンを追加すれば近いものはできそうです。管理画面で、不要な（有効でない）cssのclass指定があった為にそれが邪魔となり正規のcssがあたらなかったということで理解しましたが問題ないでしょうか？
はい、その理解で合っています。
自分の方では、初期値でこの値（ var(–wp–custom–spacing–x-small)…）を入力していないのですが、
だとすると、たぶん、X-T9 のデモサイトのデータをインポートしたサイトで Lightning に切り替えたことが原因だと思います。
何か最初の段階で誤った設定、操作をしたのかもしれません。
使い始めたばかりでいろいろいじってみたいのだろうと思いますが、
先日の質問も今回の質問も、いじった結果、本来の動作をしなくなっていて、
このフォーラムに頼っているように見えます。いまのサイトはまだ他に問題があるかもしれません。
ロリポップでは WordPress サイトを複数作ることができるので、
別の WordPress サイトを作って試してみるといいです。VK Blocks の共有余白設定にカスタム値を設定していることが原因です。
上記ページを参考にして設定されたのだと思いますが、
このページの「カスタム値を利用する主なケース」の説明の先頭に
「Lightningをご利用の場合は、設定は必要ありません。」と書かれています。カスタム値に
var(--wp--custom--spacing--large)を指定した場合、
テーマ側で--wp--custom--spacing--largeの値が設定されていないと正常に動作しません。Lightning はそのような設定を持たないので、スペーサーの高さを指定できず、
余白なしになってしまった、という状態です。■ 症状が発生するブラウザ
IEChrome で試したらどうなりますか？
スクロールした時の画像も動的に変更したいのですが、フックなどが用意されているのでしょうか？
フックは用意されていないようですが、
スクロール時には背景画像でヘッダーロゴ画像を表示しているので、
以下の CSS で切り替えできます。.header_scrolled .site-header-container--scrolled--logo-and-nav-container .site-header-logo, .header_scrolled .site-header-container--scrolled--logo-and-nav-full .site-header-logo { background-image: url(スクロール時に表示したい画像のURL); }ヘッダー透過時のロゴ画像はカスタマイズ画面で設定できます。
ことりさん、横からすみません😊
赤枠の部分に 16px のインライン文字サイズが設定されています。
これをリセットすればご希望の表示になります。【補足】
Lightning G3 はデフォルトで本文の文字サイズが以下の設定になっています。
PC: 16px
スマホ: 14pxレイアウト設定を ２カラム から １カラム に変更してください。
公開に失敗しました。 返答が正しい JSON レスポンスではありません。
これはサーバーの WAF が原因で起きることがあります。
サーバーはロリポップをお使いのようですので、
以下のページを参考に WAF を無効にして試してください。https://lolipop.jp/manual/user/waf-set/
結果にかかわらず、確認後は WAF を有効に戻して運用ください。
また同じ症状が起きたとき、面倒ですがその都度 WAF を無効にするのがよいです。
今朝私がアップした画像をご参照ください。
画像の下の方に赤枠で囲んである「余白設定」と「非表示設定」のすべての項目にチェックを入れるとご希望の結果になると思います。
横から失礼します。
テンプレートが Landing Page になっていることが原因のようです。
デフォルトテンプレートに切り替えて、余白設定・非表示設定をすれば解決しそうです。
添付画像をご参照ください。
