BloggerでSmartというテーマを使っています。

そのテーマにおいてスマホの画面に表示される時の文字の大きさを変更するときに学んだことをまとめておこうと思います。

スマホの画面における文字の大きさの変更

スマホの画面ではレスポンシブで設定している表示方法が適用されます。

結論から言うと、「/* レスポンシブ（タブレット小縦） */」と書かれているところのうち、

「.post-area」が含まれているところの「font-size:」の値を変更すればできます。

コメントがない場合は「@media (max-width: 768px) {」と書かれているところです。

/* レスポンシブ（タブレット小縦） */

 @media (max-width: 768px) {

      .post-area h1 {

        font-size: 18px;

        padding: 10px 15px;

      }

ブログのメインのところに「post-area」というクラスが含まれているので、そこが記事本体だと思います。

「@media」では端末に応じたCSSを適用でき、今回は幅が768px以下の端末にこのCSSを適用しています。

また「.post-area」の「.」はクラスを表し、これが「#」であればidになります。

CSSで変数を使う

文字の大きさを設定するときにh1やh2の文字の大きさをいっぺんに設定したいと思いました。

これは変数で文字の大きさを表せば解決します。

これをカスタムプロパティと言います。

変数の宣言は以下のようにします。

:root{

    --SIZE:23px;

}

「:root」内に「--変数名:」とするだけです。

ここでは「--SIZE」という変数に23pxを代入しています。

CSSで計算をする

その変数を使って計算するには以下のようにします。

        font-size: calc(var(--SIZE)- 2px);

変数は「var(--変数名)」として使えます。

それを計算するときには「calc()」の中に書きます。

ここではh2の大きさを「--SIZE」より2pxだけ小さくしています。

注意として、「+-」の記号は後ろにスペースを入れないと使えません。

符号として認識されてしまうからです。

行間を調整する

他の人のブログをスマホで見ていると、行間が大きくて見やすいことに気が付きました。

そこで行間を大きくしようと思いました。

行間は「line-height」で調節できます。

line-height:100px;

とすればめちゃくちゃ行間が広がります。

注意としては「line-height」で設定した値はフォントの大きさも含むということです。

「line-height」の値からフォントサイズが引かれた値の半分の大きさの余白が上下にできます。

これは「margin」や「padding」でも同じようなことができます。

「padding」は要素の大きさ、「margin」は要素の間の大きさを調整できます。

ただpタグに適用したらどっちも同じように表示されました。

使い方は以下の通りです。

margin:10px;　/*上下左右10px*/

margin:10px 5px;　/*上下10px 左右5px*/

margin:10px 5px 3px;　/*上10px 左右5px 下3px*/

margin:10px 5px 3px 1px;　/*上10px 下5px 左3px 右1px*/

CSSを部分的に適用しない

line-heightを適用すると見出しや目次まで適用されてしまいました。

そこの行間は変えたくなかったので、CSSを適用しないようにしました。

CSSを適用しないようにするには「:not()」を使います。

 .post-content :not(h1) :not(h2) :not(h3) :not(h4){

        font-size: calc(var(--SIZE)- 5px);

        line-height:100px

      }

こうすればh1～h4にCSSを適用しないようにできます。

タグだったらそのままですが、classだったら「.」、idだったら「#」を名前の前につけます。

「type="タイプ"」だったら大括弧「[]」で囲みます。

まとめ

スマホで見やすくしようとCSSを少し勉強しました。

結局、行間はnot()を使っていないのになぜか一部適用されないところがあったり、目次に適用されてしまったりとわからないところが多かったので諦めました。

もっと勉強します。。