SIRIUSスマホサイトの文字サイズ(フォントサイズ）を変更する方法

トップページ＞ SIRIUSシリウスカスタマイズや小技＞スマホサイトの文字サイズを変更する方法

SIRIUSのスマホサイトの文字サイズを変更して見やすくしよう

SIRIUSシリウススマホサイト文字サイズ変更

SIRIUS(シリウス）上位版では、PCサイトを簡単にスマホサイト（iPhoneサイト）に変換できる機能があって便利です。

しかし、サイトオプションで変更できる文字サイズはPCサイト用だけであり、スマホ用のサイトはCSSファイルを手動で弄る必要があります。

今回はスマホサイトの文字サイズ（フォントサイズ）変更方法をご紹介します。

※デフォルトテンプレートとレスポンシブウェブテンプレート両方のやり方をご紹介しています。

デフォルトだとフォントサイズ14pxになっている

SIRIUS（シリウス）のスマホサイトテンプレートは、デフォルトでは文字サイズが14pxです。最近、ディスプレイサイズが大きいものが増えてきたとはいえ、iPhone5のディスプレイサイズだと、40歳過ぎの人にとっては14pxだとちょっと見づらいです。iPhone6でも「もうちょっと大きい文字の方が良いかな」と感じている人は多いようです。

サイト制作で大切なことは「見やすく、読みやすく」です。よって、幅広い年代がターゲットのサイトの場合、文字サイズは16pxにする方が良いと思われます。

私が初めて作った胸郭出口症候群のサイトは、20代～60代まで幅広い人が訪れるため、スマホサイトの文字サイズはカスタマイズして16pxにしています。実際にスマホで見て頂いてご確認ください。私は見やすいと思っています。

スマホサイト文字サイズ変更方法

前置きが長くなりました。ではSIRIUSスマホサイトの文字サイズ変更方法です。

カスタマイズは簡単。

SIRIUS（シリウス）スマホサイト文字サイズ変更方法1

シリウス編集画面の上部タブ「テンプレート」をクリック。

「IPhoneサイトスタイルシートの編集」をクリックしましょう。

SIRIUS（シリウス）スマホサイト文字サイズ変更方法2

7行目あたりに「font-size」の項目がありますので、お好みのサイズに変更してください。私は16pxがオススメです。

変更したら必ず「保存」をクリックしましょう。

次に「サイト生成」を行い、アップロードします。

SIRIUS（シリウス）スマホサイト文字サイズ変更方法3

「全てのファイルをアップロード」すれば手っ取り早いですが、200ページ以上のサイトになるとアップロード時間が結構かかります。

時間を短縮したい場合は、「iphone」のフォルダを右クリックしてアップロードしましょう。こうすることで、スマホサイトのデータだけがアップロードされます。

SIRIUSレスポンシブウェブテンプレートの文字サイズ（フォントサイズ）変更方法

公式側で追加された、レスポンシブウェブテンプレート（シンプル）や、当サイトのプレミアム会員限定テンプレートfacile・grand・fine・fineキュート版でスマートフォンで見た場合の文字サイズ（フォントサイズ）を変更する場合は、先にご紹介したやり方と違います。

SIRIUSレスポンシブウェブテンプレート文字サイズフォントサイズ変更方法1

まずは　編集　＞スタイルシート　を選択。

次に、スタイルシートの一番下に以下のコードを書いて保存します。
（コピペでOKです）

@media screen and (max-width: 640px) {
#main .text, #text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10{ font-size:好きな文字サイズpx;}
}

SIRIUSレスポンシブウェブテンプレート文字サイズフォントサイズ変更方法2

今回は例示で分かりやすいように20pxにしました。

SIRIUSレスポンシブウェブテンプレートfinegrandのスマホサイト文字サイズ表示

プレミアム会員限定テンプレートのfacile、grand、fine、fineキュート版をご利用の方は、先ほどのスタイルシートコードを「リストタグのスタイル」の直前に書いてください。こうしないと、便利なオリジナルスタイルコードのフォントサイズも一部崩れる可能性があります。

ではプレビューしてみましょう。
ブラウザでプレビューしている人は、ウィンドウ幅をスマホくらいの幅にすればスマートフォンとほぼ同じ表示で見ることが出来ます。

SIRIUSレスポンシブウェブテンプレートPCでの文字サイズ

PC表示での文字サイズは16pxです。（吹き出し部分はデフォルトで14pxのままで、これは弄ってません。）

SIRIUSレスポンシブウェブテンプレートスマートフォンでの文字サイズ

スマートフォン表示だと、コンテンツ内の文字サイズが20pxで表示されました。（まぁ20pxにする人はいないでしょうけど）

もしフリースペースもスマートフォンでのフォントサイズ表示を変えたい場合は、space1～6をスタイルシートに追記します。
例えばメインカラム上下もスマートフォン表示上のフォントサイズを変更したい場合は、#space1と#space2を「,」で区切って追記します。

【スタイルシートコード例】

@media screen and (max-width: 640px) {
#main .text, #text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10,#space1,#space2{ font-size:好きな文字サイズpx;}
}

行間を変えたい場合

SIRIUSレスポンシブウェブテンプレートのスマートフォン表示行間を変更する方法

もしスマートフォン表示の行間も変更・調整したい場合は、「line-height:1.8;」も追記してください。1..8の部分の数字はお好みで変更してください。数字が大きくなるほど行間は広がります。

通常は1.7～2.0にしている人が多いですが、大胆に2.4と広くしている人もいます。
これはサイトコンテンツの性格やジャンルにもよると思います。

全ての調整が終わったら、保存してサイト生成、スタイルシートをアップロードします。（全てのファイルをアップロードでもOKです）

フォントサイズの考え方

サイト制作者やターゲット年齢層でフォントサイズを変更する人は多いですね。
年配向けサイトならPCとスマホ両方とも16px表示、60代向けサイトなら17~18px表示、20代向けサイトならPC15px表示にしたりなど、多⓪ゲットとジャンルで意識して変えている方もいます。（私もです）
文字サイズが小さいと、見にくくて閉じてしまいたくなるんですよね。内容も頭に入ってきにくいですし。

以上、SIRIUSのスマホサイトの文字サイズ（フォントサイズ）を変更する方法でした。