普通にスマホのタイトル文字を小さくできた

こんにちは！サキナオコです^o^
今日も良いお天気ですね！！

いつもご覧いただき、ありがとうございます！！＊^o^＊

先日、スマホのタイトル文字を小さくしてみたのですが

https://programming.sakinaoko.com/2022/02/24/n6/

!importantを使用してみたのですが、やはりベストな選択とはいえませんでしたね（ご教示感謝です！）。

記事タイトルの大きさを変えるだけなので、!importantを使用しないでもなんとかなりそうです。

まず、確認でChromeのデベロッパーツールでタイトルの指定がどうなっているか見ます。h1なんですが大きさが2.2remになってます。

あっ。忘れてました。パソコン用にタイトルを大きくするのに自分で追加CSSを入れていたのでした。CSSは最後に指定したものが有効になるんでしたよね。だからスマホでも大きいままになっていたのかぁ。

ということで外観—テーマファイルエディタ—style.cssのメディアクエリの480px以下の下へフォントサイズを小さくする指定を入れたのですが…

反映されず。

じゃあ追加CSSの方へ書いてみようかな、と思い
外観—カスタマイズ—追加CSSにメディアクエリを入れてフォントサイズを小さくして入れてみました。

/*480px以下*/
@media screen and (max-width: 480px){
  h1.entry-title {
  font-size: 1.5rem;
  padding: 0.5em 0.5em;/*上下の余白*/
}

}

そうしたら…

あらま！反映されました（note風な大きさにしてみました）！！

ちょっとせっかくなのでよく見る吹き出し機能を使ってみたく…

わ、おもしろい。対話っぽくしてみるかな。

できた(*´艸`*)

あとはコメント欄の鎖国状態をどう解決するか…

ではでは〜