• 初めて質問させて頂きます。

    twentyelevenのテーマを元にカスタマイズを行い企業サイトを構築中です。ある程度カスタマイズは終わった段階で気付いたのですが、ブラウザの画面を小さくすると、横スクロールバーが表示されず、画面が崩れてしまいます。ブラウザの種類を問わず発生します。(ie、firefox、chrome、safari)

    自分なりに調べましたが、原因が不明です。
    ・単純にテーマをtwentytenに替えたところ、発生しない。(横スクロールバーが表示される。)
    ・twentyelevenの初期状態で横スクロールバーが表示されていたかどうかは不明。
    ・style.cssをtwentyelevenの初期状態に戻したが、改善されない。
    ・プラグインをいくつか入れているのでそれが原因か?

    当方、WEBページ制作は初めてであまり知識はありません。
    横スクロールバーを表示させるにはどうしたら良いのでしょうか?
    初歩的な質問で申し訳ないですが、ご助言いただければ幸いです。
    よろしくお願い申し上げます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • モデレーター gatespace

    (@gatespace)

    デフォルトテーマ「Twenty Eleven」はレスポンシブデザインを採用しています。
    ブラウザ(端末)の幅に合わせてCSSのメディアクエリーを利用し、レイアウトを変えています。

    ※レスポンシブデザインの詳しい説明についてはWordPressに限った話ではないので省略します。

    個人的には、iPadやスマートフォンで閲覧した際に、
    特別な対応をしなくてもレイアウトを変えてくれるので、
    そのままでも良いのではないかと思いますが、
    フォーラムに以前、レスポンシブデザインを無効化するトピックがありましたので、ご参考ください。

    Twenty Elevenのレスポンシブデザイン無効化について

    ※特定のテーマの話なので「テーマ」に移動します。

    こんにちは

    以前、横スクロールバーが出なくなって、調べた事があります。
    この場合は、スタイルルールの影響によるものでした。

    プラグインのスタイルルールの影響もあるかも、、、プラグインはずしたテストお勧めします
    htmlについては、バリデーションチェックをしておきましょう

    http://d.hatena.ne.jp/tenman/20110330/p1

    トピック投稿者 echizenya1005

    (@echizenya1005)

    gatespace様、nobita様
    早速のご回答有難うございます!

    さしあたり、「Twenty Elevenのレスポンシブデザイン無効化について」に書かれた
    通り、style.cssのL75~78、L2258~2668を削除しました。
    しかし、結果は目指しているものではありませんでした。具体的には、
    画面の背景以外の部分がブラウザの領域に合わせて変化し、横スクロールバーが
    中途半端に表示されるような感じです。結局画面は崩れてしまいます。
    これは、プラグインの影響かもしれません。
    プラグインを外したテストが直ぐにはできませんので、どうしたものか、という感じです。

    ただ、画面が崩れるのが不具合ではなくレスポンシブデザインというものだと分かったので、上司にそう説明して納得してもらう方向で進めようかとも少し考えています。
    少々検討させて下さい。

    画面が崩れるのが不具合ではなくレスポンシブデザインというものだと分かったので、

    スタイルを px で指定しているということは、無いですよね?

    モデレーター gatespace

    (@gatespace)

    画面の背景以外の部分がブラウザの領域に合わせて変化し、横スクロールバーが
    中途半端に表示されるような感じです。結局画面は崩れてしまいます。

    Twenty Elevenはレスポンシブデザインなので、
    全体の幅(この場合はbody 直下の <div id=”page”>)の幅を固定していません。

    Twenty Elevenのstyle.cssの75行目

    #page {
    	margin: 2em auto;
    	max-width: 1000px;
    }

    固定幅にするのであればここの変更が必要です。

    ※闇雲にスタイルシートをいじるよりも、FireFox、Choromeであれば「要素の検証」とか、
    IEであれば開発者モードを使う事で、その要素にどんなスタイルが当てられているか調べられます。

    トピック投稿者 echizenya1005

    (@echizenya1005)

    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以上の幅指定が、行われているかどうかです。)

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「サイトの横スクロールバーが表示されない」には新たに返信することはできません。