スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)
｜ 更新： 2024/02/16 ｜ 187文字
今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。元のテーマは『wp rootstrap』でカスタマイズ用にしていました。いったいどんな風におかしかったか、さっそく状態や対処を見ていきましょう。
変な位置に要素が移動するエラーと、そのCSSコード
カスタマイズ中のrootstrapです。細めのヘッダーがクールですね。最初はこの状態。
デフォルトで、『スクロールしても位置が固定するヘッダー』がついています。
しかし、下にスクロールしたあと、上に戻すと、タイトルが変な位置に移動してしまいました。ブラウザを細くして戻したあとにも、こんな感じになります。
background-color: #fff;
font-weight: 200;
margin-bottom: 0;
margin-top: -2px;
border-bottom: 1px solid #eee;
position: relative;
z-index:999999;
width: 100%;
}
ヘッダーやグローバルナビが入っている部分のコードは、上記の通りです。CSSのpositionとかで、変な位置に移動というのがあったので、そのへんを中心に見てみます。
修正してみたCSS
top:0px;
background-color: #fff;
margin-bottom: 0;
border-bottom: 1px solid #eee;
position: fixed;
z-index: 6;
width: 100%;
}
ヘッダーのメニュー辺りの『position:relative』を『fixed（固定）』に。スクロールしても位置が固定される要素（バナーなど）によく使われます。固定メニューにするならこれが良いかなと。
あと、『スクロールするときと、一番上まで戻したとき』に、1～2ピクセルくらい文字が動くようなのも見られたので、気になる方は『top:0』をつけて、上から動かないようにします。
古いieなどで、fixした要素が揺れるという事例がありました（調べても出ますし、実際ie表示でもなります。）。スムーズスクロールを解除するスクリプトなどを挟むとよいそうです（これは今度やってみます。）
管理人がCSS記述ミスったと思ったけど、実はデモサイトの段階で発生している
今回のケースでは、管理人が間違って変なコードを貼ったと思ったら、そうでなかったようです。rootstrapのデモがあるページ 『WP RootStrap — 無料の WordPress テーマ』 https://ja.wordpress.org/themes/wp-rootstrap/ を見てみると･･･
最初の位置です。スクロールして戻してみます。
テーマ配布の段階で、タイトルが変な位置に移動していますね。修正バージョンを待つか、待てない場合は自分で直してしまいましょう。
あとがき・まとめ
- rootstrapテーマは、スクロールして戻すとタイトルが変な位置に移動している
- 変な位置に移動する場合、position:relativeになっている
- 完全に固定させたい場合はfixed
- 1～2ピクセルで文字が動くのがイヤな場合はtop:0
- ieのスクロール時に揺れるのがイヤな場合はスムーズスクロールを解除
という感じでした。これを修正できれば、『固定メニューのスターターテーマ』としては、かなりカスタマイズし放題になります。
