モバイルの記事本文のフォントサイズを大きくしたいです。

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など モバイルの記事本文のフォントサイズを大きくしたいです。

  • このトピックには2件の返信、1人の参加者があり、最後にFにより6年、 11ヶ月前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #51715 返信
      F
      ゲスト

      Simplicity2を使ってます。
      スマホから見た記事本文のフォントサイズを大きくしたいです。
      モバイルcssのカスタマイズがよくわからず…
      ご教授お願いします!!

    • #51716 返信
      Hidekichi
      ゲスト

      どのようなカスタマイズをされているかにもよりますが、記事本文なら

      .entry-content {
        font-size: 任意の値;
      }

      で変えられるのが基本です。
      これは記事本文のみですが、記事の中の要素にもfont-sizeが設定されている場合はそれらも変える必要があります。

      ページ全体的に変えたい場合はbodyのfont-sizeを変えます。

      本来のやり方としては、htmlあるいはbodyに設定したfont-sizeに対して相対的な単位でやるのが理想ですが、Simplicityはわかりやすいようにpxで絶対値としてサイズが固定されていますので、どこか1つを変えればそれにあわせて全てが変わるようにはなっていません。

      またemは親要素のfont-sizeなどが影響するため、一番良いのはhtmlに基本のfont-sizeを設定し、他の要素をremで設定することです。これによって親要素の影響を受けず、基本のfont-sizeの相対値で設定できます。

      html {
        font-size: 62.5%;
      }
      
      .entry-content {
        font-size: 1.8rem;
      }

      htmlの基本サイズを10px相当にして、.entry-contentをその1.8倍、つまり18pxにするというのが理想ですが、これをすると他の部分がおかしくなる可能性も無きにしもあらず。

      で、質問の話に戻りますが、現時点で.entry-contentがどのような設定になっているかを確認する必要があります。何も設定していなければbodyからの継承で16pxになってるのがデフォルトです。ちなみにブラウザのデフォルトも何もしていなければ16pxです。

      ここで問題なのがカスタマイザーを利用してフォントサイズを設定している場合、simplicityの各cssよりも後でその設定が読み込まれます。

      <head>
      //各cssファイル
      
      <style>
        //カスタマイザーの設定
      </style>
      
      <style>
        //wordpressの追加cssなど
      </style>
      </head>

      ※投稿エラー回避で一部全角で書いてます

      このように読み込まれますから、カスタマイザーで設定したとかwordpressで設定したと言う場合、その設定値は各cssファイルからそのままでは上書きできません。正しくは、後で読み込まれるstyleタグの中のプロパティで上書きされてしまうということです。

      各cssファイル、例えばstyle.cssやmobile.cssで変更したい場合、カスタマイザーでフォントサイズやカラーを設定しないようにするか、いっそのことカスタマイザーからモバイル時のフォントサイズとPC時のフォントサイズを設定します。

      ここらの設定がどうなっているかで回答が変わります。
      強制的に!importantをfont-sizeに付けることで上書き禁止にできますが、!importantは!importantでしか上書きできませんから使い方が限定されてしまいます。

      また完全レスポンシブがONの場合はmobile.cssが利用できません。この場合はstyle.cssにメディアクエリを用いて書いて下さい。

      これら問題はサイトを見ればおおまかにどのような設定をしているかがわかるので、自力解決できない場合は、色々な注意書きに書いてあるようにサイトのアドレスを公開して下さい。

    • #51735 返信
      F
      ゲスト

      Hidekichiさん

      丁寧に教えて下さってありがとうございます(>_<)!!
      やってみます☆☆

2件の返信スレッドを表示中
返信先: モバイルの記事本文のフォントサイズを大きくしたいです。
あなたの情報:




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