WORDPRESSで、ブラウザのウィンドウの大きさに合わせてサイトの表示レイアウトが不本意に変わる事象

Question

WordPress:4.7.2
PHP :5.2.4
SQL :5.0

掲題の内容の質問です。

・InternetExplorer(11.0.41)
・FireFox(53.0(32bit))
・GoogleChrome(58.0.3029.96(64-bit))

のすべてで確認している事象です。

パソコンのブラウザで、WORDPRESSで作成したサイトのページを見た場合(どのページかは問いません)、ウィンドウの大きさを変えると、ウィンドウの中に表示されているコンテンツの構成が予期しないかたちで変化してしまいます。

ウィンドウの横幅を広く取っている時の表示のされかたは問題がないのですが、横幅を1024pxから小さくしたあたりから、表示ページのレイアウトが崩れてしまいます。

具体的には以下のような動きをします。

・通常右側にある「ランキング」欄が左側に表示される。
・画像や動画の大きさが勝手に変わる。
・動画が縦に列挙される画面で、各動画の中央にあるはずの矢印マークが、ウィンドウの左右幅に連動して不適切な位置に表示される

特に以下の場合にブラウザが対応しきれず、様々ないびつな表示が生じます。
①急速にウィンドウの大きさを変えた時
②縮めていたウィンドウを拡げた時

ウィンドウの上下幅だけを変える時は特にこれといった問題はないかもしれません。
ただ、左右幅を縮めた時に、見苦しいレイアウトになってしまいます。

ウィンドウの大きさに関わらず、レイアウト構成の枠組み自体は変化しないようにするためにはどうすればいいのでしょうか。

style.cssやresponsive.cssを適当にいじってみても、この問題には全く作用しません。

漠然としていて申し訳ないのですが、なにかヒントにあたるコメントだけでもいただけるとありがたいです。

Answer 1

サイトを見ていないので、推測での返答になります。参考になるかどうかはわかりませんが。

ウインドウの横幅を変更するとレイアウトが変化するということですから、CSSがレスポンシブで構築されている可能性があります。
1024pxということですから、CSSの中に以下の記述がないか確認してください。

@media (max-width:1025px){
}
```または
```CSS
@media (min-width:1024px){
}

CSSを編集して変化がない場合は、JavaScriptで動的にクラスを割り当てるなどして変化させている可能性があります。
JSについては、ライブラリを使っている場合などがありサンプルソースは記述できませんが、例えばjQueryなら以下のような記述が内部・外部ファイルに記述されていないか確認してください。

var width = $(window).width();

「var width」の部分は変数なので、他の名前の場合もあります。

なんにしても、Chromeのディベロッパーツールなどを使って、どのようにCSSが変化してレイアウトが変わっているのかを確認しつつ、原因を追及していかなければいけません。

大変だとは思いますが、頑張ってください。

Comments

[JavaPHP-nosnos]

ありがとうございます!!!

JavaScriptのほうがどうもあやしいような気がしています。
jsフォルダの中のファイルを全て調べました。
jquery.bxslider.min.js に以下の行がありました。

var a = t(window).width(),

jQueryやJavaScriptがあまり分かっておらず、これに対して要するにどのようにすればよいのか分かりません。

すみませんがヒントをいただけると幸いです。

[rjunakc]

bxSliderはjQueryプラグインですから、サイトの表示に影響を与えることは少ないと思いますが、場合によっては、bxSliderで適用されるCSSがサイトの別の場所に適用されている可能性とかはないですか？
または、別のJSが悪さしているとか。

[JavaPHP-nosnos]

先の行は表示されている幅のpx数を取得するところみたいでしたね…

＞bxSliderで適用されるCSSがサイトの別の場所に適用されている可能性
これに関しては明確に分かりません。すみません。

＞別のJSが悪さしている
jscript.jsで以下のような関数が定義されており、これだと思ったのですが、内部をコメントアウトしてPCから見ているのみの扱いにしたけれど768pxでのブレイクポイントを認識する挙動がいっこうに変わりません。

function mediaQueryClass(width) {
　　if (width > 768) { //PC
　　　　PC画面用の処理
　　} else {
　　　　スマホ画面用の処理
　　}
}

ディベロッパーツールでCSSファイルの読み込み状況をチェックし、怪しいCSSファイル上で発生している怪しいエラーを消していくのはどうかなと思っています。