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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など スマホ表示でサムネイル大での記事間の上下の余白を狭くしたい

このトピックには6件の返信が含まれ、2人の参加者がいます。1 年前 原田 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60036

    原田

    初めまして、原田と申します。
    タイトルにもある通り、スマホ表示でサムネイル大での上下の余白を狭くしたいのですが、どうにもうまくいきません。

    サムネイル大で子テーマのstyle.cssに本文抜粋を非表示する

    .entry-snippet{
      display:none;
    }
    .related-entry-snippet{
      display:none;
    }

    を記述しました。

    更に上下の記事間の余白を狭める為に

    #main .entry {
        height: 320px !important;
    }

    を記述しました。

    PCで見ると余白が狭まってるのですが、スマホで見たら変わってなく、かなり間が空いています。
    どうすればスマホでうまく表示されるのか教えていただけないでしょうか?

  • #60043
    わいひら
    わいひら
    キーマスター

    できれば、カスタマイズ対象ページのURLを貼っていただければと思います。

  • #60046

    原田

    わいひら様

    説明不足で申し訳ありません。
    対象ページなのですが、大変身勝手で申し訳ありませんが、内容が少し過激である為控えさせていただけたらと思います。

    その変わり、画像を添付したいと思います。
    (わいひらさんのアップローダーが403エラーが出るので他のアップローダーを利用させていただきました。)

    「PC表示の場合」
    http://fast-uploader.com/file/7082224626845/
    「スマホ表示の場合(iphone6)」
    http://fast-uploader.com/file/7082224670550/

    なおstyle.cssには上記のコードのみです。
    よろしくお願いします。

  • #60047

    Akira

    ご自身で指定されている下記の CSS を削除すれば、空白は消えます。

    #main .entry {
        height: 320px !important;
    }
  • #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;
      }
    }
  • #60050

    原田

    Akira様

    ありがとうございます。
    今消してみたら、PC・スマホ両方とも間が空いてしまい、少し考えたらstyle.cssとmobile.cssに別々のコードを記述したら解決しました!

    わいひら様、Akira様
    気付かせていただけたのはお二人のお陰です。
    わざわざありがとうございました!

  • #60051

    原田

    Akira様

    ありがとうございます!
    今Akira様にいただいたコードで試してみると、PC・スマホ共に理想的なレイアウトで表示されました!
    ピクセル指定だと環境によってレイアウトが崩れてしまう恐れがあった為、これは助かりました。
    ありがとうございましたm(_ _)m

トピック「スマホ表示でサムネイル大での記事間の上下の余白を狭くしたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)