気になるWEBサイトのフォント設定を表示する【Chrome】

WEBサイトで使われているフォント設定の詳細を、簡単に一発表示する方法の紹介です。

記事後半では、ブログのフォントを変更した際の見た目の違いの実例も上げています。

こんな人のお役に立てる記事です。

小豆

ここ最近見たWEBサイトのデザインがすごくよかった。
その中でも特にフォントがお気に入り。
あれって、自分のブログで真似することってできないの？

気になるWEBサイトのフォントは簡単に調べられる

小豆

このサイト、なんだかすごく居心地がいいなぁ。
文章も読みやすいし、長文なのにスラスラ読めてしまう。

何気なくWEBサイトを見ている時に、こんな風に感じることってありますよね。

実はこれ、WEBサイトで使われているフォントが関係している可能性大です。

たとえば、こちら「任天堂さんのWEBサイト」。

参考元：任天堂公式サイト

パッと見で、「読みやすさ」が伝わるはずです。

もちろん企業サイトだけでなく、個人ブログの中にもそういったサイトはたくさんあります。

小豆

確かに。
言われてみれば、参考にしたい気になるブログがいくつかあるかも。

そんな時に便利なのが、今回紹介する【WhatFont】ってツールなんだ。

大福

【WhatFont】でフォントの詳細を一発表示

【WhatFont】は、Google Chromeの拡張機能です。

この機能を使うことで、WEBサイトで使われているフォントの詳細を簡単に一発表示することができます。

これらの情報が分かってしまえば、自分のブログで参考にすることも簡単ですね。

WhatFontの使い方【インストール～終了方法まで】

【WhatFont】の使い方を、わかりやすく解説していきます。

step
1インストール

Chrome WEBストア　→　WhatFontを検索　→　Chromeに追加

Chrome WEBストア【WhatFont】に移動する

step
2アイコンをクリックして起動

WhatFontを起動するには、画面右上のアイコンをクリックします。

拡張機能アイコンをクリック　→　固定をONにする

step
3WEBサイトのフォントを調べる

WhatFont起動後は、カーソルを文字の上に持っていくとフォントの種類が表示されます。

フォントの上でクリックすると、さらに詳しい情報が表示されます。

step
4WhatFontを終了する

WhatFontを終了するには、画面右上のExit WhatFontをクリックします。

ブログのフォント設定を変更してみた

フォントでどれくらい見た目の印象が変わるか、実際にフォントを変更してみました。

フォント設定変更 A	フォント設定変更 B
フォント設定変更 C	フォント設定変更 D

画像はクリックで拡大できます

フォントの種類やサイズ、行間によって、だいぶ見た目の印象が変わりますね。

フォントの設定を変更することで、お気に入りのWEBサイトに見た目を近づけることができます。

小豆

なるほど。
ぜひ自分のブログでやってみたいけど、どうやるの？

使っているWordPressテーマなんかによって、方法が異なるんだ。

大福

フォントの設定を変更する方法

フォントの設定を変更する方法は、使用しているWordPressテーマなどによって異なります。

使用しているテーマ名　フォント設定　🔎で検索することで、詳細な設定方法を調べることができます。

たとえば、ブロガーに人気のテーマAFFINGER（アフィンガー）の場合は、以下のような設定が用意されています。

WordPressメニュー　→　AFFINGER管理　→　デザイン　→　フォントのサイズ

まとめ：フォント一つでブログの見た目は大きく変わる

普段あまり気にすることのないフォントですが、実はその影響力はけっこうなものです。

フォントの種類やサイズ、行間やカラーによって、ブログを訪れた人に与える印象はかなり違ってきます。

ちょっと極端な例ですが、「子供用の絵本」と「入試用の参考書」なんかをイメージしてもらうとわかりやすいかもです。

というわけで、せっかくなら自分のブログのイメージにぴったりなフォントを使用したいですよね。

今回紹介した【WhatFont】をぜひ活用してみてください。