質問: 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から小さくしたあたりから、表示ページのレイアウトが崩れてしまいます。 具体的には以下のような動きをします。 ・通常右側にある「ランキング」欄が左側に表示される。 ・画像や動画の大きさが勝手に変わる。 ・動画が縦に列挙される画面で、各動画の中央にあるはずの矢印マークが、ウィンドウの左右幅に連動して不適切な位置に表示される 特に以下の場合にブラウザが対応しきれず、様々ないびつな表示が生じます。 1急速にウィンドウの大きさを変えた時 2縮めていたウィンドウを拡げた時 ウィンドウの上下幅だけを変える時は特にこれといった問題はないかもしれません。 ただ、左右幅を縮めた時に、見苦しいレイアウトになってしまいます。 ウィンドウの大きさに関わらず、レイアウト構成の枠組み自体は変化しないようにするためにはどうすればいいのでしょうか。 style.cssやresponsive.cssを適当にいじってみても、この問題には全く作用しません。 漠然としていて申し訳ないのですが、なにかヒントにあたるコメントだけでもいただけるとありがたいです。
回答: サイトを見ていないので、推測での返答になります。参考になるかどうかはわかりませんが。 ウインドウの横幅を変更するとレイアウトが変化するということですから、CSSがレスポンシブで構築されている可能性があります。 1024pxということですから、CSSの中に以下の記述がないか確認してください。 ``` @media (max-width:1025px){ } ``` または ``` @media (min-width:1024px){ } ``` CSSを編集して変化がない場合は、JavaScriptで動的にクラスを割り当てるなどして変化させている可能性があります。 JSについては、ライブラリを使っている場合などがありサンプルソースは記述できませんが、例えばjQueryなら以下のような記述が内部・外部ファイルに記述されていないか確認してください。 ``` var width = $(window).width(); ``` 「var width」の部分は変数なので、他の名前の場合もあります。 なんにしても、Chromeのディベロッパーツールなどを使って、どのようにCSSが変化してレイアウトが変わっているのかを確認しつつ、原因を追及していかなければいけません。 大変だとは思いますが、頑張ってください。