【Yahoo!ニュース】サイドバーを非表示にして、横幅を広げるCSS

​​Stylebot&Stylus(CSS)

「Yahoo!」のアイコン

この記事では、「Yahoo!ニュース」の右側サイドバーを非表示にして、記事本文の横幅を広げるCSSを紹介します。

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

【Yahoo!ニュース】サイドバーを非表示にして、横幅を広げるCSS

本記事で紹介するCSSを使えば、「Yahoo!ニュース」の右側サイドバーを、丸々非表示にできます。

「Yahoo!ニュース」では、右側に「アクセスランキング」や「コメントランキング」といった記事本文とは関係ないサイドバーが表示される仕様になっています。

「Yahoo!ニュース」の記事ページの右側サイドバー画像

人によっては、気が散るかもしれません。どうしても消したい方、参考にしてみてください。記事ページだけで適用する方法、トップページも含めたサイドバー自体を削除する方法の2通り紹介します。

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

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

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

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

「Yahoo!ニュース」のサイドバーを消す手順

「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!の記事ページだけを指定する手順画像3

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

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

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

/*サイドバー非表示*/
div#yjnSub {
  display: none !important;
}

/*サイドバーがあった部分まで記事の横幅を広げる*/
div#yjnMain {
  max-width: max-content !important;
}

「yjnSub」がサイドバーを指しています。こちらを「display: none !important;」で非表示にしています。

さらに、サイドバーがあった部分まで記事の横幅を広げるため、「yjnMain」に「max-width: max-content;」を適用しています。本文の横幅を広げたくない場合は、「サイドバーがあった部分まで記事の横幅を広げる」を書かないようにします。

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

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

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

適当に記事ページを開きます。サイドバーが丸々非表示になって、記事本文の横幅が広がります。余計な要素が目に入らなくなります。

「Yahoo!ニュース」の記事ページにある右側サイドバーを非表示にした画像

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

感想

以上、「Yahoo!ニュース」の「コメントランキング」や「アクセスランキング」といった右側サイドバーを丸々消す方法でした。

​​Stylebot&Stylus(CSS)