タブレットでカラム落ちしてしまいます。改善方法はありますか?

Simplicityの特徴 フォーラム Simplicityについての質問 タブレットでカラム落ちしてしまいます。改善方法はありますか?

  • このトピックには9件の返信、2人の参加者があり、最後にあっぷーにより10年、 11ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #29371
      あっぷー
      ゲスト

      simplicity使わせてもらっています。私のような素人でも使いやすく感謝しております。

      一点質問があります。

      こちらのサイトなのですが、タブレットで見るとサイドバーが投稿の下にきてしまいます。(スマホ表示になってしまう)

      完全レスポンシブデザインをオフにするとタブレットでも2カラムで表示されるのですが、横が少しはみ出てしまいます。
      そのため完全レスポンシブデザインをオンにしつつタブレットでも2カラムで表示させたいのですが、可能でしょうか?
      (以前のトピックでタブレットではスマホ表示になるという記事がありましたが、simplicity使用している他ページはタブレットでも2カラム表示されているので、私の設定に何かミスがあるのかと思い質問させてもらいました)

      サイドバーの幅を336pxにはオフにしてあります。子テーマのテーマ編集でも見出しデザインを変えているくらいで、特に手は加えていません。

      お手すきの時によろしくお願い致します。

    • #29372
      あっぷー
      ゲスト

      連投すみません。今確認しましたら、3つもトピックが投稿されていました。大変申し訳ありません。削除してくださると助かります。

    • #29378
      Hidekichi
      ゲスト

      カスタマイザーにタブレットでもPC表示というのがありますので、そこらの設定になるかと思います。
      また、右上のGoogleサイト内検索でわいひらさんのアドセンスに貢献しつつ「タブレット カラム落ち」検索すると、いくつか出てきますので、そこらも参考にされると良いのではないかと思います。

      またカスタマイザーで設定を変更すると、キャッシュの問題で設定が反映されないと言う話が度々でておりますので、このサイトのサイドバーに、「よく問い合わせがある症状」と言う欄がありますので、そこの 動作不良時のガイドラインを参考していろいろ試してみてください。

    • #29385
      あっぷー
      ゲスト

      Hidekichiさま 返信ありがとうございました。

      キャッシュを削除したり、テーマをアップロードし直したりと色々ためしたもののなかなかうまくいきませんでしたが、教えて下さったgoogle検索で「タブレット カラム落ち」で探し、対処記事を見付けることができました。

      完全レスポンシブルをオフ、PCでサイドバーをレスポンシブル をオフし、子テーマに
      /************************************
      ** レイアウト(Layout)
      ************************************/
      #header-in, #navi-in, #body-in, #footer-in{
      width: 980px;
      }
      #main{
      width: 670px;
      }
      #sidebar{
      width: 300px;
      }
      と貼り付けたところ、ipadでもはみ出ずに2カラムで表示されるようになりました。

      どうもありがとうございました。

    • #29388
      Hidekichi
      ゲスト

      flexを利用するという手もあります。

      Simplicityはheader、navi、body、footerとブロックがって、縦に並んでいます。
      その親は、#containerなので、

      #container {
        display: flex;
        flex-flow: column wrap;
      }

      とすることで縦並びのボックスができます。
      #bodyには、#mainと#sidebarが入ってます。これは横並びにしたいので、

      #body-in {
        display: flex;
        flex-flow: row wrap;
      }

      ※ #header-in, #navi-in, #body-in, #footer-inは #body-inだけ別で新たに設定します。
      こうすると、#body-inの中にある#mainと#sidebarは横並びになります。

      #mainには以下を追加します。

      #main {
        /*何かしら*/
        float: none;
        margin-right: auto;
      }

      #sidebarも同様に

      #sidebar {
        /*何かしら*/
        float: none;
      }

      これで骨組みができました。ここで重要なのが、#header-in、#body-inなどのwidthの部分です。現在のそれぞれのセレクタの横幅を設定しているわけですけれども、これが絶対値([n]px)で指定してあるので常にそのサイズで設定されてしまいます。
      仮に、#mainのwidthを100%にしてみます。するとブラウザの横幅いっぱいにメインが広がるはずです。100%なので当たり前なんですけどね。

      そこで、#mainに

      #main {
        /*何かしら*/
        float: none;
        margin-right: auto;
        width: auto;
        max-width: 740px;
        flex: 1 50%;
      }

      子テーマstyle.cssに追記で、#header-in, #navi-in, #body-in, #footer-inに、

      #header-in, #navi-in, #body-in, #footer-in{
        width: 100%;
        max-width: 1070px;
      }

      responsive-pc.cssの#sidebarに、

      #sidebar {
        /*何かしらの処理*/
        width: 300px; /*width: autoを上書きするため*/
      }

      こんな感じで設定すれば、#mainの50%幅まではレスポンシブで表示されるはずです。
      参考画像
      flex表示と通常表示

      ただし、画像下にあるスクロールバーのように従来のcssで絶対値で指定してあるものが、範囲を超えたりすると横スクロールが発生しますので、それらの要素を再調整する必要があります。
      またdisplay: flex等、flexに関係するものはベンダープレフィックスが必要になりますので、各々追加してください。

    • #29389
      Hidekichi
      ゲスト

      ☓ Simplicityはheader、navi、body、footerとブロックがって
      ◯ Simplicityはheader、navi、body、footerとブロックがあって

    • #29390
      Hidekichi
      ゲスト

      ※ flex表示と通常表示の画像は、同じ画面をブラウザの横幅を縮めたりして撮っています。

      スクロール位置は調整しましたけど(笑)

    • #29403
      あっぷー
      ゲスト

      Hidekichiさま
      詳しく教えてくださりありがとうございます。まだ知識が不足気味なので、これからじっくり取り組んでみたいと思います。

    • #29404
      アバター画像わいひら
      キーマスター

      そのため完全レスポンシブデザインをオンにしつつタブレットでも2カラムで表示させたいのですが、可能でしょうか?

      「PCでサイドバーをレスポンシブ表示」をオフにすると、2カラム表示には出来るのですが、機能の説明に以下のように書かれているように完全レスポンシブでは利用できません。

      PCでサイドバーをレスポンシブ表示
      PC表示時にサイドバーをレスポンシブ表示するか。オフにするとレスポンシブ表示されません。(※完全レスポンシブ機能がオフの時のみ有効な設定)

      ですので、機能で行う方法はありません。
      完全レスポンシブで行うには、スタイルシートで自前で設定していただくしかありません。

    • #29411
      あっぷー
      ゲスト

      わいひらさま

      ありがとうございます!

      わかりました。simplicityを使っている方のサイトをタブレットで見るときれいに2カラム表示されていたので、質問させてもらった次第です。

      私自身が知識不足で、simplicityに頼りっぱなしの状況ですので少しずつ勉強しながらsimplicityを今後も活用させてもらいたいと思います。今後もよろしくお願いします。

9件の返信スレッドを表示中
  • トピック「タブレットでカラム落ちしてしまいます。改善方法はありますか?」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)