ブラウザ拡張機能Stylus（YouTube編）

2025年1月11日 01:19

Stylusとは

StylusはChromeやFireFoxなどブラウザで使用できる拡張機能です。
どんなことができるかというとCSSを使ってWebページのカスタマイズができます。
一から作るなら当然CSSの知識が必要になりますが、コピペするだけでも利用できます。

実践編

共通

ターゲットを「ドメイン上のURL」「youtube.com」にします。
トップページの動画一覧をいじるとデザインが崩れるので下記のCSSをコピペすることを推奨します。

/* トップページのデザインが崩れるので入れることを推奨 */
ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
    margin-left: calc(var(--ytd-rich-grid-item-margin)/2);
}
/* トップページのデザインが崩れるので入れることを推奨 */

広告を消す

トップページ・動画ページの広告を消します。

/* 広告を消す */
ytd-rich-item-renderer:has(.ytd-ad-slot-renderer),
ytd-ad-slot-renderer,
#player-ads {
    display: none !important;
}

ミックスリストを非表示にする（2025年1月12日更新）

なぜか非表示を公式で用意されていないミックスリストを非表示にします。

トップページ

/* ミックスリストを非表示にする（トップページ） */
ytd-rich-item-renderer:has(.yt-lockup-view-model-wiz--collection-stack-2) {
    display: none !important;
}

動画ページ

こちらはターゲットを「正規表現に一致するURL」「.*youtube.com/(watch|live).*」にします。

/* ミックスリストを非表示にする（動画ページ） */
yt-lockup-view-model {
    display: none !important;
}

動画名・チャンネル名に該当する動画を非表示にする

例として動画タイトル・チャンネル名に「反応集」とついてる動画をトップページ・検索結果・動画ページから非表示にします。

/* 動画名・チャンネル名に該当する動画を非表示にする */
/* チャンネル名 */
:where(ytd-rich-item-renderer, ytd-video-renderer, ytd-compact-video-renderer):has(yt-formatted-string[title*=反応集]) {
    display: none !important;
}
/* チャンネル名 */

/* 動画タイトル */
:where(ytd-rich-item-renderer, ytd-video-renderer, ytd-compact-video-renderer):has(:where(span, a)[title*=反応集]) {
    display: none !important;
}
/* 動画タイトル */

更新予定

不定期に更新する予定です。

作成したいリスト

トップページのショート動画エリア
トップページのニュース速報エリア

2025年1月12日最終更新

amazonのAPIを使って遊びたいのでできればアフィリエイト踏んでいただけると助かります