新しいStinger7はStinger5カスタマイズを応用できて気に入っています。
phpコードは多少変わっているところもありますが、大体応用できるでしょう。
Stinger7でブラウザに横スクロールが出るのを解消しました。
Stinger7横スクロールバーが出た原因・理由
header、menu(グローバルメニュー)の横幅を、
画面いっぱいに拡張しました。
これが横スクロール出現の原因でした。
Stinger5では全く起こらなかった現象です。
Stinger7で、ヘッダーを100%にした後に、
ブラウザ画面下に横スクロールバーが出るようになったわけです。
Stinger5との違いは、
#wrapper {
overflow:visible;
}
が、PCのCSSで指定されている事。
これを
にしたら良いと思って試したら失敗。
横幅いっぱいに広げたheader等が
途中までしか表示されなくなります
なので、
body {
で指定しましょう。
以下で説明します。
横スクロールはなぜ不要か、非表示にすべきか
ちなみに、横スクロールバーは不要なら無い方が良いですよ。
レスポンシブデザインの場合、
スマホやタブレットで画面の横揺れが起こるかもしれないからです。
縦読みしてて、横読みに変えた時とか。
スマホではviewportを指定しているので、大丈夫だと思うのですが。
PCでも、必要ない横スクロールは邪魔ですので、
非表示にしましょう。
一般的なブラウザ幅に収まらないコンテンツは要りません。
スクロールを非表示、はみ出た部分は隠すCSS
久しぶりにこのCSSを使いました。
サイト制作には欠かせないですね。
Stinger7にかぎらず、
他のテーマでも応用出来ます。
テーマの編集→
スタイルシート→
以下のコードを記入。
【横スクロールを非表示】
body {
overflow-x: hidden;
}
以上です。
x＝横軸の事です。
縦スクロールされなくなった時は、
以下のCSSをさらに追加してみて下さい。
html {
overflow: auto;
}
全然動作しない時は、
上記
body {
のCSSは使わず、以下で試して下さい。
これでもダメな場合のやり方は分かりません。
html {
overflow-x: hidden;
}
以上です。
overflowについて、縦スクロールも非表示にできる
他、このようなCSSもあります。
カスタマイズにご利用下さい。
【縦スクロール非表示】
body {
overflow-y: hidden;
}
y＝縦軸。
【縦横どちらもはみ出た部分はスクロールしない】
body {
overflow: hidden;
}
【スクロールは自動で、ブラウザに依存させる】
body {
overflow: auto;
}
【スクロールバーを表示させる】
body {
overflow: scroll;
}
以上です。
普通はautoで良いのですが、
サイト制作している時、表示が変だなと思ったら、
コードを変更して、見やすいように調整しましょう。
Stinger5の場合はこちら。
ヘッダーの横幅を広げるやり方も載せてあります。
ヘッダー・フッターをブラウザ横幅いっぱいに広げて色を付ける方法。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク