当ブログですが、スマホからの流入が圧倒的に多いです。パソコンやタブレットよりも。
パソコンを使って制作作業をする筆者からすると、ウェブサーフィンはもっぱらPCですが……ほぼどんなウェブサイトも、最近はもっぱらスマホからの流入が過半数を占めているのがインターネットの現状だと思います。
ブログ制作をしている環境は皆さんほぼ間違いなくパソコンからです。
そうすると、PCでのレイアウトや見た目ばかりに気が行きがちになってしまいます。
ならば！
スマホの見た目もっと気にしたほうがいいんじゃないかな？
と思いましたので今回、少しでも読み心地が良くなるようにフォントの変更をおこなってみました。
2018年9月4日追記
このエントリーを書いたのが2017年の1月。
あれから何度か、フォントを変えたりノーマル状態に戻したりと試行錯誤を繰り返しております。
ですので、あなたがちょうどたどり着いてくれた今、どのフォントが使われているかについては変動している可能性が高いです(;'∀')
フォント出しわけのCSS
採用する手段
閲覧しているブラウザの横幅（ピクセル数）が、スマホとPCでは異なります。
今回はそこを利用して、横幅ごとに表示するフォントを変える方法にしました。
レスポンシブデザイン（見てる人のブラウザの横幅に応じてレイアウトを変化させる方法）で組まれたウェブページならば、この横幅に応じて出しわける指定は相性が良いです。
指定する横幅の分岐点は、作るひとによって差があると思います。
私はあまり考えすぎず、さらりと『920px』あたりをターニングポイントにしました。
CSSの書きかた
まずそもそもフォントの指定をCSSでするときはこんな感じ。
body { ←どこを指定するか。今回はページ全体に適用できるbodyにした
font-family: "フォント名" ; ←使いたいフォントを書く
}
ブラウザの横幅ごとに使うCSSを使い分けるにはこんな記載を。
@media screen and (max-width: 300px){ ←ココがポイント。（）の中に条件を書く。この例では「幅300以下の時…」という意味
body { ←あとは普通にCSS書く
font-family: "フォント名" ;
}
}
こんな感じです。
@media screen and (max-width: 300px;)
⇒ 横幅が300以下のときのみ有効
という前提条件を書いて、その後ろに────
{ }
カッコで空間をおきます。この中に、さらに通常通りの書きかたでCSSを書き足します。
body { }
⇒ ボディタグ（つまりページ全体という意味になります）にスタイルシートをあてはめます、ということ。
font-family: "フォント名";
⇒フォントを指定します、というところです。「フォント名」には各フォントの正式名称を入れましょう。名前を間違ってるとちゃんと指定できません。
ウェブフォントを使うなら<head>の中にも指定が必要
スマホ用フォントで今回採用してみたのは『Noto Sans Japanese』というものです。
こちらはいわゆるウェブフォントですので、ただCSSを指定するだけでは表示されません。
フォントが表示されるには、当然、フォントデータが必要です。
そのフォントデータが広く汎用的に使われている基本的なものでない場合、特定のサーバーなどからフォントデータを拝借してきて、利用することができます。
これがウェブフォントです。
指定のしかた
ということで記載方法です。<head></head>の中に以下を記載します。
なお当ブログははてなブログサーバーで運用していますのではてなブログ用の設定場所を書いておきますが、『設定 ⇒ 詳細設定 ⇒ 検索エンジン最適化 ⇒ headに要素を追加』のところになります。
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
これで作業は終わりです。
スマホのフォントをためしに変えてみた見た目の違い
Googleが公開している早期アクセスの試験的フォント『Noto Sans Japanese』というものを使ってみた例を以下に載せます。
こちらのサイトでいくつか日本語フォントが公開されており、自由に使えるようになっていますので、もし気に入ったものがあれば試してみてはいかがでしょうか。
フォントを変更してみた表示の違いは、こんな感じです。
游ゴシックでは、細字に指定をしてもどうしてもやや太く見えます。
いっぽうNoto Sans Japaneseの場合、より細く繊細な字が表現できるようです。
ぜひいろいろ試してみてください。
コピペOK、サンプル例
筆者が試してみたパターンを応用したいぞ、というかたがいましたら、基本的に以下をコピペでOKだと思います。
表示を確認しながら、あとはお好みで手を加えるといい感じです。
@media screen and (max-width: 919px){
body {
font-family: "Noto Sans Japanese", YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "Avenir Next", 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif !important;
font-weight: 200;
}
}
@media screen and (min-width: 920px){
body {
font-family: YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "Avenir Next", 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif !important;
font-weight: normal;
}
}
上記CSSでは前半で919px以下で見たときの表示（つまりスマホを想定してます）と、後半でそれ以外、つまりパソコンからの表示を指定しているという状態です。
919px以下のほうにだけ"Noto Sans Japanese"を指定しているので、実質、スマホから見た場合にこの"Noto Sans Japanese"フォントが使われることになります。
余談：いろいろ応用の効くCSSの指定です
ちなみに、この横幅ごとに指定内容を変えるCSSの手法は、今回のようなフォントの件じゃなく、何にでも使えます。
スマホから見たときにだけ見せたいエリアを作る、
スマホのときだけ背景色を変える、
スマホのときだけ文字のボタンを画像のボタンに変える、
などなど自由自在です。
