フォントで惹きつける・フォントで読ませる｜WordPressでWebフォントを使う方法
zio唐突ですが、当サイト Zio-Start.comの記事…みなさん、好きですか？
普段から、できるだけわかりやすく、読みやすい文章を心がけて書いています。
でも、何年もブログを書いていると、ふとした瞬間に「あれ？つまらない！え？」っとなる瞬間があります。
そんな、「書いていてつまらない」を、フォントでちょっと面白くする方法を紹介します。
書いていて面白いは、読んでも面白い
たとえば、雑誌。
同じページの中に、大きな見出しがあったり、小さな文字が添えられていたり、写真の横に短い文章があったり。
文字の大きさや形、並び方まで含めて「読む」ことを楽しませてくれます。
楽しいからこそ、どんどんページをめくりたくなりますよね。
ブログにも、この自由さがあってもいいと思うのです。
わかりやすい文章を書くことはもちろん大切ですが、魅せる文章にする工夫があるともっと読みやすくなっていくのではないでしょうか。
今回はその中でも「フォント」に注目してお話しします。
「つまらない」にスパイスをくれるフォント
記事を書いて、公開した時に、内容はいいのにパッとしない…ということありませんか？
定型の見出しに定型の本文。ブログはどうしても単調な見た目になりやすく、読む前からちょっと退屈に感じてしまうことがあります。
そんな時に、文字の色を変えたり、マーカーなどで装飾する方法もあります。でも、フォントそのもので遊んでみるのはどうでしょうか？
フォントで違和感をつくる
例えば、
こんな風に
これまでとは違うフォントが文章に出てきたら？
ちょっとした違和感に、ついつい目が行ってしまうのではないでしょうか？
この「なんだろう？」と惹きつける力が、Webフォントで作った「違和感」の効果です。
私のサイトでは、読者に見て欲しいポイントにWebフォントをこんな風に使っています。
※このサイトで使っているのは「Yomogi」というGoogleフォントです。
Webフォントをブログに追加してみよう
ここからは、実際にWebフォントを追加してみましょう。
この記事では、無料で使えるGoogle Fontsを例に、WordPressでWebフォントを使う方法を紹介します。
基本は、①フォントを選ぶ → ②フォントを読み込む → ③使いたい場所に指定する という3ステップです。
1．使いたいWebフォントを選ぶ
まずはGoogle Fontsから、使いたいフォントを探します。
日本語のフォントもいろいろ用意されています。私は「Yomogi」を使っています。
やわらかく、親しみやすい雰囲気を出したいときに使いやすいフォントです。
フォントを選ぶときに見て欲しいのは
- ブログの雰囲気に合っているか
- 見出しに使うのか・本文に使うのか
- アクセントとして使いたいのか
という点です。「好きだから使う」でも、全然OK。
せっかくのWordPressのブログ、自分の好きなもので遊んでください。
2．Google Fontsを読み込む
使いたいフォントが決まったら、「Google Fonts」のページからコードを取得します。
１．画面右上の「フォントを取得」をクリックします
２．「HTMLの<head>タグ内にコードを埋め込んでください。」の下にあるコードをコピーします。
Yomogiの場合は、こんなコードです⇩
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
３．コピーしたコードをHTMLの<head>タグ内に貼り付けます。
WordPressテーマによっては、<head>内にコードを追加するための設定が用意されています。
たとえば、Cocoon、SWELL、SANGO、JIN:Rなどでは、テーマの設定画面から<head>内にコードを追加できます。
<head>内にコードを追加する機能がある場合
Google Fontsからコピーしたコードを、そこに貼り付ければOKです。<head>へコードを追加する機能がない場合
「WPCode」などのプラグインを使って、<head>内にコードを追加できます。
※設定場所がわからない場合は、「テーマ名 ＋ headタグ ＋ コード追加」などで調べてみましょう。
3．使いたい場所にフォントを指定する
次は、読み込んだYomogiを、使いたい場所に指定します。
1.まず、「外観 → カスタマイズ → 追加CSS」を開き、次のコードを追加します。
.yomogi {
font-family: "Yomogi", sans-serif;
}2.次に、Yomogiを使いたいブロックを選択します。
WordPressの編集画面から「高度な設定 → 追加CSSクラス」に、「yomogi」と入力します。
これで、そのブロックだけYomogiになります。
見出し、文章、ボタンなど、使いたい場所に同じ方法で指定できます。
Webフォントは「全部変えない」
Webフォントを使えるようになると、いろいろな場所を変えてみたくなります。
でも、ブログ全体を同じWebフォントにすると、かえって読みにくくなることもあります。
特に本文は、読みやすさを優先。使うなら、一文程度がおすすめです。
フォントは「文字そのものを飾る」というより、ブログの空気をつくるエレメントとして考えるとわかりやすいかもしれません。
普段目にしている、広告や雑誌、新聞もフォントの使い方のいいお手本になります。参考にしてみてください。
ブログにリズム
このブログも色々なところにWebフォントを使っています。
それまでの「書いていて、なんか…つまらない。」も、Webフォントで「遊び心」を加えることで画面にリズムが出せているかなと思います。
同じ文章でも、フォントが変わるだけで印象が変わります。
「きれい」「かわいい」「やわらかい」「ちょっと個性的」など、ブログ全体の雰囲気も変わってくるはずです。
まずは1か所から試してみよう
Webフォントを使うのは、思っているより簡単です。
いきなりブログ全体を変えるのではなく、
「まずは見出しだけ」
「この部分だけ」
というところから試してみるのがおすすめです。
フォントをひとつ変えるだけでも、いつものブログが少し違って見えてきます。
「なんだか、このブログ好きだな」
そんな雰囲気をつくる小さな工夫として、Webフォントを取り入れてみてはいかがでしょうか。
