サポート » 使い方全般 » スマホだとレイアウトが崩れて困っています・・・

  • こんにちは、自作のサイトがスマホだとレイアウトが崩れます。
    パソコンで作ったレイアウトがスマホだと見事に崩れます。
    例えば、スマホを横画面にした場合、個別投稿ページ(single.php)のサイドバー(ウィジェット)が右下にずれます(デフォルトだと記事の右隣に配置されるはずです)。これはどうすれば直せますか?
    @media and screen(max-width: 480px;){}
    で設定してもサイドバーが崩れます。
    また、色付けしたナビゲーションメニューはスマホだと白になります。どうすればパソコンの時に設定した色を表示出来ますか?

3件の返信を表示中 - 16 - 18件目 (全18件中)
  • CG

    (@du-bist-der-lenz)

    @damian5129 さん、装飾の工夫(フォントの変更や、色の変更)といったカスタマイズを超えた、改変はテーマの設計自体を台無しにしますよ。

    スマホにiPhone、アンドロイドがある通り、MacOSXのサファリ、Windowsのieによっても、3pxの違いでも狂いが出てきます。「今は試行錯誤で右隣にくるようにしました。」とある点から、部分的なところにこだわるあまりに強引に押し通してませんか。その試行錯誤を逆の手順で戻していきましょう。どの時点でサイドバーがカラム落ちした原因を作っているかが見つかりますよ。

    自作でなくTwenty Twelve でサイトを作りたいのであるならば、Twenty Twelve をベースにしたテーマは随分と見つかりますよ。例えば、このTwenty Twelveテーマは、コンテンツとサイドバーをパーセント比で、可変幅を実現しています。テンプレートもsingle.phpのなかにcontent.phpや他を呼びこむ構造ですので、content-aside.php、content-image.php、content-quote.php、content-status.php、、、などなど、目配りは多岐に及びます。
    それだけに、やりがいもあります。

    スレッド開始 damian5129

    (@damian5129)

    ウィジェットのcssからfloat:right;を消してもレイアウトの崩れが直りません。

    CG

    (@du-bist-der-lenz)

    ウィジェットのcssからfloat:right;を消しても変化がないというのは、『試行錯誤』で追加したことでしょうか。
    さらに、以前の段階までスタイルシートの履歴を遡って確認します。

3件の返信を表示中 - 16 - 18件目 (全18件中)
  • トピック「スマホだとレイアウトが崩れて困っています・・・」には新たに返信することはできません。