スマホ閲覧時の記事タイトルのline-heightが詰まっている

Simplicityの特徴 フォーラム 要望・機能追加など スマホ閲覧時の記事タイトルのline-heightが詰まっている

  • このトピックには9件の返信、2人の参加者があり、最後にbeeansにより3年、 4ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #51124
      beeans
      ゲスト

      はじめまして。
      Simplicityを使用させていただいております。
      大変ありがとうございます。

      こちらへの書き込みで良いのかわからず、恐縮なのですが
      Simplicity2使用時、スマホから閲覧した際に
      line-heightが100%になっており、記事タイトルが詰まっているかと感じました。
      私は子テーマのstyle.cssへ下記設定を追記し使用しております。

      .entry h2, .entry h2 a {
      line-height: 1.3;
      }

      不具合というほどでは無いですが、
      多少の違和感を感じましたため、ご報告いたしました。
      お手すきでご確認いただけますと幸いです。

    • #51125
      Hidekichi
      ゲスト
      @media screen and (max-width: 500px) {
        .entry h2 {
          margin-top: 0;
          line-height: 100%;
        }
      }

      index.css:1631

      こやつが原因ぽいですね。narrow.cssにも書いてあるっぽいですかね。

      .entry h2 {
          font-size: 18px;
          line-height: 1.3;
      }
      .entry .entry-title {
          font-size: inherit;
          line-height: inherit;
      }

      メディアクエリは別として、.entry h2のfont-size 16px〜18pxあたり、line-height: 1.1〜1.3(110%〜130%)ぐらいが妥当でしょうか。

      .entry .entry-title(.entry h2 a)はfont-sizeとline-heightはいらないと思います。しかしながら後で何かしら装飾するにあたってクラスがついてるのは便利でしょうからそのままで良いかと思います。

      例として、

      サンプル: トップのリスト一覧の記事タイトルをモバイルファーストで書く | codepen
      ※ cssはscssで書いてます。css欄の下向き三角からview compiledでcssに変換できます。

      注意) インラインのcssは子テーマstyle.cssやmobile.cssよりも後で読み込まれるので、!importantをつけるかインラインのスタイルを読み込まないようにする必要があります。

    • #51126
      Hidekichi
      ゲスト

      line-height の注意点

      単位を指定すると親要素で計算されたline-height値が子要素、孫要素に継承されます。

      このため、Simplicityでは%でline-heightがしてされている場合が多いので、行間がそのフォントサイズに対して正しい比率になっていないことがあります。
      ここらを注意してスタイルして下さい。

      参考: 【CSS】CSSのline-heightで単位を指定しない理由 | qiita

    • #51127
      Hidekichi
      ゲスト

      ☓ してされている
      ○ 指定されている

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

      はじめまして。
      一応、スマホではスペースに限りがあるということもあり、間延びして表示されないようという考えから、そのようになっているのは一応仕様です。
      ご提案は、今後の参考にさせていただこうと思います。

    • #51150
      beeans
      ゲスト

      早速お返事いただき、ありがとうございます!

      仕様とのことで承知いたしました。
      大変失礼いたしました。

      当分はSimplicity2のお世話になるかと思いますので、
      今後とも何卒よろしくお願いいたします。

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

      もしかしたら、僕が動作確認している環境と、beeansさんが動作確認した環境が違うので、表示が違って見えているのかもしれません。
      よろしかったら、使用端末と使用ブラウザを教えていただければと思います。
      こちらでも同じ環境で確認してみようと思います。

    • #51156
      beeans
      ゲスト

      ありがとうございます。
      以下、私の閲覧環境になります。

      端末:iPhone6s
      ブラウザ:safari

      【ウェブサイトの状態】
      WordPress 4.7.3
      使用テーマ:simplicity2.5.0b(現在デフォルトの状態で使用)

      参考画像
      http://beeans.moo.jp/wp-content/uploads/2017/03/2017-03-17-21.56.00.png

      たびたび恐れ入ります。
      お手すきでご確認いただけますと幸いです。

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

      画像ありがとうございます。
      確かにそのキャプチャを見ると、詰まって見えますね。
      次のバージョンでもう少し、行間を広げようと思います。

    • #51187
      beeans
      ゲスト

      ありがとうございます。
      諸々、真摯にご対応いただき感謝いたします!

9件の返信スレッドを表示中
  • トピック「スマホ閲覧時の記事タイトルのline-heightが詰まっている」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)