話題のウェアラブルスピーカー開封レビューはこちら

SimplicityでモリサワのWebフォントを導入する。

フォントにこだわる。

ブログの見た目を左右するのは、テーマに沿った色使いやCSSによるデザインであるというのは言うまでもないだろう。

しかしさらにこだわるならばフォントへのこだわりは欠かせない。

 

Webフォントというものをご存知だろうか。

WebフォントはWWWのコンテンツ側がフォントデータを持ちコンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化(レンダリング)をともなうクライアントが文字表示を行うシステムおよびそのフォントである。

Wikipedia より引用。引用者による強調あり。

 

そう、つまりブログを見てくれる人のPCやスマホのフォント設定をガン無視し、コンテンツを提供する我々が「このブログを見るならこのフォント以外ありえない」とでも言うかのようにこだわりを全面に押し出すことができる、そういう仕組みだ。

 

実際、フォントが変わるとブログの印象がガラッと変わるのを実感いただけることは断言できる。間違いない。

 

ここでは、WordPress + Simplicity + TypeSquare の組み合わせでWebフォントを実現する方法を共有する。
※現在はテーマ SANGO を使っている。以下は Simplicity 利用時の記録となる。

TypeSquareとは

TypeSquareは、モリサワフォントの数あるフォント群の中から好きなものを選んで自分のサイトにWebフォントとして設定できるという最高なサービス。

 

ひとつのフォントの利用であれば、月あたり1万PVまでは無料で利用可能だ。

これから伸び盛りのブロガーには、これはたいへん嬉しい。

 

スタンダードプラン
簡単にWebフォントをご利用いただけるプランです。
スクリプトタグを挿入し、書体名を指定するだけで、サイト内に必要な文字が自動検知され、クラウド上から閲覧環境に最適なフォントが配信されます。

 

さらにこのページでは、自分のサイトでWebフォントを適用したらどんな感じに表示できるかお試しすることができる。

参考

TypeSquare Web Font Tryoutモリサワ

TypeSquare導入方法

ここからは導入方法。

 

1. 会員登録

まずはTypeSquareのサイトから無料の会員登録をしよう。

後から自動でお金を請求される、などということは無いので安心してほしい。

参考

TypeSquare ご利用申込みモリサワ

 

2. header-insert.phpを編集

※ここから先の手順は、Simplicity2 child を導入していることを前提とします。以下の各編集作業においてはファイルのバックアップを取る試験環境で実験するなどして、もしものために備えてください。なお、問題が発生した場合の責任は取りかねますのであらかじめご了承のうえ読み進めてください。

 

必要な情報をコピー

登録が完了したらログインして、

プラン・オプション設定 > 確認・編集ボタンと進んでいくと、プラン設定詳細画面にプラン専用タグが現れるのでそれをコピー。

赤枠部分をコピー。
下のボタンで文字の表示方法を選択可能。

 

WordPressに貼り付け、適用

WordPressの 外観 > テーマの編集 > header-insert.php を選択。

PHP
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>

の下に貼りつける。

 

3. スタイルシート(style.css)を編集

必要な情報をコピー

先ほどと同じプラン設定詳細画面に自分で選択した書体の一覧領域があるので、そこにあるCSSの指定例をコピー。

例)UD Shin Maru Go Light

 

WordPressに貼り付け、適用

まず、Simplicity2 child には body{} が無いので親のほうからコピーしてきて子のほうに貼り付けておく。それをこれから子のほうで上書きする。

フォントの指定部分に、TypeSquareからコピーした情報を貼りつける。

「’ ‘(シングルクォート)」で挟んで、「,(カンマ)」を忘れないように。

CSS
body {
font-family:
'UD Shin Maru Go Light',
'Hiragino Kaku Gothic ProN',
Meiryo, Helvetica, Arial, sans-serif;
(中略)
}

 

導入後のポイント

以上でTypeSquareの導入手順は完了だが、確認前に必要になる(かもしれない)手順がある。

変更前のフォントが利用中のブラウザに残っている場合は、フォントがすぐに反映されて見えないことがある。その場合はブラウザでキャッシュを削除することで解決する。

忘れがちなことなのでポイントとして記載しておく。

 

おわりに

WordPress + Simplicity + TypeSquare の組み合わせでWebフォントを実現する方法を紹介した。

お役に立てたなら幸いだ。ぜひ知り合いに共有して教えてあげてほしい。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です