Simplicityの特徴 › フォーラム › Simplicityについての質問 › タブレットでカラム落ちしてしまいます。改善方法はありますか?
- このトピックには9件の返信、2人の参加者があり、最後に
あっぷーにより10年、 11ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年7月16日 7:05 AM #29371
あっぷー
ゲストsimplicity使わせてもらっています。私のような素人でも使いやすく感謝しております。
一点質問があります。
こちらのサイトなのですが、タブレットで見るとサイドバーが投稿の下にきてしまいます。(スマホ表示になってしまう)
完全レスポンシブデザインをオフにするとタブレットでも2カラムで表示されるのですが、横が少しはみ出てしまいます。
そのため完全レスポンシブデザインをオンにしつつタブレットでも2カラムで表示させたいのですが、可能でしょうか?
(以前のトピックでタブレットではスマホ表示になるという記事がありましたが、simplicity使用している他ページはタブレットでも2カラム表示されているので、私の設定に何かミスがあるのかと思い質問させてもらいました)サイドバーの幅を336pxにはオフにしてあります。子テーマのテーマ編集でも見出しデザインを変えているくらいで、特に手は加えていません。
お手すきの時によろしくお願い致します。
-
2015年7月16日 7:32 AM #29372
あっぷー
ゲスト連投すみません。今確認しましたら、3つもトピックが投稿されていました。大変申し訳ありません。削除してくださると助かります。
-
2015年7月16日 11:10 AM #29378
Hidekichi
ゲストカスタマイザーにタブレットでもPC表示というのがありますので、そこらの設定になるかと思います。
また、右上のGoogleサイト内検索でわいひらさんのアドセンスに貢献しつつ「タブレット カラム落ち」検索すると、いくつか出てきますので、そこらも参考にされると良いのではないかと思います。またカスタマイザーで設定を変更すると、キャッシュの問題で設定が反映されないと言う話が度々でておりますので、このサイトのサイドバーに、「よく問い合わせがある症状」と言う欄がありますので、そこの 動作不良時のガイドラインを参考していろいろ試してみてください。
-
2015年7月16日 2:02 PM #29385
あっぷー
ゲストHidekichiさま 返信ありがとうございました。
キャッシュを削除したり、テーマをアップロードし直したりと色々ためしたもののなかなかうまくいきませんでしたが、教えて下さったgoogle検索で「タブレット カラム落ち」で探し、対処記事を見付けることができました。
完全レスポンシブルをオフ、PCでサイドバーをレスポンシブル をオフし、子テーマに
/************************************
** レイアウト(Layout)
************************************/
#header-in, #navi-in, #body-in, #footer-in{
width: 980px;
}
#main{
width: 670px;
}
#sidebar{
width: 300px;
}
と貼り付けたところ、ipadでもはみ出ずに2カラムで表示されるようになりました。どうもありがとうございました。
-
2015年7月16日 3:20 PM #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%幅まではレスポンシブで表示されるはずです。
参考画像

ただし、画像下にあるスクロールバーのように従来のcssで絶対値で指定してあるものが、範囲を超えたりすると横スクロールが発生しますので、それらの要素を再調整する必要があります。
またdisplay: flex等、flexに関係するものはベンダープレフィックスが必要になりますので、各々追加してください。 -
2015年7月16日 3:26 PM #29389
Hidekichi
ゲスト☓ Simplicityはheader、navi、body、footerとブロックがって
◯ Simplicityはheader、navi、body、footerとブロックがあって -
2015年7月16日 3:29 PM #29390
Hidekichi
ゲスト※ flex表示と通常表示の画像は、同じ画面をブラウザの横幅を縮めたりして撮っています。
スクロール位置は調整しましたけど(笑)
-
2015年7月16日 5:31 PM #29403
あっぷー
ゲストHidekichiさま
詳しく教えてくださりありがとうございます。まだ知識が不足気味なので、これからじっくり取り組んでみたいと思います。 -
2015年7月16日 5:32 PM #29404
わいひらキーマスターそのため完全レスポンシブデザインをオンにしつつタブレットでも2カラムで表示させたいのですが、可能でしょうか?
「PCでサイドバーをレスポンシブ表示」をオフにすると、2カラム表示には出来るのですが、機能の説明に以下のように書かれているように完全レスポンシブでは利用できません。
PCでサイドバーをレスポンシブ表示
PC表示時にサイドバーをレスポンシブ表示するか。オフにするとレスポンシブ表示されません。(※完全レスポンシブ機能がオフの時のみ有効な設定)ですので、機能で行う方法はありません。
完全レスポンシブで行うには、スタイルシートで自前で設定していただくしかありません。 -
2015年7月16日 6:11 PM #29411
あっぷー
ゲストわいひらさま
ありがとうございます!
わかりました。simplicityを使っている方のサイトをタブレットで見るときれいに2カラム表示されていたので、質問させてもらった次第です。
私自身が知識不足で、simplicityに頼りっぱなしの状況ですので少しずつ勉強しながらsimplicityを今後も活用させてもらいたいと思います。今後もよろしくお願いします。
-
-
投稿者投稿
- トピック「タブレットでカラム落ちしてしまいます。改善方法はありますか?」には新しい返信をつけることはできません。