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

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

このトピックには9件の返信が含まれ、2人の参加者がいます。2 ヶ月前 beeans さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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

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

トピック「スマホ閲覧時の記事タイトルのline-heightが詰まっている」への新規返信追加は締め切られています。

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