ブログ記事の「アイキャッチ画像」と「見出し直下の画像」は記事内容に直接関係ない場合が多いので、それらを非表示にしてくれるChrome拡張機能はないか?

ブログ記事のアイキャッチ画像や見出し直下のフリー素材画像だけを、ピンポイントで自動判別して非表示にしてくれる専用のChrome拡張機能は、残念ながら存在しません。

しかし、「特定の画像や要素を非表示にする汎用的なChrome拡張機能」や「テキスト主体の表示に切り替える拡張機能」を使うことで、目的を完全に達成できます。

不要な画像をカットして読書に集中するための、おすすめの代替拡張機能と設定方法を3つ紹介します。


1. Stylebot(最もおすすめ:一度設定すれば自動で消える)

Stylebotは、ウェブサイトの見た目(CSS)を自由に変更できる拡張機能です。特定のブログ(例:noteやQiita、特定の個人ブログなど)に何度も訪れる場合、この機能で一度「アイキャッチ画像」を指定して非表示にすれば、次回からそのブログのすべての記事で自動的に画像が消えます。

  • 手順:
    1. 拡張機能を起動し、消したいアイキャッチ画像を選択する。
    2. 隠す(Hide)ボタンを押す、または display: none; というコードを記述する。

2. Ublock Origin / AdBlock Plus の「要素非表示マクロ」

本来は広告ブロック用の拡張機能ですが、uBlock Originなどにある「要素選択モード(スポイトツールのアイコン)」を使えば、画面上のあらゆるパーツ(画像や見出し下の不要なブロック)を永久に非表示にできます。

  • メリット: 広告対策と同時に、記事内の邪魔なイメージ画像もまとめて排除できます。
  • デメリット: サイトの構造ごとに毎回自分で指定する必要があります。

3. リーダーモード(Reader Mode)系の拡張機能

「アイキャッチ画像だけでなく、サイドバーや装飾もすべて排除して文字だけを読みたい」という場合は、ブラウザのリーダーモード機能が最適です。

  • おすすめ拡張機能: Reader Mode や Chrome標準のリーディングリスト(読書モード)
  • 効果: ボタンを1回クリックするだけで、記事の背景、装飾、アイキャッチ画像、見出し下のフリー素材画像などがすべて消え、まるで電子書籍のような純粋なテキストと必要な図解だけの画面に切り替わります。

なぜ「アイキャッチ画像だけ」を狙い撃ちする拡張機能がないのか?

ブログを構築するシステム(WordPress、はてなブログ、独自開発など)やデザインのテーマによって、アイキャッチ画像に設定されているプログラム上の目印(HTMLのクラス名やタグ名)が全く異なるためです。一律で「これがアイキャッチ画像だ」と判別することが技術的に難しいため、上記のような汎用ツールで各自が非表示に設定するのが最も確実なアプローチとなっています。

あなたがよく読む特定のブログサービス(例:WordPress系ブログ、note、個人ブログなど)はありますか?
もし決まったサイトがあれば、そのサイトのアイキャッチ画像を消すための具体的な設定手順やCSSコードをお教えできます。

そもそも、あの「記事内容に関係ない画像」の存在意味が分からない

そのお気持ち、非常によく分かります。文字を早く読み進めたいときや、純粋に情報を探しているとき、内容に全く関係のない「パソコンを前に笑顔で悩む人のフリー素材」や「爽やかな風景写真」などは、ただのスクロールの邪魔(ノイズ)でしかないですよね。

読者にとっては邪魔なだけのあの画像ですが、ブログの運営者(書き手)や、記事を検索・拡散するシステム(GoogleやSNS)の都合によって、「入れざるを得ない5つの理由」が存在します。

運営側の裏事情を分かりやすく解説します。


1. SNS(XやFacebook)でシェアされた時に目立たせるため

最も大きな理由は、SNSで記事がシェアされたときに表示される画像(OGP画像と呼ばれます)として設定するためです。

  • 画像がある場合: タイムライン上で大きく表示され、ユーザーの手が止まりやすい。
  • 画像がない場合: 文字だけの地味なリンクになり、誰にもクリックされなくなる。

運営者は「SNSでクリックしてもらうための看板」として画像を設定しており、それがそのまま記事のトップ(アイキャッチ)にも表示されてしまっています。

2. 人間の「文字だらけだと読むのをやめる」習性を防ぐため

多くの読者は、ページを開いた瞬間に文字がギッシリ詰まっているのを見ると、「うわ、読むのが大変そう」と感じて5秒以内にページを閉じてしまう(離脱する)傾向があります。

  • 関係のない画像であっても、途中に1枚挟まるだけで「視覚的な休憩スポット」になり、文章の圧迫感が減ります。
  • 結果として、読者がページに長く滞在してくれるようになるため、運営者は画像を挿入しています。

3. スマホでの「スクロールのリズム」を作るため

現在のウェブサイトの7割以上はスマホで読まれます。スマホの狭い画面で文字だけが続くと、どこまで読んだのか分からなくなったり、目が滑ったりします。

  • 「見出しの直下に画像がある」というルールを作ることで、読者が指で画面をスクロールする際、「ここから次のブロック(段落)が始まる」という目印(区切り線のような役割)にしています。

4. Googleの検索結果(画像タブや Discover)に載せるため

Googleの検索結果や、スマホのGoogleアプリを開いたときに出てくるおすすめ記事(Google Discover)には、魅力的なアイキャッチ画像がセットで表示されます。

  • Googleのシステムは「記事内にある高画質な画像」を自動で拾って表示するため、記事内(特に上部)に画像を1枚以上入れておくことが、検索アクセスを増やすための必須テクニックになっています。

5. ブログの「トップページ」を綺麗に整えるため

記事の中だけでなく、そのブログのトップページや「関連記事一覧」を表示するとき、すべての記事に四角いアイキャッチ画像が並んでいると、雑誌のようで見栄えが良くなります。

  • 一覧画面の見栄えを保つという「サイト全体のデザイン都合」のために、個別の記事を開いたときにもその画像がドカンと表示されてしまいます。

まとめ

一言で言えば、あの画像は読者のためではなく、「まずは記事をクリックさせ、途中でブラウザバックさせずに最後までスクロールさせるための、マーケティング上の仕掛け」です。

内容を効率よく吸収したい読者にとってはストレスでしかないため、前回紹介した「リーダーモード」などでこれらを一括非表示にして読むのは、非常に賢く合理的な防衛策と言えます。

この「フリー素材画像だらけの文化」は日本の個人ブログやビジネス記事に特に多い現象です。
もしよろしければ、先ほど紹介した拡張機能のうち「Stylebot」や「リーダーモード」の具体的な使い方を実践してみますか?

使い方を知りたい

ありがとうございます!それでは、最も手軽に文字だけを抽出できる「リーダーモード(リーディングリスト)」と、一度設定すれば自動で消せる「Stylebot」の2つの使い方を、分かりやすくステップ形式で解説します。

まずは、最もボタン1つで効果が出る「リーダーモード」から試してみるのがおすすめです。


方法1:一番簡単!「Chrome標準の読書モード」を使う

Google Chromeには、拡張機能を新しく入れなくても、最初から文字だけにする機能が備わっています。

  • ステップ 1: 記事のページを開きます。
  • ステップ 2: 画面右上(パズルのピースのアイコンなどの並び)にある 「サイドパネルを表示」アイコン(四角い枠のマーク)をクリックします。
  • ステップ 3: 右側に開いたパネルの上のメニューから 「読書モード」 を選択します。
  • 効果: 右側のパネルに、アイキャッチ画像や見出し下の画像、サイドバーがすべて消えた「純粋な本文のテキスト」だけが表示されます。文字の大きさや背景色(ダークモードなど)も自由に変更できます。

方法2:拡張機能「Reader Mode」を使う(画面全体をスッキリさせる)

標準機能だと画面の右側だけにしか表示されないため、画面全体を電子書籍のようにしたい場合は、無料の拡張機能「Reader Mode」がおすすめです。

  • ステップ 1: Chromeウェブストアで「Reader Mode」と検索し、「Chromeに追加」を押してインストールします。
  • ステップ 2: 画像を消したいブログ記事を開きます。
  • ステップ 3: 画面右上の拡張機能アイコン(本のマーク、またはパズルマークの中)をクリックします。
  • 効果: 画面が一瞬で切り替わり、関係のないフリー素材画像、広告、メニューなどがすべて消え、フォントが整った美しい文章だけになります。もう一度押すと元の画面に戻ります。

方法3:特定のブログで自動で消す「Stylebot」

「いつも読む特定のブログ(noteやQiita、お気に入りのニュースサイトなど)で、毎回ボタンを押さずに自動でアイキャッチを消したい」という場合はStylebotが最強です。

  • ステップ 1: Chromeウェブストアで「Stylebot」を検索し、インストールします。
  • ステップ 2: ターゲットのブログ記事を開き、画面右上の「Stylebotアイコン(Sのマーク)」をクリックして 「Stylebotを開く」 を選びます。
  • ステップ 3: 右側に設定画面が出たら、一番上にある 「矢印のついたインスペクターアイコン」(要素選択モード)をクリックします。
  • ステップ 4: 消したいアイキャッチ画像(または見出し下の画像)の上にマウスを合わせてクリックします。
  • ステップ 5: 右側のStylebotメニュー内にある「Visibility(表示)」という項目の 「Hide(隠す)」 ボタン(目のマークに斜線が入ったアイコン)をクリックします。

これで設定は完了です。Stylebotがその画像の構造を記憶するため、次からそのサイトのどの記事を開いても、アイキャッチ画像が自動的に最初から非表示になります。


まずは手始めに、一番手軽な「Chrome標準の読書モード(方法1)」を今開いているこの画面などで試してみてはいかがでしょうか?

もし、方法3の「Stylebot」に興味があり、「いつも読んでいる特定のブログURLやサービス名」を教えていただければ、そこにコピペするだけで一発で画像が消える専用のコードをお作りすることもできます。必要であれば教えてくださいね。

ありがとうございます。

ブログ・アフィリエイト
楽天市場

コメント

タイトルとURLをコピーしました