【PCとスマホ両方】表示される文字の大きさや行間について

  • J

    記事入力の画面で、既定の文字の大きさがを14pxになっているのを、パソコンでは20px相当、スマホでは18px相当に見えるように換えたいのですが。

    CSS追加でやることを知らないまま、記事を各画面で、その都度文字の大きさを14から20pxに大きくして、書き続けてきました。
    そうすると、これからもずっと毎記事の文章入力の度にこの<span style="font-size: 18px;">コードが足されてしまう・・手間だし、ファイルの内容的にも良くないのかな（読み込みに影響しませんか？）と思いなおして、追加CSSで対策をしようとやってみたのですが・・

    確かに、追加CSSに

    .entry-content {
    font-size: 18px;
    }

    と追記すれば文字は大きくなるのですが、記事ごとに18pxを選んで書いた時の文字の大きさと微妙に違います。文字間と行間も大きくなって、全体的に空きすぎます。
    文字間と行間のを調節するコードを追加してみても、記事ごとに18pxを選んで書いた時ほどに詰まりません。

    line-height: 1.0;
    letter-spacing: -0.1em
    など
    （これを追記しても、変わるのは吹き出しやサイドバーの文字だけで、本文に影響しない）

    記事ごとに、毎回文字を大きくしないと、その通りの文字間や間隔は実現しないのでしょうか？
    スマホ用のために、
    @media only screen and (max-width: 959px) {
    font-size: 18px;
    }

    と設定してみても、やはり、毎記事文字の大きさを選んで書いた文章のようには、詰まって表示されない・・空きすぎるんです。（文字間と行間のを調節するコードも効きません）

    どのようにしたら、一番良いのか教えていただけるとほんとうに助かります。

    よろしくお願いいたします。

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS : Windows10
    ご利用のブラウザ : chrome
    該当サイトのURL : https://honeytaste.me

    0

  • こんにちは！以下のようにしてCSSを書き分ければいいかと思います。

    /*スマホでの表示*/
@media (max-width: 767px) {
.entry-content {
font-size: 18px;
}
}

/*スマホ以上での表示*/
@media (min-width: 768px) {
.entry-content {
font-size: 20px;
}
}
    1
  • J

    ひつじさん！　ご返信ありがとうございます！
    まさかご本人から回答いただけているとは思ってもいませんでした１
    感動です！ありがとうございます！

    あれから、自分なりにためして、自分の思った通りの文字の大きさと行間の表示にできました。

    /* 本文文字大きさ /
    .entry-content p {
    font-size: 1.2rem;
    line-height: 1.5; /     行間 */
    }

    /* スマホ本文文字 */
    html{
    font-size:16px;
    }
    body{
    font-size:1rem
    }
    @media screen and (max-width:480px){
    html{
    font-size:3.8vw;
    }
    }

    p{
    font-size:1rem;
    }

    ほんとに初心者過ぎて、このコードにも？の部分がありますが、いじるとわけわかんなくなるので、そのままにしています。
    文字の大きさをいじっても、変わるところと変わらないところ。
    行間を変えても、かわるところとかわらないところがあって。
    たぶん、優先的に設定されてしまっているところがあるんだとおもうのですが、ほんとうにわからない・・・

    抜け毛が増えました。

    ありがとうございました。

    0