…ということで、本日はフォントについて書きたいと思います（この記事の内容はパソコンから閲覧するユーザーを対象としたもので、スマートフォンで表示した場合に記事内の文字が変わることはありません）。
こんなお話しはウェブを触っている人にとっては「いろは」の「い」までいかないくらいのことなんですが、ページを閲覧すると、意外なくらいまだMSPゴシックを使っているサイトが多い。
実務の情報を求めてアクセスしてこられる士業の先生方に、少しでも貴方のホームページを綺麗にして頂ければ、という想いで出稿します。
ウェブで表示されるフォント
簡単に申し上げるなら、ホームページでどういう書体、すなわちフォントを用いるかというのは、原則的にホームページ側で決定します。
通常は、いくつか設定しておいて、最初にマッチしたフォントがあればそのフォントで表示され、なければ次順位…という具合になります。
どれもなかった場合はブラウザの判断で標準のフォントが選択されます。
現在主流となっているウィンドウズ7以上のパソコンには、メイリオというとても綺麗なゴシック体のフォントがインストールされています。まさにこの画面がそうです。
ただし、アップルのOSにはメイリオはインストールされていません。ですので、このホームページでは、ウィンドウズ用とMAC OS用にそれぞれフォントを指定しています。
最近では、ウィンドウズ8以上に【游ゴシック】と【游明朝】がインストールされており、MAC OSにも同じフォントが入っていますので、共通の書体で表示させることができるようになりました。
試しに、行政書士法第一条を【游ゴシック】で表示させてみましょう。
第一条 この法律は、行政書士の制度を定め、その業務の適正を図ることにより、行政に関する手続の円滑な実施に寄与し、あわせて、国民の利便に資することを目的とする。
この場合、上記ブロックのみに書体を適用させていますので、【游ゴシック】がインストールされていないウィンドウズ７で見た場合、ブラウザの標準フォントで表示されます。
メイリオ書体での表示は以下です。
第一条 この法律は、行政書士の制度を定め、その業務の適正を図ることにより、行政に関する手続の円滑な実施に寄与し、あわせて、国民の利便に資することを目的とする。
ちなみに、いまだによく使われているのは、マイクロソフトのフォント【MS Pゴシック】です。
この書体は、次のとおりです。
第一条 この法律は、行政書士の制度を定め、その業務の適正を図ることにより、行政に関する手続の円滑な実施に寄与し、あわせて、国民の利便に資することを目的とする。
いかがですか。ウィンドウズ７でご覧になっている場合、最初のフォントと変わっていないことでしょう。これは、基本的にはブラウザの標準書体が【MS Pゴシック】に設定されていることが理由です。
ちなみに、上述のフォント設定はウィンドウズ向けのみに行っていますので、MAC OSからご覧になった場合は、ブラウザの標準書体が表示されているはずです。
フォントはどうやって変更するのか？
では、ホームページで用いるフォントを変更するにはどうすればいいのでしょうか。ごくごく、ご～く簡単に説明すると次のようにまとめられます。
業者さんに依頼して作ってもらった場合
その業者さんに連絡し「表示書体を今風に変更してほしい」と伝えましょう。基本的に作業は２分とかからないはずです。
自分で作った場合
たとえば、もしホームページビルダーなどの市販ソフトで作成された場合は、そのソフトに応じた設定方法で行うのが得策です。ですので「ソフト名 フォント変更」などのキーワードで検索なさるとよいでしょう。
次に、テンプレート等を購入して作っていらっしゃる場合は、原則としてstyle.cssというファイルを編集する必要があります。
ただし、テンプレートでは書体設定が常にstyle.cssで設定されているとは限りません。幾つかのスタイルを読み込んでいる場合もありますので、分からない場合はとにかく制作者に連絡するのが一番です。
style.cssでは、通常、上部の方にフォントを定義している箇所があります。たとえば、法務省のサイトでは次のようになっています（日本語部分は当職が分かりやすいように付記しました）。
body {/*ホームページの重要な部分について定義します。*/
background-color: #fff;/*背景は白とします。*/
color: #222222;/*文字色は真っ黒じゃないけど黒に近い色にします。*/
font-family: "ＭＳ Ｐゴシック","MS PGothic",Osaka,"Hiragino Kaku GothicPro",sans-serif,Helvetica,Verdana;/*フォントはＭＳ Ｐゴシック、Osaka、ヒラギノ角ゴシックプロ…といった優先順位で表示させます。*/
min-width: 980px;/*横幅の最小値は980ピクセルとします。*/
text-align: center;/*文字の配置は中央寄せとします。*/
}
この「font-family」の部分を書き換えます。
font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Osaka,"Hiragino Kaku GothicPro",sans-serif,Helvetica,Verdana;
と、法務省のページをベースにすればこのような記載になりますね。これをもう一度サーバーにアップすれば、なんとまぁ、随分雰囲気がシュッとしたホームページに様変わりするわけです。
とはいえ、このホームページのトップページのように、複雑なカラム構成を採用している場合、フォントを変えることによって段落がずれる可能性もあります。フォントを変えた後はページを閲覧して表示がおかしくないかチェックすることが肝要です。
どうしてフォントの話しなの？
そうですね。１２月１日に大きな申請案件が終わってホッとしたというのもあるんですが、実は、今、行政書士様のホームページ制作に取りかかっていて、そのウェブでは、おそらく士業初！であろうグーグルのウェブフォント「Noto Sans Japanese」を使ってみようかな、と思っていたのです。
実際に表示させてみたのですが、う～ん…やはり見慣れているせいかメイリオの方が綺麗に感じます。以前、このホームページも一瞬だけ【游ゴシック】を使ったことがあったのですが、１分で元に戻しました。
私はメイリオが大好きで、実は許認可申請書類もわざわざメイリオで設定し直すくらいのファンなのです。
そんなこんなで今回はフォントを取り上げてみました。ホームページは全体的な印象も大切。メイリオが標準になりつつある今、お客様もＭＳＰゴシックよりはメイリオの方をお好みになります。まだＭＳＰゴシックをお使いの皆様はこれを機に変更をご検討なさってはいかがでしょうか。
さて、最後までお読み頂きありがとうございました。「フォントにためになったわ」と思って頂けましたら、応援のＳＮＳ清き一票をよろしくお願い致します。