40代双子持ちサラリーマン日記

40代双子持ちサラリーマンの日々の出来事や趣味に関してのブログ

【ブログ便利機能】WEBサイトの使用フォントを簡単に調べる方法

20190831015701

 

こんにちは。40代双子持ちサラリーマンです。

今回は、WEBサイトの使用フォントを簡単に調べる方法を紹介します。 

 

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。 

 

 

「WhatFont」とは

WhatFontとは


「WhatFont」とは、Chromeの拡張機能の1つで、サイトで使用している文字フォントなどのフォント情報を簡単に調べることができる機能です。

 

この機能を使用すると、どんなことができるようになるんですか? 

 

自分が気になったサイトのフォント情報を知ることができるため、その情報をCSSに反映することにより、まねることができたりします。 

 

それは便利ですね。早く使ってみたいです☺

 

Chromeへの「WhatFont」追加方法

ChromeへのWhatFont追加

 

Chromeへの「WhatFont」追加方法を紹介します。

 

  1. chrome ウェブストアの拡張機能「WhatFont」にアクセス

  2. アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする


    Google Chrome_WhatFont追加画面


  3. ポップアップ画面(下記画面参照)が表示後、【拡張機能を追加】ボタンをクリックする


    WhatFont拡張機能追加


  4. 拡張機能が追加されると、URL入力の右横にWhatFontアイコン(赤枠)が追加される。
    その際、ポップアップ画面(下記画面参照)が表示されます。


    WhatFont追加完了画面

 

「WhatFont」を使ったフォントの調べ方

WhatFontを使ったフォントの調べ方

 

追加した「WhatFont」を使って、フォントを調べる方法を紹介します。

  1.  WhatFontアイコンをクリックし、【Exit WhatFont】ボタンが表示されることを確認する。


    WhatFont_Exit WhatFontボタン


  2.  「事前に探した文字フォントが気になるサイト」の文字の上にマウスをもっていくと、その文字フォントが表示される。
    ※今回は、YAHOO! JAPANの【Y】の部分にマウスをあてて、【MS PGothic】が表示されています。

    WhatFont_Yahoo文字選択


  3.  さらに、【MS PGothic】の部分をクリックすると、詳細な情報が表示されます。


    WhatFont_Yahoo文字選択詳細

 

具体的には以下のような情報を取得できます。 

WhatFontで取得できる情報
  • フォントの種類:Family
  • フォントのスタイル(標準・イタリック体・斜体):Style
  • フォントの太さ:Weight
  • フォントのサイズ:Size
  • 行間:Line Height
  • フォントのカラーコード:Color

 

Chromeからの「WaitFont」削除方法

ChromeからのWhatFont削除

 

chromeからの「WhatFont」削除方法を紹介します。

 

  1. chrome ウェブストアの拡張機能「WhatFont」にアクセス

  2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする


    Google Chrome_WhatFont削除画面

 

Chrome以外のブラウザでの「WhatFont」使用方法

Chrome以外のブラウザでのWhatFont使用方法

 

Chrome以外のブラウザでの「WatFont」使用方法に関しては、下記サイトに載っているので、参照してみてください。

 

 

masayo.info

 

以下のブラウザに対応しているようです。

 

Chrome以外の対応ブラウザ
  • Firefox 3.6以降
  • Safari 4以降
  • Internet Explorer 9
  • Internet Explorer 8

  

「WhatFont」まとめ

WhatFontまとめ

 

「WaitFont」を有効利用することにより、ブログを見やすくするためにかかせない、フォント選びを効率的にできるようになります。

 

ぜひ、みなさんもこの拡張機能をChromeに追加し、ブログの作成に役立ててほしいと思います。