デフォルトテーマ「Twenty Eleven」はレスポンシブデザインを採用しています。
ブラウザ(端末)の幅に合わせてCSSのメディアクエリーを利用し、レイアウトを変えています。
※レスポンシブデザインの詳しい説明についてはWordPressに限った話ではないので省略します。
個人的には、iPadやスマートフォンで閲覧した際に、
特別な対応をしなくてもレイアウトを変えてくれるので、
そのままでも良いのではないかと思いますが、
フォーラムに以前、レスポンシブデザインを無効化するトピックがありましたので、ご参考ください。
Twenty Elevenのレスポンシブデザイン無効化について
※特定のテーマの話なので「テーマ」に移動します。
こんにちは
以前、横スクロールバーが出なくなって、調べた事があります。
この場合は、スタイルルールの影響によるものでした。
プラグインのスタイルルールの影響もあるかも、、、プラグインはずしたテストお勧めします
htmlについては、バリデーションチェックをしておきましょう
http://d.hatena.ne.jp/tenman/20110330/p1
gatespace様、nobita様
早速のご回答有難うございます!
さしあたり、「Twenty Elevenのレスポンシブデザイン無効化について」に書かれた
通り、style.cssのL75~78、L2258~2668を削除しました。
しかし、結果は目指しているものではありませんでした。具体的には、
画面の背景以外の部分がブラウザの領域に合わせて変化し、横スクロールバーが
中途半端に表示されるような感じです。結局画面は崩れてしまいます。
これは、プラグインの影響かもしれません。
プラグインを外したテストが直ぐにはできませんので、どうしたものか、という感じです。
ただ、画面が崩れるのが不具合ではなくレスポンシブデザインというものだと分かったので、上司にそう説明して納得してもらう方向で進めようかとも少し考えています。
少々検討させて下さい。
画面が崩れるのが不具合ではなくレスポンシブデザインというものだと分かったので、
スタイルを px で指定しているということは、無いですよね?
画面の背景以外の部分がブラウザの領域に合わせて変化し、横スクロールバーが
中途半端に表示されるような感じです。結局画面は崩れてしまいます。
Twenty Elevenはレスポンシブデザインなので、
全体の幅(この場合はbody 直下の <div id=”page”>)の幅を固定していません。
Twenty Elevenのstyle.cssの75行目
#page {
margin: 2em auto;
max-width: 1000px;
}
固定幅にするのであればここの変更が必要です。
※闇雲にスタイルシートをいじるよりも、FireFox、Choromeであれば「要素の検証」とか、
IEであれば開発者モードを使う事で、その要素にどんなスタイルが当てられているか調べられます。
gatespace様、nobita様
アドバイス有難うございます。
> スタイルを px で指定しているということは、無いですよね?
スタイルはテーマで元々pxで指定されています。追加でstyle.cssの変更を行う際も、
pxを指定しています。
> ※闇雲にスタイルシートをいじるよりも、FireFox、Choromeであれば「要素の検証」とか
そうですね、知識がないので時間がかかりそうですが、試せたら試してみようかと思います。
こんにちは
最初は、スタイルのカスタマイズで、設計した幅で、スクロールが出るように考えていたものが、出ない と 理解していたのですが、
スタイルはテーマで元々pxで指定されています。追加でstyle.cssの変更を行う際も、pxを指定しています。
という事のようなので、この問題の切り分けが出来るかもしれないと思います。
ちょっとだけ、レスポンシブなCSSの説明をします。
レスポンシブなスタイルは、モバイルブラウザなどの、小さいものでも、デスクトップのブラウザでも、出来るだけ、UAを選ばずに閲覧できるようにしたものです
リキッドレイアウトとか、フルードレイアウトが基調で、
CSS3の @media (max-width: 650px) {
みたいな メディアクエリという指定がモダンブラウザで利用できるようになり、流行しました。
いろんなのでみれるテーマは魅力なのでWordPressのベーステーマにぴったりなわけですが、
スタイルシートは、いろんなブラウザの分ルールが入るので、面倒になっています。
で、
Twenty elevenのCSSには、確かに、pxが使われていますが、使われていないところもあります。
それは、60行くらいの
/* =Structure
----------------------------------------------- */
というブロックです。
このブロックは、ほとんどem と %を使っています。
これは、ブラウザサイズに追従して、ページやブロックサイズを合わせるためのルールです。
こういうところに、ブロックエレメントが、pxで指定されていた場合、大きさにもよりますが、可変ブロックの中にある、固定サイズのブロックが、親ブロックを突き破ったりして、レイアウトが崩れます。( ブラウザのサイズによって )
ということになるので、そのあたりを、調べてみるといいと思います。
(ブロック要素の、概ね、200px以上の幅指定が、行われているかどうかです。)