うなこ
フォーラムへの返信
-
投稿
-
私の方で考えてみたCSSです。
ページ遷移するときに、メニューが方向：ドロップインの場合は下から上に、方向：左→右の場合は左から右に、方向：右→左の場合は右から左へ閉じますので、位置が固定で、ナビが透明になるようにしました。ナビが透明になるので移動してガタっとなるのは無くなるかなと思います。/*ナビを透明に*/ .vk-mobile-nav { opacity:0; } /*openで不透明に*/ .vk-mobile-nav.vk-mobile-nav-open{ opacity:1; } /*ログイン時*/ /* adminbarがあるので方向 ドロップインの場合はずらす */ .admin-bar .vk-mobile-nav.vk-mobile-nav-drop-in{ top: 46px; } /* ログアウト時 */ /* 方向 ドロップインの場合 */ .vk-mobile-nav.vk-mobile-nav-drop-in{ top: 0px; } /* 方向 左 → 右*/ .vk-mobile-nav.vk-mobile-nav-left-in{ left: 0; } /* 方向 右 → 左*/ .vk-mobile-nav.vk-mobile-nav-right-in{ left: 0; }この他にも、なにかカスタマイズアイディアがありましたら、ぜひ書き込みよろしくお願いいたします。
ページ遷移するときに、メニューが閉じますので、たしかに一瞬カクッとしますね（iPhoneのSafariで確認しました）。
何かいい方法がないか、考えてみます。
もし他の方で、こんな方法があるなど、カスタマイズのアイディアがありましたら、ぜひ書き込みをお願いいたします🙇♂️iphoneのsafariで見た時に、ページ遷移する時に
2階層目のメニューを開くと、メニューが閉じようと（メニュースライド方向はドロップの場合）上に動くので、それを治したい、ということであっていますか。グリッドカラムカードブロックの設定から幅を変更できます。
グリッドカラムカードブロックを選択して、ブロック設定画面の「カラム幅設定」のカラムの最小サイズ（PC、タブレット、モバイル）で調整してください。（添付画像）
以下のCSSでどうでしょうか。
意図と違っていましたら教えてください。/*ナビ カレントページの下線をnoneに*/ .global-nav-list>li[class*=current]::before { content:none; }状況が違うかもしれませんが、過去にCTA作成時、outerブロックに背景画像を設定すると、”更新に失敗しました。返答が正しいJSONレスポンスではありません。”というメッセージが出て更新できない方がいらっしゃいました。
以下のフォーラムは参考になりますでしょうか。
新規ボタンを配置してもエラーになるのですね…。
まだ原因がわかりませんが、
ブラウザはEdgeをご利用のようですが、Google Chromeブラウザで確認するとどうなりますか？エラーが出ていますか？添付ありがとうございます。
画像内のボタンのコードと、私の環境のVKボタンのコードを見比べてみましたが、特に違いがありませんでした。原因がまだわかっておりませんが、新規でVKボタンを設置した場合は編集できますか？
それとも保存して再度開くと「このブロックでエラーが発生したためプレビューできません。」のエラーになりますか？こんにちは！以下のエラーの共有方法「1. 投稿内容を共有」の部分を確認して、エラーファイルを共有することは可能でしょうか。
ケース2）
背景色として全幅のOuterブロックを配置し「コンテナ内側のスペース設定」を設定する。
その上に通常幅のOuterブロックを配置すると、上記の背景色用のOuterブロックの「コンテナ内側のスペース設定」の数字がこちらにも反映されてしまう。（WordPress編集画面上の設定数字をいじっても反映されない、実際のページの表示を確認すると下敷きにしたOuterブロックの設定値を継承してしまう）私の環境では再現できませんでしたが、
ただ、全幅サイズで、余白 (左右)：コンテンツエリアに合わせる にした時に、コンテナ内部のスペース設定がPCサイズで（テーマ側のcssに上書きされる）効いていないのは確認できました。▼社内用issue
https://github.com/vektor-inc/vk-blocks-pro/issues/1612ケース1）
背景色として全幅のOuterブロックを配置し、
その上に通常幅のOuterブロックを配置すると「コンテナ内側のスペース設定」が反映されない。通常幅と全幅のOuterブロック、どちらも「コンテナ内側のスペース設定」が反映されないでしょうか。
もし全幅のOuterブロックだけ「コンテナ内側のスペース設定」が反映されない場合は、
全幅のOuterブロックの「レイアウト設定」の「幅」設定の「余白（左右） 」は何になっていますか？このデモサイトは同じWordPressとテーマのバージョンですが、症状が確認できませんでした。
たまにリロードすると直ったりしますが、またリロードすると崩れます。
原因はまだわかりませんが、キャッシュ系のプラグインは使用していますか？
画像のブロック余白を使いましたが、スマホではバッチリでもPCだと崩れてしまいました。
【余白で調整する場合】
画像のブロックの余白ではなく、レスポンシブスペーサーブロックを配置して、余白の設定は「カスタマイズ」にして、それぞれPC、タブレット、スマホで余白の数値を設置するのはいかがでしょうか。【画像を調整する場合】
画像自体を調整して（上に余白を作る）、PC用とスマホ用と準備して、非表示機能でだし分ける方法もあります確認しました。書き直しましたのでご確認ください。
【修正したところ】
OuterブロックのCSSに、positionが打ち消されてしまうようでしたので、!importantをつけました。
管理画面が編集しづらくなるため、管理画面用のCSSも追加しました。
※管理画面用のCSSもフロントに表示されますので、消したい場合は、管理画面部分の表記は削除していただいて大丈夫です。（編集はしずらくなります）selector{ position: fixed !important; left: 0; top: 0; width: 100%; z-index: 10; margin:0 auto; box-shadow: 0 1px 3px rgb(0 0 0 / 10%); } /*管理画面が編集しずらいので追加*/ .editor-styles-wrapper selector{ position: relative !important; }CSSで調整する形になると思います。
とりあえずはブロックのカスタムCSSに記述する書き方で紹介します。
OuterブロックのカスタムCSSに以下のCSSをコピペすると、固定されます。
下のメインビジュアルとヘッダーが重なりますので、画像を調整するなどしてみてください。selector{ position: fixed; left: 0; top: 0; width: 100%; z-index: 10; margin:0 auto; box-shadow: 0 1px 3px rgb(0 0 0 / 10%); }CSSについてはコチラを参考にしてみてください
https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/
