当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Yahoo!ニュース】サイドバーにあるおすすめの有料記事非表示

2023年1月21日Yahoo!

「Yahoo!」のアイコン

この記事では、PCウェブサイト版「Yahoo!ニュース」の記事ページの右側サイドバーにある「おすすめの有料記事」欄を非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」や「Stylus(スタイラス)」を利用します。

【Yahoo!ニュース】サイドバーにあるおすすめの有料記事非表示

PCブラウザで、「Yahoo!ニュース」の記事ページを開いたら、右側の追従サイドバーに、「おすすめの有料記事」項目が表示される場合があります。「税込〇〇円」と書かれていて、クリックしても全文が読めないようになっています。

「Yahoo!ニュース」のサイドバーにある「おすすめの有料記事」欄のスクリーンショット

僕は、購入する気がないため、表示されていても邪魔です。CSSを利用することで、自身の環境上だけで非表示にできます。あくまでCSSを適用した自身のPC上だけです。他人には影響されません。いつでも元に戻せます。

「有料記事を購入する気はない!消したい!」という方、参考にしてみてください。ただし、利用する場合は自己責任です。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。拡張機能を利用できるブラウザアプリ(例:Kiwi Browser)などを使えば、もしかしたらできるかもしれません。

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。

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

「Stylebot」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Stylebot」拡張機能をインストールする手順画像3

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

「Yahoo!ニュース」のサイドバーにある「おすすめの有料記事」欄を消すCSS

Yahoo!ニュース」にアクセスします。トップページ、どこかの記事ページ、どちらでもOKです。インストールした「Stylebot」アイコンをクリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。こちらに以下のコードを書き込みます。

/*サイドバーにある「おすすめの有料記事」非表示*/
section[class^="ArticlePaidNewsRecommend"] {
  display: none !important;
}

ArticlePaidNewsRecommend」が有料記事を指しています。「display: none;」で非表示にしています。

注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

「Stylebot」拡張機能のスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:news.yahoo.co.jp)がオンになっていることを確認します。オンになっている間は有効になっているということです。

適当に記事ページを開きます。サイドバーの「おすすめの有料記事」欄が消えます。それ以外の「コメントランキング」や「動画アクセスランキング」などは、これまで通り表示されます。

「Yahoo!ニュース」のサイドバーにある「おすすめの有料記事」欄を非表示にした画像

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「news.yahoo.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

サイドバー全体を非表示にしたい場合

「おすすめの有料記事」単体ではなく、サイドバー自体を消したい場合は、以下の記事を参考にしてみてください。

感想

以上、「Yahoo!ニュース」の記事ページのサイドバーに表示される「おすすめの有料記事」欄を、CSSで非表示にする方法でした。

まとめ的な記事も書いています。

2023年1月21日Yahoo!