概要 Clearlyの表示フォントはCSSで設定できます。これを游ゴシック体・游明朝体にすることで驚くほどWebの文章が読みやすくなります。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-00

画像出典:Evernote Clearly(Evernote)


みなさん、EvernoteのClearlyを使っていますか?

このClearlyはFirefox・Chromeで使用できるアドオン・機能拡張で、Webの文章を読みやすくするためのアドオン・機能拡張です。


このClearlyを使うと、本文にフォーカスした表示のされ方に切り替わって、文章がとても読みやすくなります。



●ClearlyでWebの文章がこんなに読みやすくなる

例を見てみましょう。

千葉県房総半島のいすみ市から大多喜町を走る路線のいすみ鉄道の社長さんのブログです。

元のブログの体裁はこんな感じ(今はスタイルが変わりました)。

左側にサイドバーがあって、ショップを見るボタンやカレンダーや最近のエントリーなどがあります。

本文は右側に掲載されていますが、CSSでフォントがMSゴシックになっていて、行間は140%なので、ちょっと読みづらいです。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-04

画像出典:さようならトワイライト(いすみ鉄道 社長ブログ)(Internet Archiveのデータから)



このWebページをClearlyを使って表示すると以下の様になります。

本文だけが表示されるシンプルなスタイルに変更され、余計なものが目に入らなくなり、かなり読みやすくなりました。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-07


Clearlyは標準の設定でもWebの文章は読みやすくなりますが、今回は表示に使うフォントに「游ゴシック体」や「游明朝体」を設定して、さらに読みやすくする設定を紹介します。



●Clearlyのフォントサイズや行間を設定する

Clearlyの設定画面を出します。

Firefoxはメニューから「アドオン」→Clealyの「設定」ボタン、Chromeはツールバー上にあるアイコンで右クリックして「オプション」を選択します。


左側の「カスタムテーマ」をクリックしてカスタムテーマの設定画面を表示します。

以下の画面はFirefoxのClearlyアドオンの設定画面です。

右側にある「基本フォントサイズ」「行の高さ」「行の幅」をそれぞれ次の値に設定します。

  • 基本フォントサイズ:18px
  • 行の高さ:1.75em
  • 行の幅:36em

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-01


●Clearlyのフォントを游ゴシックに設定する

次に下の方にある「その他のオプション」をクリックします。

すると、以下の画面の様に「基本CSS」「テキスト表示」「リンクの脚注表示」「大きな画像」「カスタムCSS」が出てくるので、以下の部分を変更します。

  • 基本CSS:なし
  • カスタムCSS:
    * {font-family:'Yu Gothic'!important}
    h1 {line-height: 1.5em !important;margin-bottom: 0.5em !important;}

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-02

設定したら右下の「テーマを保存」をクリックします。



●Clearlyで表示してみる

次に、Clearlyで表示したいページでClearlyのアイコンをクリックします。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-08


右側の「Aa」のアイコンをクリックして、「カスタム」をクリックすると、先程設定した表示になります。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-03


最初に紹介した「いすみ鉄道の社長さんのブログ」はこう表示されます。

フォントもMSゴシックではなく游ゴシック体に変わり、また行間も広めになったの読みやすくなったと思います。

(もし行間が広いかなと思ったら1.75em→1.5emに変更してみてください)

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-05

これなら少しくらい長めのWebの文章でも楽に読み進められるのではないでしょうか?



●游明朝体で表示したい場合は?

游明朝体に設定したい場合は、カスタムCSSにあった「Yu Gothic」の部分を「Yu Mincho」に変えるだけです。

表示した例は以下の画像です。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-06


ぜひ試してみてくださいね。

それでは。



●関連ページ

Firefoxでフォント表示をキレイにする方法は以下のページをご覧ください。


源ノ角ゴシックを使いたい場合は以下のページをご覧ください。(Webフォントを利用するのでPCにインストールしていなくてもOK!)




●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索