フォントを太く大きくする拡張機能を自作して公開してみた

Last update 2019-11-03 17:34

私はずっと視力がよかったので、老眼とは無縁だとずっと思っていました。父親の話では、老眼とは40歳を超えてから急に来る、と聞かされていましたが、45歳を過ぎても全くそれらしい気配もない。しかも視力は1.5なので、自分が目が悪くなるというイメージすら持てませんでした。
ところが！あれは47歳の夏ごろでした。いつも使っているパソコンで普段見ているサイトの文字が見にくくてストレスが貯まるようになりました。
その半年後ぐらいに、今度はスマホや新聞の文字のピントが合いにくくなり、その症状がずっと続いたので、いろいろネットで調べてみると自分が老眼にかかっていたということがわかりました。

老眼とは？

老眼とは、遠くの被写体は今まで通りピントが合うが、手に持った物の距離(30センチ弱)にある被写体にピントが自動であわなくなる症状です。これ、まだ老眼になっていない人に説明しても全然わかってくれないんですよね～。
ただ私は視力がすごくよかったので、このピントが合わないという症状がすごいショッキングでした。

游ゴシックブーム

そこに追い打ちをかけてきたのが、Macユーザーによるサイトフォントの「游ゴシック」の指定です。私がWebページを作成した1998年ごろは、ページに使われるフォントは訪問者まかせにさせるために、フォントの指定（Font-famly）はしてはいけない、というのが常識でした。
ところがMacユーザーはこぞって自サイトを「游ゴシック」にする傾向があり、Windowsユーザーにとってはストレスが貯まるサイトが多くなってきました。

Macユーザー(彼ら)は、クロスブラウザテストなどやらないのだろうか。

Chromeでフォントの指定

Chromeでは、表示させるページのフォントをある程度設定することが出来ます。ところがサイト側でCSSでフォントやフォントサイズを指定されてしまうと、Chromeの設定は無視されます。

誰も作らないなら自分で作ってしまえ

そこで需要があるとは思っているんですけれど、なかなか誰も作らないので(プログラマーやWEBデザイナーは若い人が多く、老眼とは無縁なんだと思う)、自分で作ってしまいました。で、ずっと使い続けていて意外と汎用性があるので、Chromeウェブストアで公開してしまいました。(笑)

フォントを太く大きくする「老眼対策」

老眼対策というフォントを太字にし、大きくする私が作成した拡張機能です。
私の稚拙なプログラム能力で作成した拡張機能なので、単にページを太く大きく(18px）で表示させるだけです。

老眼対策のインストールの仕方

一応まだベータ版という位置づけなので、公開はしているものの、検索しても表示されない「限定公開」にしてあります。
老眼対策のリンクをクリックすると、Chromeウェブストアの老眼対策ダウンロード画面が表示されます。

右側の「Chromeに追加」をクリックします。

追加していいか聞いてきます。
「拡張機能を追加」をクリックします。ちなみに特別なデータなどは取得していないので、ご安心を(ちゃんとGoogleの審査に合格しないとそもそも公開できない)。

Chromeに追加されるとこのような表示と、眼鏡のアイコンが追加されます。
ちなみにアイコンはフリー素材を使わせていただきました。

老眼対策の拡張機能を有効にさせるには、Chromeを再起動させるか、拡張機能追加後、ページを更新してみてください。

効果

拡張機能を導入する前のページです。

「老眼対策」を有効にさせた場合です。
一気に文字が太くなりました。

フォントは18ピクセルにしました。

ちなみにフォントは「游ゴシック」指定です。(笑)メイリオでもいいのですが、游ゴシックでも極太設定（font-weight: 600）だと見やすいとわかったからです。

行間を空けた

文字を大きく太くしただけだと、行間がギスギスしてしまうので、130%ほどに広げる設定にしてみました。

メイリオではだめ？

「メイリオ」だとこんな感じになります。
いずれ私のテクニックが上がってきたら、設定で游ゴシックにするかメイリオにするか選択できるようにしたいと思っています。

また太文字にせず、メイリオ18ピクセルだとこんな感じ。

デザインが崩れる・表示されない場合ドメインごとに適用させるには

現バージョンでは表示するすべてのサイトの文字が大きく・太くなります。が、中には「老眼対策」で文字が表示されなくなったり、デザインが崩れたりする場合があります。

例えばMSNのトップページの新着ニュースのリスト欄が真っ白になっています。

また中古車を探すgooでも、文字が重なってしまっています。

ツイッターのユーザーアイコンでフォロー数などが隠れてしまう場合があります。

私は1日数百ページのサイトを見ていますが、今のところ読めない・クリックできない不具合が出るサイトはほんのわずかです。が、これらのサイトを利用する人や、特定のサイトのみ文字を大きく・太くさせたい場合は以下の方法で実現でいます。

どのサイトでもいいのですが、まずURL欄の右横に表示されている「老眼対策」のアイコンをクリックします。

「拡張機能をクリックしたとき」にチェックを入れます。
これで指定したドメイン以外は文字が太くならなくなりました。

もし文字を大きく・太くしたいサイトがあったら、再び「老眼対策」のアイコンをクリックします。

「再読み込み」をクリックします。

文字が大きく太くなりました。が、これだけだと、次訪問したときに元に戻ってしまいます。

再び「老眼対策」のアイコンをクリックし、文字を大きくしたいドメインにチェックを入れます。
これで次からこのドメインでは文字が太く大きく表示されるようになります。

無効にするには

無効にしたい場合は、Chromeに加わった眼鏡のアイコンを右クリックし、②「拡張機能を管理」をクリックします。

「老眼対策」の設定が開くので、矢印の部分をオフ(灰色)にすると無効になります。
ただしページに反映されるには、Chromeを再起動するかページを再読み込みしてください。

Macだとどのように見える？

ちなみにMacのChromeで老眼対策を有効にすると、こんな感じ。なんだかメイリオっぽく表示されていますね。

フォントを太く大きくする拡張機能を自作して公開してみた