wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/03/17

こんにちは、管理人@SS_mshpです。

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。

元のテーマは『wp rootstrap』でカスタマイズ用にしていました。いったいどんな風におかしかったか、さっそく状態や対処を見ていきましょう。

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

■たぶん固定ヘッダーやろうとしてたんだけど、スクロール後にタイトルが変な位置に移動


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


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


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

■変な位置に移動するCSSコード


.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で、少しゆれる場合の対処

古いieなどで、fixした要素が揺れるという事例がありました(調べても出ますし、実際ie表示でもなります。)。スムーズスクロールを解除するスクリプトなどを挟むとよいそうです(これは今度やってみます。)

■管理人がCSS記述ミスったと思ったけど、実はデモサイトの段階で発生している

今回のケースでは、管理人が間違って変なコードを貼ったと思ったら、そうでなかったようです。rootstrapのデモがあるページ
WP RootStrap — 無料の WordPress テーマ
https://ja.wordpress.org/themes/wp-rootstrap/
を見てみると・・・


最初の位置です。スクロールして戻してみます。


テーマ配布の段階で、タイトルが変な位置に移動していますね。修正バージョンを待つか、待てない場合は自分で直してしまいましょう。

■あとがき・まとめ

  • rootstrapテーマは、スクロールして戻すとタイトルが変な位置に移動している
  • 変な位置に移動する場合、position:relativeになっている
  • 完全に固定させたい場合はfixed
  • 1~2ピクセルで文字が動くのがイヤな場合はtop:0
  • ieのスクロール時に揺れるのがイヤな場合はスムーズスクロールを解除

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

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - サイトエラー対策と復旧(wp/php/css) 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

ワードプレステーマインストール時に、エラーで画面真っ白を復旧させた方法

今回は、管理人がメインで使ってるweb製作ツールワードプレスで、たまに発 …

【wordpress/PHPエラー原因】Parse error: syntax errorで画面真っ白は、プラグインorサーバーのPHPバージョン

今回はwordpressサイトでよくある『プラグインがParse err …

【wpプラグイン】コンタクトフォーム7の自動返信設定と、なぜか発生した文字化けの対処

今回は、wordpressで定番・便利な問い合わせフォームのプラグインを …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

ワードプレスSTINGERでアドセンスコードが入らない~『テキストドロップ』勘違いと、対処方法

今回は、このサイトにもつかわれているツール『ワードプレス』での、アドセン …

CSSの『Expected RBRACE 』エラーって何なの?(ワードプレス4.9で判明)

今回は、ワードプレスを新バージョンにしたら判明した、変なCSSエラーがで …

【PHPファイル改造でWPテーマ不具合修正】Clarina(親llorix-one-lite)で、ブログ更新情報タイトルが二回出るのを直す

今回は、管理人のつくったフリー曲サイトで、表示が微妙になっていた部分を、 …

【WordPress4.9.7でのエラー検出】子テーマでindex.phpやCSSヘッダが無いときの『テーマが壊れています』表示への対策

今回は、2018年7月6日に出た、WordPressの新バージョン4.9 …

【wordpress】PHPのバージョンっていきなり変えて大丈夫?不安なら公開前にローカルでテストしよう

今回は、WPに使われてるプログラムPHPのバージョンを変更する際に、事前 …

『レスポンシブレイアウトwp』がプラグイン(wptouch mobile plugin)エラーで、スマートフォンで上手く表示しなかったときの対策

今回は、サイトなどを使ってコンテンツを発信するのに役立つかもしれない、w …