wordpressで投稿したコラムの中身の文字の大きさをスマホとPCで分けたい

Question

前提・実現したいこと

初めまして。
まだwordpressはじめたての初心者です。

コラムを投稿しています。
文字のサイズをPCとスマホを別で見やすい大きさに分けたいです。
どのようにしたら良いかご教示下さい。

発生している問題・エラーメッセージ

PCでコラムを作成し、
いざスマホで見たら文字の大きさがPCサイズと同じになっているので
とても見にくくなっています。

該当のソースコード

 
<h1 style="text-align: left;"><span style="font-size: 36px; color: #f07c24;"><strong><span style="background-color: #fff0db;"><span style="background-color: #ffffff;">外壁塗装、屋根塗装をする３つの必要性</span></span></strong></span></h1>
&nbsp;

試したこと

調べてはみたのですが、どのようにソースコードを打ち込めばよいのかわからないのが現状です。

Answer 1

現状のHTMLを下記のように修正したらどうでしょうか。

 
<style>
  #title {
    text-align: left;
    font-size: 24px;  /*スマホ用のフォントサイズ*/
    color: #f07c24;
  }
  @media screen and (min-width: 500px) {
  #title {
    font-size: 36px;  /*PC用のフォントサイズ*/
  }    
} 
</style>
<h1  id="title">
  <strong>外壁塗装、屋根塗装をする３つの必要性</strong>
</h1>
&nbsp;

スマホとPCの切り替えは、画面サイズが500px以上でPC用サイズ、500px未満でスマホサイズの設定ですが、その辺はご希望に合わせて変更してください。

@media - CSS: カスケーディングスタイルシート | MDN

Comments

[86yarou]

ありがとうございます。無事文字の大きさに変化がおきました。