うなこ
フォーラムへの返信
-
投稿
-
以下のCSSでどうでしょうか。
意図と違っていましたら教えてください。/*ナビ カレントページの下線をnoneに*/ .global-nav-list>li[class*=current]::before { content:none; }状況が違うかもしれませんが、過去にCTA作成時、outerブロックに背景画像を設定すると、”更新に失敗しました。返答が正しいJSONレスポンスではありません。”というメッセージが出て更新できない方がいらっしゃいました。
以下のフォーラムは参考になりますでしょうか。
添付ありがとうございます。
画像内のボタンのコードと、私の環境のVKボタンのコードを見比べてみましたが、特に違いがありませんでした。原因がまだわかっておりませんが、新規でVKボタンを設置した場合は編集できますか？
それとも保存して再度開くと「このブロックでエラーが発生したためプレビューできません。」のエラーになりますか？ケース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/ページヘッダーのdivのinnerのdivにmarginが入っていますので、そこを調整しますと、もう少し小さくなります。
例えば以下のCSSを追加CSSなどに追記してみてください。
0.5em の部分はお好みの大きさにしてください。/*ページヘッダーインナーのmargin*/ .page-header-inner{ margin:0.5em auto; }管理画面【外観】>【カスタマイズ】>【Lightning ページヘッダー 設定】 から最小の高さが設定できます。
