[ 解決済 ] 固定ページにてOuterブロックをヘッダー固定したい

[ちゃん つむ]

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.5.1

■ Pro Unit のバージョン
バージョン 0.23.4

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
固定ページにて外観 > カスタマイズで設定した以外のヘッダーを作り（Outer）でヘッダーを固定したい。

■ 自分で試した事
Outerにてヘッダーを作成

■ 症状が発生するブラウザ
chrome

■ 実際の症状
固定ページでLPページを作成してヘッダーを固定したい。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

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/

[ちゃん つむ]

ありがとうございます。
CSSで調整してみたのですが、ヘッダ―は固定されずOuterブロックの箇所の左右が少し狭まってしまいました。

Attachments:

You must be logged in to view attached files.

[うなこ]

確認しました。書き直しましたのでご確認ください。

【修正したところ】
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;
}

• この返信は2年前にうなこが編集しました。

[ちゃん つむ]

ありがとうございます。
バッチリ固定されました！
メイン画像の調整をしたいですが、どのような調整方法が望ましいですか？
画像のブロック余白を使いましたが、スマホではバッチリでもPCだと崩れてしまいました。

[うなこ]

画像のブロック余白を使いましたが、スマホではバッチリでもPCだと崩れてしまいました。

【余白で調整する場合】
画像のブロックの余白ではなく、レスポンシブスペーサーブロックを配置して、余白の設定は「カスタマイズ」にして、それぞれPC、タブレット、スマホで余白の数値を設置するのはいかがでしょうか。

レスポンシブスペーサー

【画像を調整する場合】
画像自体を調整して（上に余白を作る）、PC用とスマホ用と準備して、非表示機能でだし分ける方法もあります

[ちゃん つむ]

お世話になっております。
ブロック余白ではなくレスポンシブスペーサーが良さそうですね。
こちらで調整したいと思います。
この度はありがとうございました！

[投稿者]

投稿