このページでは、簡単かつ上手にブログのフォントを選ぶ方法を紹介したいと思います。
想定読者さん
フォントを変えたいけど、どう選べばいいのかわからない
他のサイトさんの文字が気になって、フォントを知りたい
自分もフォントを変えて、サイトの文章を目立たせたい
といった悩みが、ブログを運営しているうちに出てくると思います。
なので、そんな悩みを解消する、強力なツール「WhatFont」をご紹介です。
フォント選択の強い味方「WhatFont」
「WhatFont」は、Webブラウザ「Googleクローム」の拡張機能の一つです。
「Webページ上のフォントを識別する、最も簡単な方法」と紹介されていますが、実際にそうだと思います。
というのも、マウスカーソルを文字の上にもっていけば、それだけで文字のフォントが分かるからです。
拡張機能なので、クロームさえあれば誰でも使えます。
ということで、まずは使えるようにするまでの手順を解説していきます。
手順1：WhatFontをダウンロードする
まず、WhatFontを配布しているページにアクセスします。
>> WhatFont（Chromeウェブストア）
アクセス後「Chromeに追加」をクリック。
「WhatFontを追加しますか」と表示されるので、「拡張機能を追加」をクリックする。
「WhatFontがchromeに追加されました」という文章を確認して、ポップアップを閉じる。
ピンマークにカーソルをあわせると「拡張機能を固定します」と出るので、クリックしてツールバーに固定する。
「アイコン選択＞サイトデータの読み取りと変更を行います＞拡張機能をクリックしたとき」と選ぶ。
サクッと導入完了で、使う準備が整いました。
WhatFontで他のサイトを上手に取りいれる
WhatFontを設定したあとは。
「フォントを調べる」「フォントを設定する」の作業に移りましょう。
他のサイトのフォントを調べてみる
クロームで、フォントを調べてみたいなと思ったサイトを開いて、WhatFontをクリックしたら。
一発で、いい感じだなと思ったサイトのフォントが識別できます。
AFFINGER5（アフィンガー5）でのフォント変更の設定
WhatFontで気になるフォントがわかったら、あとはテーマに反映させるだけです。
ここでは、自分が使っている「Kosugi Maru（リンク先はGoogleフォント）」と、テーマ「WING（AFFINGER5）」のフォント設定で解説します。
テーマ管理＞デザイン＞フォントの種類に進む
Googleフォント設定をするためのリンクを入手するため、
「Googleフォント＞Kosugi Maru」のページを開く
フォントのページを開いたら、「Select this Style＞Embed」と進む
表示されていた「linkの文字列を上段」「CSSの文字列を下段」に貼って、Googleフォント反映箇所にチェックする
これで保存をしたら、ブログ上の文字がKosugi Maru（新しいフォント）になっているはずです。
まとめ：フォント変更で自分好みの文章を書こう
まとめると、ツールを使って、いい感じに他のサイトを取りいれるのが、見た目をととのえるための一番の近道です。
WhatFontだと、導入も使いかたもとても簡単なので。
フォントをサクッと決めて、良いデザインのブログを目指しましょう。
とはいえ、最後に注意点を一つ。
例えば、今回紹介したGoogleフォントを取りいれた場合。
仕様上、サイトの読み込みスピードに若干の影響が出るようです。
サイトを読みこむ速さは、Googleの速度測定ツール「PageSpeed Insights」を使ったらわかります。
>> PageSpeed Insights
なので、フォントを取りいれた後、表示まで時間かかるな～って感じるほどに。
極端に読みこみが遅くなった場合は、別のフォントを選ぶことを推奨します。
でも、本来は「見やすいな」とか「自分の好みなんだけどな」という気持ちをもって選んだはずなので。。
あんまり気にならない程度の速度差であれば、そのまま使ってOKだと思います。
まず自分の好きが反映されていることが、気持ちの面でも、差別化をはかるうえでも大事なはずです。
または、読みこみ速度は、レンタルサーバ―の性能にも左右されるので。
このブログで使っている「ConoHaWING」など、ハード面で対処するのも一つの手かもしれません。
「国内最速・高安定の高性能レンタルサーバー【ConoHa WING】」
▼ConoHaWINGに関する記事はこちら▼
-
-
【図解】ConoHa WINGのドメイン取得からWordPress設定までを解説
続きを見る