対馬 俊彦
フォーラムへの返信
-
投稿
-
100vh だとそうなっちゃいますので、100svh にする必要がありますね。
現状、SmaVeksive は最小の高さの単位として 100svh を選べないので、
コードエディターに切り替えて、100vh を 100svh に書き換えてください。書き換えるところは2箇所あります。（添付画像参照）
以下の CSS を書けば余白が小さくなります。
:root { --wp--custom--width--content: min( var(--wp--style--global--content-size), 95vw ); }上の CSS の 95vw の部分を 100vw にすれば余白がゼロになります。
X-T9 の初期設定は 90vw です。
オーバーレイメニューとして表示するブロックをグループブロックに入れて、
グループブロックを以下のように設定すれば、期待する状態に近づけることができます。1. 背景色を設定
2. コンテント幅を使用するインナーブロック 有効
3. 最小の高さ 100vh添付画像をご参照ください。
[ 解決済 ] となっているので、
ご質問者がこの書き込みをご覧にならないかもしれませんが…該当URLを見ると、
ウィジェットに追加したお問い合わせの下に余分な空白ができています。お問い合わせの下に 区切り が追加されているようなので、
区切り を削除すればこの空白がなくなると思います。> 本件については子テーマかどうかは関係ないですね。
ご指摘の通り、X-T9 のようにブロックを自由に組み合わせて
メニューを構成することはできませんが、
ご質問者が希望されているロゴ・電話番号・SNS情報であれば、
SmaVeksive（ナビゲーションブロック）でも可能です。ロゴ: サイトロゴを使用
電話番号: ボタンを使用
SNS情報: ソーシャルアイコンを使用 ← アイコンが複数だと CSS を書く必要あり
【以下、追記（訂正）です】
> X-T9 のようにブロックを自由に組み合わせてメニューを構成することはできませんが…
SmaVeksive でもできそうですね。失礼しました。
私の SmaVeksive サイトのテンプレートパーツ一覧には
添付画像のように9個が表示されています。アップされた画像を見ると、
SmaVeksive の子テーマを作っているように思いますが、
私はブロックテーマの子テーマの挙動については詳しくないので、
どなたかわかる方の回答をお待ちください。X-T9 で子テーマを使ったときに挙動が把握できず扱いづらかったので、
それ以来、私はブロックテーマでは子テーマを使わないようにしています。Q. 添付画像のようにPCの左ペインに出てきてしまいます。
おそらく、複製したヘッダーメニューに切り替える作業が完了していないのだと思います。
昨日の添付画像 smaveksive-3 を参照して、複製したヘッダーメニューに切り替わっているか確認してみてください。
Q. どう設定したら「電話番号」や「ロゴ」を変更できる設定画面にいけるでしょうか。
添付画像 smaveksive-4 をご参照ください。
① → ② の順にクリックして電話番号とロゴを追加します。Q. どう設定したら「×閉じるボタンの大きさ」を変更できる設定画面にいけるでしょうか。
ボタンの大きさを設定する画面は存在せず、以下の例のような CSS を記述する必要があります。
body .wp-block-navigation__responsive-container-close svg { height: 50px; width: 50px; }Q. 背景色を変更できるでしょうか
[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー] と進んで、サブメニューとオーバーレイ背景 を変更します。（添付画像 smaveksive-1 を参照）
Q. ロゴや電話番号、SNS情報なども設置したい
[ダッシュボード] → [外観] → [エディター] → [ナビゲーション] → [ヘッダーメニュー] と進んで、ヘッダーメニューを複製します。（添付画像 smaveksive-2 を参照）
[ダッシュボード] → [外観] → [エディター] → [パターン] → [テンプレートパーツ一覧] → [ヘッダーメニュー] と進んで、メニューを複製したものに切り替えます。（添付画像 smaveksive-3 を参照）
Lightning Pro のトップページのスライドショーのことなんですね。
私の WordPress 7.1 ＋ Lightning Pro 8.30.0 のサイトで試しましたが、
質問されている症状が起きず、モバイル用スライド画像を設定すれば、
スマホで表示されます。なんとなく、キャッシュを削除すれば症状が起きなくなりそうな気がします。
お困りの状況が把握しづらいので、
できましたら症状が起きているサイトの URL を提示いただくか、
スクリーンショットをアップしていただくと回答が得られやすいと思います。私の PC で表示するとちょっと違う現象（コンテンツの右側が欠ける）が起きていますが…
該当 URL のサイトの CSS を見たところ、以下の操作を行えばよさそうな気がします。
- [カスタマイズ] → [Lightning ヘッダー設定] を開く。
- とりあえずブロックテンプレートパーツをなにか選択する。
- ヘッダーを固定する のチェックをはずす。
- ブロックテンプレートパーツを 使用しない（Lightning 標準）に戻す。
ヘッダーを固定する にチェックをつけた状態で設定を Lightning 標準 に変更したときに
body タグのクラス名block-template-parts-header--stickyが付与されたままで、
ヘッダー固定のための以下の CSS が反映されていることが影響しているみたいです。body.block-template-parts-header--sticky { overflow-x: unset; }横から失礼して、便乗リクエストさせていただきます。
検索結果画面で、現状通りアコーディオンが閉じた状態で、
条件指定されているタクソノミーやキーワードに背景色を設定したいです。<div class="vkfs__outer-wrap ...となっている部分に、条件指定されているときに
<div class="vkfs__outer-wrap vkfs__specified ...みたいにクラス名を付与していただけると、
CSS でかんたんに色をつけられるのでうれしいです。ご検討のほどよろしくお願いいたします。
WordPress 7.0 からこのような仕様になっていますね。
ウィジェット設定画面の左側をリスト表示にすれば、カスタム HTML ブロックを選択して
[コードを編集] をクリックすることができるようになります。エラーが発生しました… はサーバーの WAF が原因だと思います。
