【Yahoo!ニュース】コメント下の同意ボタンを非表示にするCSS

​​Stylebot&Stylus(CSS)

「Yahoo!」のアイコン

この記事では、「Yahoo!ニュース」の記事ページ下にあるコメント欄の「そう思う（同意）」、「そう思わない（非同意）」ボタンを非表示にするCSSを紹介します。

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

【Yahoo!ニュース】コメント下の同意ボタンを非表示にするCSS

本記事で紹介するCSSを使えば、「Yahoo!ニュース」の記事ページ下にある「コメント欄」のアクションボタンを非表示にできます。

通常、記事ページを開いたら、その下にコメント欄があります。そのコメントの右下には、それぞれ「そう思う（グッドボタン）」、「そう思わない（バッドボタン）」があります。どのくらいの人が反応したか分かるよう数字も表示されます。

「Yahoo!ニュース」のコメントにある「そう思う」、「そう思わない」ボタン画像

人によっては、目障りかもしれません。恐らく、「Yahoo!ニュース」公式の設定では非表示にできないと思います。（詳しく見ていないのでわかりませんが…）

この場合、CSSを使うことで消せます。「そう思う」だけ表示して、「そう思わない」ボタンは消すといったように、細かい調整も可能です。自分はこれまで通り押せるようにして、数字だけ消すこともできます。

本記事は、PCウェブサイト版限定です。スマホではできないと思います。また、自身の環境上だけです。他人のPCや本拡張機能を導入していない自分の別ブラウザなどには反映されません。自分のコメントの評価を、他の人に見えないようにする…といったものではありません。

そもそもコメント欄自体を非表示にしたい場合は、下記記事を参考にしてみてください。

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

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

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

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

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

コメントのそう思う、そう思わないボタンを非表示にする手順

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

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

右側に白紙のサイドバーが表示されます。こちらに以下のコードを書き込みます。

/*コメント欄の「そう思う（同意）」ボタン非表示*/
div[class^="UserComment"][class*="Item"] button[class*="ThumbsupButton"] {
  display: none !important;
}

/*コメント欄の「そう思わない（非同意）」ボタン非表示*/
div[class^="UserComment"][class*="Item"] button[class*="ThumbsdownButton"] {
  display: none !important;
}

上記CSSを丸々書き込むと、両方のボタンが消えます。同意ボタンは表示させたい場合、上記CSSの「そう思わない（非同意）ボタン非表示」のコードだけ書き込むようにします。「display: none !important;」が非表示にするという意味です。

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

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

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

適当に記事ページを開きます。ページをスクロールして、コメント欄まで移動します。同意・非同意のボタンが消えて、そもそも押せないようになります。「もっと見る」を押す前のページ、押した後のページ両方で動作します。

「Yahoo!ニュース」のコメント欄の同意・非同意ボタンを消した画像

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

数字だけ消す方法

「同意・非同意のボタンは、これまで通り表示してほしい。数字だけ消したい」という場合は、上記CSSではなく、以下のCSSを利用します。

/*コメント欄の同意・非同意の数字非表示*/
div[class^="UserComment"][class*="Item"] :is(span[class*="ThumbsupCount"],span[class*="ThumbsdownCount"]) {
  display: none !important;
}

同意・非同意ボタンだけになります。数字を気にしなくて済みます。

コメント欄の「そう思う」・「そう思わない」の数字だけ消した画像

感想

以上、「Yahoo!ニュース」のコメント欄のアクションボタン（そう思う、そう思わない）ボタンを非表示にする方法でした。

余談ですが、サイドバーを消したい場合は、以下の記事を参考にしてみてください。サイドバーを消して、広々と記事を読めます。

​​Stylebot&Stylus(CSS)