ウェブサイト表示のリーダーモード

📖 ウェブサイト表示のリーダーモード

chromeを例にした白黒・画像無効化ツール

ページの画像を無効化して、全体を白黒（グレースケール）化するツールです。
2つの方法があります：①Chrome拡張機能（自動・全ページ継続）と②ブックマークレット（簡単・その都度クリック）

🔧 方法1：Chrome拡張機能（推奨・自動化）

メリット：一度設定すれば全ページ自動適用、ページ遷移も追従　｜　デメリット：設定がやや複雑

💡 Stylusでの自動化方法（詳細手順）

ステップ1：Stylusのインストール

Chrome ウェブストアを開く（chrome://extensions/ から「ウェブストアを開く」）
検索バーに 「Stylus」 と入力
「Chromeに追加」 → 「拡張機能を追加」をクリック
ツールバーにStylusアイコンが表示される

ステップ2：スタイルの作成

任意のWebページを開く
Stylusアイコンをクリック
「このサイト用のスタイルを書く」をクリック
新しいタブでStylusエディタが開く

ステップ3：CSSコードの選択（お好みに応じて）

名前欄に「リーダーモード」と入力
大きなテキストエリアに下記のCSSから選んでコピペ：

📍 パターン1：セレクター指定版

グレースケール化 + 統一フォント + 濃い色の文字は黒、薄い色は適度なグレーに個別指定

/* 全体をグレースケール化 */
html {
 filter: grayscale(1) !important;
}  /* 背景を白に統一 */
* {
 background-color: white !important;
 background-image: none !important;
 font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif !important;
}  /* 濃い色の文字は黒に */
*[style*=”color: #0″], *[style*=”color: #1″], *[style*=”color: #2″], *[style*=”color: #3″],
h1, h2, h3, h4, h5, h6, p, div, span, a {
 color: #000000 !important;
}  /* 薄い色の文字は適度なグレーに */
.gray, .grey, .light, .secondary, .muted,
*[style*=”color: #7″], *[style*=”color: #8″], *[style*=”color: #9″], *[style*=”color: #a”], 
*[style*=”color: #b”], *[style*=”color: #c”] {
 color: #555555 !important;
}  /* 画像を無効化 */
img, picture, video, canvas, svg, image, iframe, embed, object {
 filter: brightness(10) contrast(0) !important;
 background: white !important;
}

📍 パターン2：要素別調整版（推奨）

グレースケール化 + 統一フォント + 各HTML要素ごとに適切な色を指定、より確実

/* 全体をグレースケール化 */
html {
 filter: grayscale(1) !important;
}  /* 背景を白に統一 + フォント統一 */
* {
 background-color: white !important;
 background-image: none !important;
 font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif !important;
}  /* 全体の文字色調整 */
body, div, p, span, a, li, td, th {
 color: #222222 !important;
}  /* 見出し系は濃い黒 */
h1, h2, h3, h4, h5, h6 {
 color: #000000 !important;
 font-weight: bold !important;
}  /* リンクは濃いグレー */
a {
 color: #333333 !important;
 text-decoration: underline !important;
}  /* 薄い文字用のクラス */
.secondary, .muted, .light-text, small {
 color: #666666 !important;
}  /* 画像を無効化 */
img, picture, video, canvas, svg, image, iframe, embed, object {
 filter: brightness(10) contrast(0) !important;
 background: white !important;
}

📍 パターン3：シンプル版

グレースケール化 + 統一フォント + 全て黒文字、白背景のシンプル構成

/* 全体をグレースケール化 */
html {
 filter: grayscale(1) !important;
}  /* シンプル版：背景白、文字黒、フォント統一 */
* {
 background-color: white !important;
 background-image: none !important;
 color: #000000 !important;
 font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif !important;
}  /* 画像を無効化 */
img, picture, video, canvas, svg, image, iframe, embed, object {
 filter: brightness(10) contrast(0) !important;
 background: white !important;
}

💡 おすすめ：
「要素別調整版」が最も安定して動作します。見出しは黒、本文は濃いグレー、薄い文字は適度なグレーになります。

ステップ4：全サイト適用の設定

「適用先」の部分で、既存の設定（例：google.com）を削除
「URLのプレフィックスが次と等しい」を選択
入力欄に 「http」 と入力
もう一つ追加：「+」ボタンをクリック
「URLのプレフィックスが次と等しい」を選択
入力欄に 「https」 と入力
左上の「保存」ボタンをクリック

これで完了！すべてのWebページで自動適用されます。

オン/オフの切り替え方法

Stylusアイコンをクリック → 作成したスタイル名の横のチェックボックスでオン/オフできます

🔖 方法2：ブックマークレット（簡単・手軽）

メリット：設定が簡単、すぐ使える　｜　デメリット：ページ遷移時に追従しない（各ページでクリックが必要）
💡 ページ遷移の追従が不要で、手軽に使いたい場合はこちらがおすすめ

設定方法

Ctrl + D を押してブックマーク追加画面を開く

名前を 「Reader Mode」 などに変更する

URL欄の中身を全部削除して、下のコードをコピペする

「保存」をクリック

リーダーモードを適用したいページで、そのブックマークをクリック

📋 コピーするコード（クリックでコピーできます）

javascript:(function(){var s=document.createElement(‘style’);s.textContent=’*{filter:grayscale(1)!important}img,picture,video,canvas,svg,image,iframe,embed,object{filter:brightness(10)contrast(0)grayscale(1)!important;background:white!important}*[style*=”background-image”]{background-image:none!important;background-color:white!important}’;document.head.appendChild(s)})();

⚠️ 重要な注意点

URL欄には上のコードをそのまま全部貼り付けてください
javascript: から始まる必要があります
元に戻すにはページを再読み込み（F5キー）してください
ページ移動すると効果は消えます（新しいページでまたクリックが必要）

🔄 ページ移動時の対処法（ブックマークレット使用時）

ブックマークバーに配置
ブックマーク作成時に「ブックマークバー」フォルダに保存して、いつでも素早くクリック

キーボードショートカットを覚える
Ctrl+Shift+B でブックマークバー表示/非表示、その後ブックマークをクリック

ページ遷移の追従が必要なら方法1を使う
Chrome拡張機能（方法1）なら全ページで自動継続

hokd.jp 北海道の公益共創ドメイン