【Yahoo!ニュース】サイドバーにある「ランキング」の非表示方法

Stylebot&Stylus(CSS)

「Yahoo!」のアイコン

この記事では、「Yahoo!ニュース」の記事ページの右側サイドバーにある「アクセスランキング(経済総合)」といったランキング記事を非表示にするCSSを紹介します。

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

【Yahoo!ニュース】サイドバーにある「ランキング」の非表示方法

本記事で紹介するCSSを使えば、「Yahoo!ニュース」の右側サイドバーにある「雑誌アクセスランキング」、「アクセスランキング」などのランキング系の項目を非表示にできます。

通常、記事ページを開いたら、追従サイドバーにランキング項目が表示されます。見ている記事によって、表示されるランキングが異なります。

「Yahoo!ニュース」のサイドバーにある「〇〇ランキング」項目画像

人によっては、目障りかもしれません。恐らくデフォルトの設定では非表示にできないと思います。(詳しく見ていないのでわかりませんが…)

この場合、CSSを使うことで消せます。記事ページ、トップページ両方から削除できます。利用は自己責任です。

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

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

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

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

サイドバーの「ランキング」記事欄を消すCSS

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

Stylebotのスクリーンショット1
【ポイント】記事ページだけに反映させたい場合

「Stylebotを開く」ボタンからだと、自動的に現在開いているURLのドメインが指定されます。「Yahoo!ニュース」だと、「news.yahoo.co.jp」です。

これにより、トップページのサイドバーにあるランキング項目も消えてしまいます。それでもよい場合は、気にしなくていいですが、記事ページだけに反映させたい場合は、以下の方法にします。

「Stylebot」アイコンをクリック→「オプション」をクリックします。

「Stylebot」で、Yahoo!の記事ページだけを指定する手順画像1

「スタイル」をクリックして、「新しいスタイルを追加」をクリックします。

「Stylebot」で、Yahoo!の記事ページだけを指定する手順画像2

上部のボックスに適用したいURLを入力します。記事ページだけを適用したい場合は、「news.yahoo.co.jp/articles/*」にします。2つ目のボックスに、後述するCSSを書きます。

news.yahoo.co.jp/articles/*

こうすることで、記事ページだけで発動して、トップページでは発動しなくなります。

「Stylebot」で、Yahoo!の記事ページだけを指定する手順画像4

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

/*サイドバーにある「ランキング(〇〇)」非表示*/
div#yjnSub section.yjnSub_section:has(a[href^="/ranking/access/"]) {
  display: none !important;
}

/*サイドバーにある「動画アクセスランキング」非表示*/
div#yjnSub section.yjnSub_section:has(#vaccr) {
  display: none !important;
}

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

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

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

適当に記事ページを開きます。サイドバーのランキング項目が消えていると思います。「おすすめの有料記事」は表示されます。

「Yahoo!ニュース」のサイドバーにある「〇〇ランキング」項目を非表示にした画像

トップページだと、「コメントタイムライン」が表示されます。こちらも消すようにはしていません。

「Yahoo!ニュース」のトップページのサイドバーにある「コメントタイムライン」画像
コメント欄を消したい場合

サイドバーの「コメントランキング」まで消えるかは検証していませんが、「Yahoo!ニュース」には、CSSを使わなくても、コメント欄を消す機能が用意されています。気になった方は、参考にしてみてください。

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

感想

以上、「Yahoo!ニュース」のサイドバーにある「ランキング」記事一覧を、CSSで非表示にする方法でした。

Stylebot&Stylus(CSS)