スマホ表示でサムネイル大での記事間の上下の余白を狭くしたい

PR 2018/5/20

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

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

投稿者

投稿
- 2018年5月18日 4:46 PM #60036
  原田
  ゲスト
  初めまして、原田と申します。
  タイトルにもある通り、スマホ表示でサムネイル大での上下の余白を狭くしたいのですが、どうにもうまくいきません。
  
  サムネイル大で子テーマのstyle.cssに本文抜粋を非表示する
```
.entry-snippet{
  display:none;
}
.related-entry-snippet{
  display:none;
}
```
  を記述しました。
  
  更に上下の記事間の余白を狭める為に
```
#main .entry {
    height: 320px !important;
}
```
  を記述しました。
  
  PCで見ると余白が狭まってるのですが、スマホで見たら変わってなく、かなり間が空いています。
  どうすればスマホでうまく表示されるのか教えていただけないでしょうか？
- 2018年5月18日 10:11 PM #60043
  
  わいひら
  キーマスター
  
  できれば、カスタマイズ対象ページのURLを貼っていただければと思います。
- 2018年5月19日 3:49 AM #60046
  
  原田
  ゲスト
  
  わいひら様
  
  説明不足で申し訳ありません。
  対象ページなのですが、大変身勝手で申し訳ありませんが、内容が少し過激である為控えさせていただけたらと思います。
  
  その変わり、画像を添付したいと思います。
  （わいひらさんのアップローダーが403エラーが出るので他のアップローダーを利用させていただきました。）
  
  「PC表示の場合」
  http://fast-uploader.com/file/7082224626845/
  「スマホ表示の場合(iphone6)」
  http://fast-uploader.com/file/7082224670550/
  
  なおstyle.cssには上記のコードのみです。
  よろしくお願いします。
- 2018年5月19日 11:31 AM #60047
  Akira
  ゲスト
  ご自身で指定されている下記の CSS を削除すれば、空白は消えます。
```
#main .entry {
    height: 320px !important;
}
```
- 2018年5月19日 11:41 AM #60048
  Akira
  ゲスト
  タイル2列ではなく、サムネイル大にされていらっしゃるのか。下記の CSS でどうでしょうか？
```
.entry-snippet,
.related-entry-snippet {
  display: none;
}

#main .entry {
  height: auto;
}

@media screen and (max-width: 699px) {
  #main .entry.entry-large-thumbnail {
    height: auto;
  }
}
```
- 2018年5月19日 11:48 AM #60050
  
  原田
  ゲスト
  
  Akira様
  
  ありがとうございます。
  今消してみたら、PC・スマホ両方とも間が空いてしまい、少し考えたらstyle.cssとmobile.cssに別々のコードを記述したら解決しました！
  
  わいひら様、Akira様
  気付かせていただけたのはお二人のお陰です。
  わざわざありがとうございました！
- 2018年5月19日 12:00 PM #60051
  
  原田
  ゲスト
  
  Akira様
  
  ありがとうございます！
  今Akira様にいただいたコードで試してみると、PC・スマホ共に理想的なレイアウトで表示されました！
  ピクセル指定だと環境によってレイアウトが崩れてしまう恐れがあった為、これは助かりました。
  ありがとうございましたm(_ _)m
投稿者

投稿