WordPressのヘッダーを固定したままスクロール出来るようにするまでのお話
WordPressで作られたサイトでスクロール時、ページ上部にヘッダーを固定したかったのですが、結構苦戦しながらなんとか解決した話。
よくある無料テーマでは対応していない
最低限のレスポンシブデザインはサポートしてくれているものの
(手軽に構築するために外観エディターを使用しています)
Header stickyは対応してくれていませんでした。
プラグインを導入
カスタムCSSで出来ることだろうけど、
明示的にわかるようにプラグインを導入することにしました。
セレクターで指定して固定してくれる最低限あればいいかなということで
要素を指定するだけではダメだった。
正確にはヘッダー要素だとページの幅全体にはなっていないので、
見た目が非常に悪い。
そこでいくつか工夫をすることにした。
外観エディターでヘッダー要素に工夫
ヘッダー要素のサブメニューからグループ化を選択
グループをラッパーとして扱うようにする
コンテント幅を使用するインナーブロックをオフにする
これでグループ化している要素は横幅全体になる
高度な設定→追加CSSクラスに"header-wrapper"を追加
クラス名にしていすることで、プラグインから指定出来るようにする
プラグイン側に固定する要素を".header-wrapper"と入力
これでページ上部にヘッダー要素が固定されるようになった。
※グループ化したことでブロック要素のpaddingが入ってるので修正
selector {
margin:0;
padding-top:0;
padding-bottom:0;
}
header-wrapperを指定したグループブロックの
Custom CSSに上記を記載することで内側の要素は中央寄せのまま、
余計な上部下部のスペースをなくすことが出来る。
これで見た目的にも違和感が無いメニュー表示ができるはず。
以上。
この記事が気に入ったらサポートをしてみませんか?