※記事のURLの一部は広告を含みます。

画像のうち一部が正しく表示されていない期間がありました。ご迷惑をおかけし申し訳ありません。

ブラウザで記事を読みやすくするReader Modeの使い方・設定を解説【Chrome拡張機能】の絵文字

ブラウザで記事を読みやすくするReader Modeの使い方・設定を解説【Chrome拡張機能】

2022-06-27

2022-06-27

はじめに

こんにちは、こふです。

Reader Mode を使うと、変なデザインのサイトを共通の見た目で見ることができ、記事を読むのが捗ります。

デザインだけでなく、文字サイズも自由に変えられるので視力の悪い方(自分も)にとって便利なこと間違いないでしょう。

使った様子

自分のブログ記事に対して適用した様子です。

実際にReader Modeを使った様子

このように、サイトのデザインを無視することが可能です。

導入

https://chrome.google.com/webstore/detail/reader-mode/llimhhconnjiflfimocjggfjdlmlhblmから Chrome ウェブストアにアクセスしてください。

導入が完了すると、以下のように Chrome から削除、となります。つまりインストールできた、ということですね。

インストールの確認

それでは、使い方を解説していきますね。

Reader Mode の開き方

Chrome 拡張機能としての使い方は共通です。そのため、開き方は以下の記事をご覧ください。

関連:Chrome 拡張の使い方を完全解説|固定・削除・探し方・ショートカットも【知らなきゃ損】

メニュー一覧について

Reader Mode を開くと、以下のような画面になり、右上にメニュー一覧が出てきます。

Reader Modeのメニュー一覧

クリックして使うのは、以下の 2 つだけと思っておいて OK です。

  • 左から 2 つ目の Settings
  • 一番右の閉じるボタン

閉じるボタンは押すと Reader Mode の画面が閉じるだけです。また、閉じるボタンは起動する時に押すアイコン・ショートカットを再度行うことで代用可能です。

それ以外の設定は不要です。。。


一応解説すると、一番左は HTML の特定部分を消せます。 スピーカーアイコンは音声で記事を読んでくれます。が、音が微妙なので不要です。 プリントは Web で読む時点で使う時があまりないです。 その右は PC 上にページを保存ができますが、この拡張機能を消すとデータが消えるので、使うべきではありません。


設定箇所の Setting について解説

Setting一覧

これらの項目をそれぞれ解説しますね。

STYLE

STYLE から、文字サイズ・フォントの種類・行間などを好みに合わせて設定できます。

THEMES

THEMES から、背景と文字色のテーマを選べます。 無料では、背景白色で文字が黒色・背景黒色で文字が白色の 2 つです。

READER COMPONENTS

READER COMPONENTS から、ページ上に表示する情報の ON・OFF を設定できます。 有料での機能が多いので、設定することは正直ないかも。

DYSKEXIA RULER

DYSKEXIA RULER からは画面上に読むラインを引くことができます。自分は使っていませんが、設定すると以下のようになります。

DYSKEXIA RULERを使った様子

どこを見ているか、どこまで読んだかを確認したい場面が多い場合は ON にしておくと良いです。

AUTO-RUN RULES

AUTO-RUN RULES は自動で Reader Mode を起動するルールの設定です。

この設定はおすすめできませんので、飛ばして OK です。


以下のように設定すると、当サイトではページを開くと自動で Reader Mode が起動します。

AUTO-RUN RULESの設定例

正直、使い方は難しいと思います。

とあるサイトの全ての画面で Reader Mode を使うのは良くないです。

というのも、記事一覧ページなどで Reader Mode が起動するとページが見づらいからです。

CUSTOM CSS

CUSTOM CSS は CSS(Web ページのデザインをする言語のようなもの)を自由に変更する設定です。有料プランなので割愛。。。

設定すると、デザインを自分好みに設定できるはず。

TRANSLATE

TRANSLATE は翻訳のことです。有料プランの機能なので使っていません。

Reader Mode 上で多言語の記事を翻訳できるのは非常に便利ですが、自分には必要な場面は少ないので不要です。


ちなみに、裏技あります。

Chrome 拡張機能のGoogle 翻訳を Reader Mode の画面で動かすだけ。

すると以下のようになります。自分のページなので著作権の問題はない。

原文

翻訳文

ショートカット割り当て

毎回右上のアイコンをクリックするのは苦痛すぎます。

chrome://extensions/から拡張機能の設定ページへ行きます。面倒だけど、コピー&ペーストしてアクセスしてください。

すると、左のメニューバーにキーボードショートカットという項目があります。

拡張機能の設定画面

一覧から、Reader Mode を探します。

Reader Modeのショートカット

このように、好きなキーを設定して、ページ上で入力して起動しましょう。

同様に、同じキーを打つと、Reader Mode の画面を閉じることができますよ。

微妙な点

2 点あります。

  • フルカスタマイズできない
  • カーソルを合わせる必要がある

フルカスタマイズできない

こんなに便利なものを無料で使えて、不思議に思いますが、きちんと有料プランがあります。

以下のようにダイアモンドのある場所は有料プラン必須です。

有料プランの例

カラーのテーマが無料では「白黒ベース」でしか利用できません。でも、無料でダークテーマにも対応しているので、かなり優しいと思います。

カーソルを合わせる必要がある

モーダルとして画面の上へ表示されるため、ページのスクロールがキーボードではすぐにできません。

画面をクリックして対象としてからキーボードの矢印キーを押すことで反応します。

これはこの拡張機能の仕組み上仕方がないので、我慢ですね・・・

おわりに

これで Web 上の記事が読みやすくなり、ストレスも軽減されるはず。

設定は面倒ですが、一度やれば終わりなので、パッとやってしまいましょう。




共有する