webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

      2021/02/16

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。 元のテーマは『wp rootstrap』でカスタマイズ用にしていました。いったいどんな風におかしかったか、さっそく状態や対処を見ていきましょう。

変な位置に要素が移動するエラーと、そのCSSコード

カスタマイズ中のrootstrapです。細めのヘッダーがクールですね。最初はこの状態。

デフォルトで、『スクロールしても位置が固定するヘッダー』がついています。

しかし、下にスクロールしたあと、上に戻すと、タイトルが変な位置に移動してしまいました。ブラウザを細くして戻したあとにも、こんな感じになります。

.navbar.navbar-default { 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

.navbar.navbar-default { 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のスクロール時に揺れるのがイヤな場合はスムーズスクロールを解除

という感じでした。これを修正できれば、『固定メニューのスターターテーマ』としては、かなりカスタマイズし放題になります。


【カテゴリ】 - CSS
【タグ】 -

  関連記事

【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする

今回は、かなり地味めなCSSプロパティ(字間スペース&行の高さ) ...

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...