【Yahoo!ニュース】不要な部分を非表示にするまとめ
![「Yahoo!」のアイコン画像](https://www.naporitansushi.com/wp-content/uploads/2023/01/Yahoo-icon.png)
この記事では、PCウェブサイト版「Yahoo!ニュース」の不要な部分を非表示にして、スッキリする方法を書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」や「Stylus(スタイラス)」を利用します。
皆さん、「Yahoo!ニュース」を利用していますでしょうか。僕は正直あまり利用していません。しかし、たまーに「X(旧Twitter)」のツイートのリンク先が、「Yahoo!ニュース」の時があります。その時は、特に気にせず内容を読むんですが、ふと思いました。
「不要な部分が多くない?確固たる意志がない僕だと、あれやこれや釣られて、無駄な時間を過ごしてしまうな…」ということです。
例えば、記事下の「関連記事」、「こんな記事も読まれています」、「あなたにおすすめの記事」、右側サイドバーの〇〇ランキング、有料記事…などなどです。
![「Yahoo!ニュース」の不要な部分を示した画像](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-unnecessary-parts-hide_02.png)
クリックした記事だけ読むつもりが、関連記事やおすすめ記事をクリックしてしまい、その繰り返しで、無駄な時間を過ごしてしまう…といった感じです。僕にとって、気が散る要因になる邪魔な部分は、消すことにしました。ウェブサイトのデザインを変えられるCSSという技を利用します。
それぞれ別記事で書いたので、本記事では、それらをまとめる導線として書いています。詳しい削除方法は、それぞれのリンク先を見てみてください。
本記事は、PCウェブサイト版での解説です。スマホ版ではありません。
自身の環境上(見た目上の表示)だけの反映です。自分がこのCSSを適用することで、全ユーザーの画面上が変わるわけではありません。CSSを書き込んでいないブラウザから見たときは、いつも通りの表示です。
コメント欄
記事下にある他人のコメントの部分です。こちらは、CSSを利用しなくても消せます。
![「Yahoo!ニュース」の記事下にあるコメント欄のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-comment-hide_02.png)
コメント下の同意・非同意ボタン
それぞれのコメントの右下にある「そう思う(同意)」、「そう思わない(非同意)」ボタンです。「コメントは消したくないけど、これらのボタンは見えないようにしたい!」という方向けです。
![「Yahoo!ニュース」の記事下にあるコメントの「そう思う」、「そう思わない」ボタン画像](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-comment-good-bad-hide_03.png)
サイドバー
記事ページの右側にあるサイドバー(アクセスランキングなど)の部分です。
![「Yahoo!ニュース」の記事ページにある右側サイドバーのスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-sidebar-hide_02.png)
あなたにおすすめの記事
トップページや記事ページ下を占領している「あなたにおすすめの記事」項目です。CSSで丸々削除できます。
![「Yahoo!ニュース」の記事下にある「あなたにおすすめ」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-recommended-articles-for-you_02.png)
こんな記事も読まれています
記事下にあるタイル表示の「こんな記事も読まれています」という項目です。
![「Yahoo!ニュース」の記事下にある「こんな記事も読まれています」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-also_read-hide_02.png)
関連記事
記事下にあるテキストだけでサムネイルはない「関連記事」という部分です。
![「Yahoo!ニュース」の記事下にある「関連記事」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-related-articles-hide_02.png)
フッターのナビゲーションバー
トップページ、記事ページ下にある「アプリ」、「Facebook」、「X(旧Twitter)」、「news HACK」のリンクボタンのことです。
![「Yahoo!ニュース」のページ下部にある「アプリ」、「Facebook」、「X(旧Twitter)」、「news HACK」といったボタンのスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/01/yahoo-news-footer-navigation-bar_02.png)
合わせて、「学びがある」、「わかりやすい」、「新しい視点」のボタンを削除するCSSも紹介しています。
感想
以上、「Yahoo!ニュース」の不要な項目を非表示にする方法でした。
同じように「Google」や「Bing」版も書いています。