blogger モバイル版のフォントサイズと行間

パソコン用の画面スタイルはまぁまぁ何とかなりましたが、さてモバイルバージョンではどうなのでしょう。これまでモバイルバージョンはオフにしてあったので問題無かったのですが、これをオンにするとこちらの見え方も調節しなくてはなりません。iPhoneで見てみたところ、何とも読みにくい、見難い画面です。

まずＰＣバージョンではほぼ見やすくなったフォントサイズでしたが、モバイルバージョンでは文字が小さくて読みやすいとは言えません。これに加えて行間が詰まりすぎ。
さて、ＰＣバージョンはカスタムCSSの追加でスタイルの調整が出来ましたが、モバイルバージョンの調節はどうやったらいいのか？

いろいろ調べて見た結果、ようやく分かりました。全体（PCバージョン）のCSSを追加する場合、例えば投稿本文のスタイルの場合のセレクタは「.post-body」になります。ですからこのクラスのセレクタにスタイルを設定すれば投稿本文のスタイルを変える事が出来るわけです。例えば自分のこのブログの場合は以下のようになっています。

.post-body{
font-size:1.1em;
line-height:1.7;
text-align: justify;
}

　　　フォントサイズ：1.1em
　　　行間：1.7
　　　テキストアライン：均等（各行の右端が揃うように）

と、簡単なものです。
さて、モバイルの場合はどうすればいいか。
どうやらモバイルバージョンの場合は全てが「.mobile」で括られているようです。という事は上記のCSSのセレクタの部分の先頭に「.mobile」を付け加えるだけで済むことになります。
具体的には

.mobile .post-body{
font-size:1.2em;
line-height:1.7em;
text-align: justify;
}

となり、フォントサイズを大きくして、行間は変えていませんが、指定方法がemなのでフォントサイズが大きくなった分、結果的に行間も広がります。「.mobile」を頭に付け加える、たったこれだけの事でPCバージョンとMobileバージョンのスタイルを変える事が出来ました。