広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【YouTube】各チャンネルページの「おすすめ」を非表示にするCSS

2023年11月24日YouTube

YouTubeのアイコン

この記事では、PCウェブサイト版「YouTube」で、2023年11月から表示されるようになった各チャンネルページの「おすすめ」を、視聴者側で無理やり非表示にするCSSを書きます。

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

【YouTube】各チャンネルページの「おすすめ」を非表示にするCSS

2023年11月20日から、「YouTube」の各チャンネルページに、「おすすめ」というタイル項目が、表示されるようになりました。

これまでは、自分がカスタマイズした動画、再生リストなどが表示されていましたが、その上に、新しくどかーんと表示されるようになった…という感じです。

「YouTube」のチャンネルページに2023年11月20日から実装された「おすすめ」セクション画像

動画投稿者側の場合、自分のチャンネルページで表示させないようにできます。詳しくは、下記記事を参考にしてみてください。

本機能が実装された時、全員一律で勝手にオンになった状態で導入されています。記事執筆時点(導入されてまだ4日目)では、全員のチャンネルページで表示されているように見えますが、時間の経過とともに、オフにする投稿者さんもある程度は増えて、もう少し遭遇率は減ると思います。

「それでも我慢できない!そもそも全員のチャンネルページで不要!消したい!」という方は、本記事を参考にしてみてください。

視聴者側では、オンオフできる設定項目が用意されていません。CSSを利用することで、ウェブサイトの見た目上、無理やり非表示にできます。

CSSを書き込んだブラウザ上の反映で、他人には影響しません。PC画面をスクリーンショットなどで見せない限り、非表示にしたことが投稿者にバレることはありません。

本記事は、拡張機能を導入できるPCブラウザ向けです。スマホアプリ版から見た時も同様に「おすすめ」は表示されますが、スマホアプリにCSSは書き込めないのでできません。

Androidスマホアプリ版「YouTube」で僕のチャンネルページにある「おすすめ」を見てみた画像

インストール方法

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

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

「Chromeに追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Stylebot」拡張機能をインストールする手順画像3

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

チャンネルページの「おすすめ」セクションを非表示にするCSS

YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*チャンネルページの「おすすめ」動画非表示*/
#contents.ytd-item-section-renderer:has(yt-horizontal-list-renderer[should-use-mixed-list-height]) {
    display: none !important;
}
注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

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

「Stylebot」拡張機能のスクリーンショット2

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

誰でもいいので、「おすすめ」を非表示にしていないチャンネルページにアクセスします。僕のチャンネルは、既に投稿者の僕自身が非表示にしたので、CSS導入に関わらず、表示されないはずです。僕以外で、誰かのチャンネルページで見てみてください。

CSS導入後は、ホームタブの「おすすめ」動画セクションが非表示になっていると思います。

PCウェブサイト版「YouTube」のチャンネルページに表示される「おすすめ」をCSSで非表示にした画像

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。

動画投稿者が自身のチャンネルページで「おすすめ」をオンオフする方法

冒頭にも紹介しましたが、動画の投稿者は、自身のアカウントに限り、非表示にできます。他人のチャンネルページを改造するといったことは当然できませんが、自身のチャンネルページ上で消したい場合は、試す価値があると思います。

詳しくは、下記記事を参考にしてみてください。

非表示ではなく、表示する内容をカスタマイズする方法も書いています。

自分では消せない他人のチャンネルについては、ひっそり本記事のCSSを使うことで、見た目上、非表示にできます。

【余談】CSSを使えば、「他の人はこちらも視聴しています」も消せる

CSSを利用することで、検索結果の「他の人はこちらも視聴しています」、「他の人はこちらも検索」、「関連する検索から」、「あなたへのおすすめ」、「『〇〇』の最新の動画をお見逃しなく」、「未視聴のチャンネル」、「前に再生した動画」といった汚染項目も、サクッと非表示にできます。

CSSをこれまで知らなかった人が聞いたら、「えっ、ウェブページって自分でカスタマイズできるの!?」と驚かれるかもしれません。僕も驚きました。

YouTube Studio」の制限、視聴回数、高評価率(低評価比率)、コメントの列を消すこともできます。

「Google」の「他の人はこちらも検索」も、CSSで非表示にできます。

Amazon」のヘッダーにある郵便番号やユーザー名を、スクリーンショットに掲載しないよう非表示にしたり、送料部分の装飾をカスタマイズして、バカ高い送料を、購入前に気づきやすくすることもできます。

感想

以上、PCウェブサイト版「YouTube」で、2023年11月から表示されるようになった各チャンネルページの「おすすめ」を、視聴者側で非表示にするCSSでした。

「YouTube」×「CSS」関連の記事はいくつか書いています。気になった方は、当サイトの「YouTube(CSS)」カテゴリーをチェックしてみてください。

2023年11月24日YouTube

Posted by ナポリタン寿司