YouTubeの検索画面をタイル表示にする【拡張機能・CSS】

更新日：2025年2月28日

YouTubeの検索画面がまともに使えなさすぎるので、使いやすく改造する。

2025-02-28更新。
現時点でのYouTubeバージョンに対応した。

CSSで検索画面のUIをタイル表示に変える

Stylus

Stylusのような外部CSSが使える拡張機能を入れ、下記のCSSを入力する。

欠点として、元の検索画面が大量表示するように作られていないため、項目のロードが遅い。

内容

サムネをニコニコ動画のように横並びさせる。
やたら主張してくるショートを消す。
おすすめされるチャンネル・映画を消す。
ほぼほぼ無意味な動画説明文を消す。

コード

/* YouTube - 検索画面をタイル表示 ver1.1
次で始まるURL
https://www.youtube.com/results?search_query
*/

ytd-video-renderer.ytd-item-section-renderer.style-scope > .ytd-video-renderer.style-scope {
    float: left;
    max-width: 300px;
    margin-bottom: 130px;
}

#video-title,
#meta {
    width: 245px;
    z-index: 99;
}

ytd-radio-renderer > #content,
ytd-playlist-renderer.style-scope.ytd-item-section-renderer > #content,
.text-wrapper {
    position: absolute;
    top: 140px;
}

#video-title {
    font-size: 15px !important;
    width: 250px !important;
}

ytd-badge-supported-renderer {
    position: absolute;
    top: 84px;
    left:140px;
    z-index: 99;
}
#channel-name{
    z-index: 0;
    
}
yt-formatted-string{
    overflow: hidden !important;
    width: 200px;
}


ytd-badge-supported-renderer.ytd-channel-name yt-icon.ytd-badge-supported-renderer{
    top: 2px;
    right: -20px;
}

.title-and-badge.ytd-video-renderer{
    overflow: visible;
}



button[aria-label="操作メニュー"]{
    margin-top:52px;
}

ytd-radio-renderer.style-scope.ytd-item-section-renderer {
    margin-bottom: 0px !important;
}


#header.style-scope.ytd-search,
ytd-continuation-item-renderer.ytd-section-list-renderer.style-scope,
#chip-bar #container,
ytd-rich-shelf-renderer.style-scope.ytd-rich-section-renderer,
ytd-video-renderer[use-search-ui]:has(a#thumbnail[href^="/shorts/"]),
ytd-secondary-search-container-renderer,
ytd-horizontal-card-list-renderer.style-scope.ytd-item-section-renderer,
#expandable-metadata,
ytd-playlist-renderer.style-scope.ytd-item-section-renderer > #content > #list,
ytd-radio-renderer > #content > #list,
.metadata-snippet-container-one-line,
ytd-shelf-renderer,
ytd-reel-shelf-renderer,
ytd-search-pyv-renderer,
ytd-movie-renderer,
.ytd-channel-renderer,
.metadata-snippet-container {
    display: none !important;
}