Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › タブレット時の表示レイアウト
- このトピックには5件の返信、1人の参加者があり、最後に
友永により9年前に更新されました。
-
投稿者投稿
-
-
2017年9月15日 7:47 PM #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と記述してみたりやってみたのですが、どうもわかりません。
どなたかアドバイスいただけたら幸いです。 -
2017年9月15日 8:10 PM #55902
かうたっく
ゲスト外観ーカスタマイズーレイアウト(モバイル)からカスタマイザーの設定をチェックしてください。
タブレットはモバイル表示
タブレット端末をモバイルとして表示するか。これのチェックを確認して外すとタブレットはPCと同じになるかと思われます。
-
2017年9月15日 11:27 PM #55914
友永
ゲストかうたっく様
早速のお返事、ありがとうございます。
書き忘れていたのですが、そこは最初に手を付けたところでして、
そのチェックを外して「タブレットにモバイル表示を適用しない」にしているはずなのに
サイドバーがメインコンテンツの下にスライドする、いわゆるスマホ的レイアウトになってしまうのです。
※ちなみにこのチェックをつけても外してもレイアウトは変わりませんでした。手持ちのタブレットはアイパッドエアーです。各ブラウザのデベロッパーツールでのタブレット表示でも同じでした。
CSSで対応するしかないような気がするのですが、他にチェックすべき点がありましたら教えていただけたら幸いです。
-
2017年9月15日 11:39 PM #55916
かうたっく
ゲストタブレットでの閲覧時にPC表示とまったく同じ2カラムで表示させることは出来ないでしょうか。
2カラムでしたか…widthを変更しないといけないっぽいですね。iPadの幅の広いのは良いですけど、狭いものは、サイドバーが下へ回り込むので落ちないように指定する感じでしょうか。
例えば、max-width: 値;
値は、タブレットサイズからサイドバーやら余白を引いた数字。みたいな。
-
2017年9月16日 12:27 AM #55920
かうたっく
ゲストタブレットでの閲覧時にPC表示とまったく同じ2カラムで表示させることは出来ないでしょうか。
外観ーカスタマイズーレイアウト(モバイル)からカスタマイザーの設定
タブレットはモバイル表示
タブレット端末をモバイルとして表示するか。これのチェックを確認して外す。
外観ーカスタマイズーレイアウト(全体・リスト)で、レスポンシブを外す。
その後保存したり、別の項目へ移ったり、何かしらすれば
下記のような項目がでてきます。PCでサイドバーをレスポンシブ表示
PC表示時にサイドバーをレスポンシブ表示するか。オフにするとレスポンシブ表示されません。(※完全レスポンシブ機能がオフの時のみ有効な設定)これにチェックをいれると表示されるようになりました。(私の環境では・・・)
1度この設定でタブレットでも表示できるか確認していただけますか。
-
2017年9月16日 12:58 AM #55923
友永
ゲストかうたっく様
再度お返事いただきありがとうございます。
PCでサイドバーをレスポンシブ表示
PC表示時にサイドバーをレスポンシブ表示するか。オフにするとレスポンシブ表示されません。
(※完全レスポンシブ機能がオフの時のみ有効な設定)これのチェックを外すことでタブレットの2カラム表示が可能になりました。
レイアウト(全体・リスト)で、レスポンシブを外すのは何度かやっていたのですが、
教えていただいた通り、チェックを外した後、一度設定保存して管理画面に戻り、
再度カスタマイズページに戻ったら上記の項目が表示されました。後はviewportの設定などで思った通りのレイアウトが実現できそうです。
一旦管理画面に戻るのは、多分自分では気づけなったです。おかげで助かりました。
何度もお付き合い頂き、本当に有難うございます。
-
-
投稿者投稿
- トピック「タブレット時の表示レイアウト」には新しい返信をつけることはできません。