タブレット時の表示レイアウト

  • このトピックには5件の返信、1人の参加者があり、最後に友永により9年前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #55899
      友永
      ゲスト

      はじめまして。いろいろなテーマをあれでもないこれでもないと長い間探していたところ、ようやくここにたどり着いたものです。

      タブレットでの閲覧時にPC表示とまったく同じ2カラムで表示させることは出来ないでしょうか。

      拙い知識をもとに、親テーマの「simplicity2/css/responsive-pc」に目をつけ
      管理画面のテーマの編集にある「style.css」上に

      @media screen and (max-width:1110px){
        div#header-in, div#navi-in, div#body-in, div#footer-in{
          width:740px;
        }

      のwidthをPCと同じくらいの1110pxと記述してみたりやってみたのですが、どうもわかりません。
      どなたかアドバイスいただけたら幸いです。

    • #55902
      かうたっく
      ゲスト

      外観ーカスタマイズーレイアウト(モバイル)からカスタマイザーの設定をチェックしてください。

      タブレットはモバイル表示
      タブレット端末をモバイルとして表示するか。

      これのチェックを確認して外すとタブレットはPCと同じになるかと思われます。

    • #55914
      友永
      ゲスト

      かうたっく様

      早速のお返事、ありがとうございます。
      書き忘れていたのですが、そこは最初に手を付けたところでして、
      そのチェックを外して「タブレットにモバイル表示を適用しない」にしているはずなのに
      サイドバーがメインコンテンツの下にスライドする、いわゆるスマホ的レイアウトになってしまうのです。
      ※ちなみにこのチェックをつけても外してもレイアウトは変わりませんでした。

      手持ちのタブレットはアイパッドエアーです。各ブラウザのデベロッパーツールでのタブレット表示でも同じでした。

      CSSで対応するしかないような気がするのですが、他にチェックすべき点がありましたら教えていただけたら幸いです。

    • #55916
      かうたっく
      ゲスト

      タブレットでの閲覧時にPC表示とまったく同じ2カラムで表示させることは出来ないでしょうか。

      2カラムでしたか…widthを変更しないといけないっぽいですね。iPadの幅の広いのは良いですけど、狭いものは、サイドバーが下へ回り込むので落ちないように指定する感じでしょうか。

      例えば、max-width: 値;

      値は、タブレットサイズからサイドバーやら余白を引いた数字。みたいな。

    • #55920
      かうたっく
      ゲスト

      タブレットでの閲覧時にPC表示とまったく同じ2カラムで表示させることは出来ないでしょうか。

      外観ーカスタマイズーレイアウト(モバイル)からカスタマイザーの設定

      タブレットはモバイル表示
      タブレット端末をモバイルとして表示するか。

      これのチェックを確認して外す。

      外観ーカスタマイズーレイアウト(全体・リスト)で、レスポンシブを外す。
      その後保存したり、別の項目へ移ったり、何かしらすれば
      下記のような項目がでてきます。

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

      これにチェックをいれると表示されるようになりました。(私の環境では・・・)

      1度この設定でタブレットでも表示できるか確認していただけますか。

    • #55923
      友永
      ゲスト

      かうたっく様

      再度お返事いただきありがとうございます。

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

      これのチェックを外すことでタブレットの2カラム表示が可能になりました。

      レイアウト(全体・リスト)で、レスポンシブを外すのは何度かやっていたのですが、
      教えていただいた通り、チェックを外した後、一度設定保存して管理画面に戻り、
      再度カスタマイズページに戻ったら上記の項目が表示されました。

      後はviewportの設定などで思った通りのレイアウトが実現できそうです。
      一旦管理画面に戻るのは、多分自分では気づけなったです。おかげで助かりました。
      何度もお付き合い頂き、本当に有難うございます。

5件の返信スレッドを表示中
  • トピック「タブレット時の表示レイアウト」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)