近眼や老眼に優しいFacebookを目指そう!文字表示が小さ過ぎて読みづらい場合の対処法 - 適宜覚書-Fragments

近眼や老眼に優しいFacebookを目指そう!文字表示が小さ過ぎて読みづらい場合の対処法

      2017/03/03

ニュースフィードのコメント文字がちっちゃいよ!

相変わらずFacebookばかりいじっていて、ある意味ネット上では引きこもりになりつつある今日この頃の筆者です。一応昨日、今日とオフラインでは色々と出歩いていたので本職の引きこもりの方にお叱りを受けるかもしれませんが(^^;;。少し偏りを元へ戻さなければいけないなあと思っています。 さて、そんな謙虚な言葉を出した舌の根も乾かぬうちにまたもやFacebookネタで大変恐縮です。お友達のululunさん(癇癪を起こしてブロック頂きました。訳分かりません(^^;;)が以下のようなお悩みを持たれていました。

ニュースフィードのコメント文字がちっちゃいよ!

ニュースフィードのコメント文字がちっちゃいよ!

ああ、そう言えば小さいですね。うん、確かにその通りでコメント以外の部分も結構小さいです。Facebookはローカライズが進んでいるとはいえ、偉い人の好みで寒色系配色であるとか、文字が小さい方がクールだと思ってるのではないかとか悩ましい面も少なからずあります。日本人たるものゆったりとした文字で読みたいものです。(本音:最近疲れ目が慢性化しており、もう少ししたら近眼と老眼のハイブリッドになるかもな筆者としては、この問題は他人事ではありません。)

コメントとか色々ちっちゃい!

コメントとか色々ちっちゃい!

そこで、簡単な対策をしてみることにしました。今回の対処を行うと文字を大きく読みやすいフォントに変えることが出来ます(^^。

対策

やることは簡単です。要はそれなりに大きく自分の環境で見えれば良いのですから、ユーザスタイルシートをあててしまえば良いのです。 ユーザースタイルシートのススメ - Personnelより引用:

ユーザースタイルシートとは、ウェブページに被せるフィルターのようなものです。文字の色、サイズ、背景色など、細かな装飾を自分の好みに合わせることができます。InternetExplorer、Mozilla、Operaその他、最新のブラウザなら大抵使用できるようです。

ユーザスタイルシートであれば、元のサイトがどういうスタイルを提供していようと柔軟に変更が出来ます。 とはいえ、元のFacebookは表示用に生成されたHTMLや既存のCSSも嫌になるくらい複雑な作りをしているので、一個一個該当のclassや要素をカスタマイズするのは気が重い話です。そこで今回は、Facebook全体にスタイルを適用するという対処法を取りました。そう、建設的で現実的な手抜き対処です(^^;;;;;!! どうしても、個別カスタマイズをしたいんだ、という方には直接お教えしますので何らかの方法で筆者に声をおかけください。良いものが出来たら成果物を是非頂きたく宜しくです。

実際の手順

  1. ここではGoogle Chromeとユーザスタイルシート用の拡張を使って対処手順を説明します。同様のことは細かい手順は違えどFirefoxやSafariなどでも出来ます。
  2. まず。ChromeにStyleBotという拡張をインストールします。今回は拡張そのものの紹介ではないのでインストール手順や機能紹介は割愛します。
  3. インストールが終わるとオムニバー(アドレスバー)に「CSS」と表示されるようになります。表示されない場合は、再読み込みをしてください。

    CSSとオムニバーに表示

    CSSとオムニバーに表示

  4. 図にあるように、今回のターゲットであるFacebookを開きます。この拡張は、特定のドメインに対してのスタイル適用が出来るのです。
  5. オムニバーの「CSS」をクリックすると、下図のようなウィンドウが画面右側に表示されます。

    ウィンドウが右に表示

    ウィンドウが右に表示

  6. 本来であれば、ここからがStyleBotの真骨頂!選択した要素に対してスタイルを設定し、その結果が直接表示を変えていく様を紹介するところですが、今回はこれまた割愛です。
  7. ウィンドウ最下部左にある「Edit CSS」ボタンをクリックします。

    Edit CSSボタン

    Edit CSSボタン

  8. するとCSSの編集画面が表示されます。
  9. 編集画面に以下のテキストを、コピーして貼り付けてください。
  10. 貼り付けたら、右下の「Save」ボタンをクリックして編集画面を閉じます。
  11. 右側のStyleBotのウィンドウをウィンドウ右上の「×」ボタンをクリックして閉じます。
  12. 今開いているFacebookのページを再読み込みします。表示が変われば対応完了です。

内容について

正直簡単な内容でアレ?でしょうけど、いいんです。Simple is Best! 分かっている方に説明するのはかなり恥ずかしいのですが、やっていることはまず全称セレクタで文書全体の要素に対してinheritでフォントサイズとフォントファミリのサイト側スタイルを無効化しています。その後、Body要素以下に対し任意のフォントサイズとフォントファミリを指定しました。 内容は好みなのでお好きに変えてください。ただ、0.9em以上にするとかなりレイアウト全体に影響が出ます。また、serifやmonospace系をあてはめると結構きついかも。フォントの参考には、フォント表示サンプルをどうぞ。 参考情報 StyleBot拡張は今回使う機能だけではなく、より汎用的な利用が出来るものです。興味がある方は、表示ページのスタイルシートをリアルタイムに変更するChromeの機能拡張 -Stylebot | コリスChrome + Stylebot + Twitter Extender + Twitter Filter = ?  |  gaspanik weblogなどをご参照下さい。 いずれここでも記事化するかも…ですが、正直あれこれ出来るので上手い紹介出来る自信が無くて気おくれしてるんですよねえ(^^;;

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Facebook, Google, Webブラウザ , , , , , , ,