スマホで見た時の個別ページのトップの表示について

PR 2016/8/29

このトピックには2件の返信、1人の参加者があり、最後に田中により8年、 8ヶ月前に更新されました。

2件の返信スレッドを表示中

投稿者

投稿
- 2016年8月27日 11:10 AM #44716
  
  田中
  ゲスト
  
  お世話になっております。田中と申します。
  
  スマホでカテゴリや個別ページを見たときの表示についてですが、
  常にサイトタイトルと概要がページの上部に表示されるかと思います。
  
  これをスマホの場合のみ、トップページ以外のすべてのページで、
  サイトの概要を非表示にする事は可能でしょうか？
  
  サイトタイトルと概要が長めなので、
  個別ページなどを見るたびに、
  毎回サイトタイトルと概要が表示されて、ウザく感じてしまいます。
  
  スマホだとＰＣとは違い、表示される面も限られてくるので、
  できるだけシンプルな感じにしたいと思っています。
  
  どうぞよろしくお願い致します。
  
  田中
- 2016年8月27日 2:04 PM #44722
  hidekichi
  ゲスト
  > スマホの場合のみ、トップページ以外のすべてのページで、
  > サイトの概要を非表示にする事は可能でしょうか？
```
@media screen and (max-width: 48em){
  #site-description {
    display: none;
  }
  .home #site-description {
    display: block;
  }
}
```
  こんなんでどうでしょうか？試してないので条件に合うかどうかはアレですが。max-width: 48emは、pxでいうと768pxです。これはスマホ横向きも考慮してます。縦向きだけで良かったら、30emで良いだろうと思います。iPhone6plusあたりぐらいまでならこれでカバーできます。
  
  説明としては、画面幅が48em以内の端末では#site-descriptionは非表示にし、bodyタグにhomeがある時だけdisplay: blockで表示します。つまり、トップページの時は表示し、それ以外は非表示と言うことです。
- 2016年8月27日 9:02 PM #44736
  
  田中
  ゲスト
  
  hidekichiさん
  
  こんなやり方もあるんですね！とても勉強になります。
  さっそく試したいと思います。
  
  ありがとうございました！
投稿者

投稿

2件の返信スレッドを表示中

トピック「スマホで見た時の個別ページのトップの表示について」には新しい返信をつけることはできません。