ブログやサイトの使用フォントを簡単に調べる方法

 

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

 

ブログやサイトなどを見ていると「このフォント見やすい、何ていうフォントか知りたい」と思うことはないでしょうか?

ゆずる先生
そこで、今回は気になるブログやサイトの使用フォントを簡単に調べる方法を紹介します。

 

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

「WhatFont」とは

WhatFontとは

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

 

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

 

ゆずる先生
自分が気になったブログやサイトのフォント情報を知ることができるため、その情報をCSSに反映することにより、簡単に再現することができます。

 

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

 

「WhatFont」インストール方法

Chromeへの「WhatFont」のインストール方法を紹介します。

  • STEP1
    Chrome ウェブストアにアクセス
    Chrome ウェブストアの拡張機能「WhatFont」にアクセス
  • STEP2
    Chromeに追加
    アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

    Google Chrome_WhatFont追加画面

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

    WhatFont拡張機能追加

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

    WhatFont追加完了画面

       

      「WhatFont」使用方法

      「WhatFont」の使用方法を紹介します。

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

        WhatFont_Exit WhatFontボタン

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

        WhatFont_Yahoo文字選択

      • STEP3
        表示された文字フォントをクリック
        さらに、【MS PGothic】の部分をクリックすると、詳細な情報が表示されます。

        WhatFont_Yahoo文字選択詳細

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

        フォントの種類:Family
        フォントのスタイル:Style
        フォントの太さ:Weight
        フォントのサイズ:Size
        行間:Line Height
        フォントのカラーコード:Color

       

      「WhatFont」削除方法

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

      1. chrome ウェブストアの拡張機能「WhatFont」にアクセス
         
      2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックするGoogle Chrome_WhatFont削除画面

       

      「WhatFont」対応ブラウザ

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

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

      Chrome以外の対応ブラウザ

      • Firefox 3.6以降
      • Safari 4以降
      • Internet Explorer 9
      • Internet Explorer 8

      「WhatFont」まとめ

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

       

      ぜひ、ブログを見やすくするための一つの手段として、この拡張機能を有効活用していただけたらと思います。

       

      双子
      『ポチっ』と応援お願いします☺
       

      にほんブログ村 サラリーマン日記ブログ 平凡サラリーマンへ
      にほんブログ村
       
      にほんブログ村 サラリーマン日記ブログへ
      にほんブログ村

       

      私の楽天ルームURL

      スポンサーリンク
      おすすめの記事