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

数年前から老眼が始まり、パソコンのモニターの小さな文字が見にくくなってきました。以前から老眼用のブラウザを作ろうと思っていたのですが、Chromeの拡張機能で実現させてみました。

home HOME about About this site Mail Mail

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

Last update 2019-11-03 17:34

twitter Facebook はてブ LINE pocet

 

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

Sponsored Link

 

目次

老眼とは?

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

游ゴシックブーム

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

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

Chromeでフォントの指定

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

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

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

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

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

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

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

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

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

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

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

効果

ノーマルの状態拡張機能を導入する前のページです。

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

文字の比較フォントは18ピクセルにしました。

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

行間を空けた

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

メイリオではだめ?

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

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

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

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

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

Goo中古車の検索ページまた中古車を探すgooでも、文字が重なってしまっています。

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

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

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

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

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

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

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

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

無効にするには

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

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

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

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

関連ページ

最終更新日 2019-11-03 17:34

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

投稿日:2019-05-12 | このページのトップへ | コメントを書く | 管理

カテゴリー

同じカテゴリーの記事