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

​​Stylebot&Stylus(CSS)

「Yahoo!」のアイコン

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

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。

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

本記事で紹介するCSSを使えば、「Yahoo!ニュース」の記事ページの右側サイドバーにある「おすすめの有料記事」欄を消せます。

通常、記事ページを開いたら、右側の追従サイドバーに「おすすめの有料記事」項目が表示されます。「税込〇〇円」と書かれていて、クリックしても全文が読めないようになっています。

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

どうしても消したい方、参考にしてみてください。利用は自己責任ですが…。

もし、個別ごとではなく、サイドバー自体を消したい場合は、以下の記事を参考にしてみてください。

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

サイドバーの「おすすめの有料記事」欄を消すCSS

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

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

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

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

Stylebotのスクリーンショット2

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

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

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

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

感想

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

​​Stylebot&Stylus(CSS)