【YouTube】チャンネルページのヘッダーをスタイリッシュにするCSS

2022年5月16日Stylebot&Stylus

Stylebotのアイコン

この記事では、YouTubeのチャンネルページのチャンネル名やタブを、ヘッダー画像に埋め込んで、スタイリッシュ&コンパクトにするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

YouTubeのチャンネルページのヘッダーを、CSSでカスタマイズした比較画像

本記事で紹介するCSSを使えば、YouTubeのチャンネルページのヘッダーをコンパクトにできます。具体的には、以下の部分を調整しています。背景色、透明度、位置、角丸具合は個別に調整できます。

  • ヘッダー背景画像サイズ
  • ヘッダー背景画像の角丸化
  • ヘッダー全体の位置を背景画像に重ねる(上に移動)
  • チャンネル名・ヘッダー背景の半透明化
  • ヘッダーのタブ(ホーム、動画、再生リストなど)の位置調整、文字色
  • ヘッダーのタブ内にある左右の矢印ボタン非表示
  • チャンネル名の背景角丸&色変更
  • チャンネル登録ボタンの角丸化

通常、YouTubeのチャンネルページは、結構なスペースをヘッダーが占有していて、少し見にくいです。CSSで、ヘッダー画像にチャンネル名やタブを埋め込むことで、コンパクトにできます。

通常のYouTubeヘッダー画面は、かなり占有している

「ヘッダーを、もっとコンパクト、スッキリさせたい!」という方、ぜひ参考にしてみてください。いつでも元に戻せます。実際に適用してみた動画を貼っておきます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

YouTubeのヘッダー画像に、チャンネル名、タブボタンを埋め込むCSS

YouTubeにアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebot Stylebotを開く

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。結構長いですが、そのままコピペでOKです。細かい調整方法は、後で紹介します。

下記コードは、ダークテーマ用です。僕がダークにしているからです。ライトテーマの方は、こちらを参考にしてみてください。

/*ヘッダーの背景画像のサイズ*/
.banner-visible-area {
  max-height: 150px;
  min-height: 150px;
}

/*ヘッダー背景画像の角丸化*/
#background {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/*ヘッダーの位置を背景画像に重ねる(上に移動)*/
#channel-container.ytd-c4-tabbed-header-renderer {
  position: absolute;
  top: 0;
  left: 3px;
}

/*チャンネル名・ヘッダー背景の透明化*/
#channel-header.ytd-c4-tabbed-header-renderer,
#channel-container.ytd-c4-tabbed-header-renderer,
#tabs-container.ytd-c4-tabbed-header-renderer {
  background-color: transparent !important;
}

/*ヘッダーのタブ(ホーム、動画、再生リストなど)の位置調整、背景色*/
#tabs {
  background-color: rgba(32, 32, 32, .7);
  border-radius: 10px;
  max-height: 2.5em;
  position: absolute;
  top: 0px;
  min-width: 58em;
}

/*ヘッダーにタブ内にある左右の矢印ボタン非表示*/
tp-yt-paper-icon-button#right,
tp-yt-paper-icon-button#left {
  display: none;
}

/*チャンネル名の背景角丸&色変更*/
#channel-header-container {
  background-color: rgba(32, 32, 32, .7);
  border-radius: 10px !important;
  max-height: 70%;
}

/*チャンネル名横の「メンバーになる」、「チャンネル登録」のサイズ、角丸具合*/
tp-yt-paper-button[aria-label$="をチャンネル登録"],
tp-yt-paper-button[aria-label="このチャンネルのメンバーになります"],
tp-yt-paper-button[aria-label="チャンネルをカスタマイズ"],
tp-yt-paper-button[aria-label="動画を管理"] {
  padding: 4px !important;
  border-radius: 8px;
}

/*ヘッダー右下にあるリンク集の位置、角丸具合*/
#links-holder.ytd-c4-tabbed-header-renderer {
  top: 75%;
  position: fixed;
  border-radius: 10px;
  overflow: hidden;
}

/*ヘッダー右下にあるリンク集の左側の角丸具合*/
div#primary-links {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。YouTubeのチャンネルページを開きます。誰のページでもOKです。(ナポリタン寿司の場合、こちら)ヘッダーがスタイリッシュ&コンパクトになっています。

チャンネルページのヘッダーにあるチャンネル名とタブボタンが、ヘッダー画像に埋め込まれる

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

適用してみたGIF画像を貼っておきます。ちゃんとページをスクロールすると、タブ(ホーム、動画、再生リストなど)が追従して、上部に固定されます。

本記事で紹介したCSSを適用してみたGIF画像

上記コードで、100%満足いく結果になる方は少ないと思います。僕の好きなようにしているので、人によって好みは変わると思います。そこで、各項目を微調整してみましょう。

ヘッダーの背景画像のサイズ

まずは、ヘッダーの背景画像のサイズです。

「ヘッダーの背景画像のサイズ」の「max-height」と「min-height」の数値を変更することで、好きな高さにできます。もっとコンパクトにしたい場合は、数値を低くします。例えば、100pxにしたい場合は、以下になります。

/*ヘッダーの背景画像のサイズ*/
.banner-visible-area {
  max-height: 100px;
  min-height: 100px;
}
Stylebot ヘッダーの背景画像のサイズ調整「max-height: 100px;」

チャンネルページの背景画像の高さが、100pxになります。極端に狭くしすぎると、タブやチャンネル名が被ってしまうのでほどほどに。

ポイント

本記事を公開した時は、僕のミスで、ヘッダー画像がないチャンネルページにて、チャンネル名とタブが被ってしまい、正常に表示されませんでした。

そこで、「min-height」を追加して、ヘッダー画像の最低限の高さを設定しました。これで表示崩れが発生しなくなると思います。

チャンネル名とタブ名が被ってしまっていたが、修正後のCSSでは表示崩れしなくなる

ヘッダー背景画像の角丸化

「ヘッダー背景画像の角丸化」で背景画像の左上、右上の角丸具合を調整できます。

ヘッダー背景画像の左上・右上の角丸具合

「角丸にしたくない!カクカクがいい!」という場合は、下記コードを丸々書き込まないようにします。もっと角丸にしたい場合は、「10px」を「20px」といった風に数値を大きくします。

/*ヘッダー背景画像の角丸化*/
#background {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

ヘッダーの位置

何気に重要ポイントです。ヘッダーのチャンネル名の位置を調整できます。

上下が「top」、左右が「left」となっているので、好きなように数値を調整します。使っているモニターによって、最適な数値は異なると思います。

/*ヘッダーの位置を背景画像に重ねる(上に移動)*/
#channel-container.ytd-c4-tabbed-header-renderer {
  position: absolute;
  top: 0;
  left: 3px;
}

例えば、「もう少しチャンネル名を下にずらしたいな~」という場合は、「top: 0;」を「top: 60px;」といった風にします。

チャンネル名の位置調整「top」

タブの位置調整・背景色

ここが、一番重要かもしれません。タブ(ホーム、動画、再生リスト、コミュニティ、チャンネル、概要)の位置、背景色を調整できます。

/*ヘッダーのタブ(ホーム、動画、再生リストなど)の位置調整、文字色*/
#tabs {
  background-color: rgba(32, 32, 32, .7);
  border-radius: 10px;
  max-height: 2.5em;
  position: absolute;
  top: 0px;
  min-width: 58em;
}

背景色の変更

「background-color: rgba(32, 32, 32, .7);」の部分で、背景色、透明具合を調整できます。

例えば、上記コードでは、半透明にしています。「半透明だと見にくい!ヘッダー画像透けなくていいから、色を濃くしたい!」という場合は、以下のようにします。

  background-color: rgba(32, 32, 32, 1);

「rgba(32, 32, 32, .7);」の最後の数字を「1」にするということですね。ポイントですが、「.7」は、「0.7」という意味です。「1」にする場合は、「.」記号を削除して、「rgba(32, 32, 32, 1);」にします。

逆に、もっと透明にしたい場合は、「.7」の数値を低くします。透明度が変化します。「rgba(32, 32, 32, 0);」にすると、透明になります。

比較画像を貼っておきます。

「background-color: rgba(32, 32, 32, 1);」と「background-color: rgba(32, 32, 32, 0);」にした比較画像

透明にすると、文字色の影響で、見にくくなるかもしれません。その場合、「color」コードを付与して、好きなカラーコードで文字色を変更します。黒にする場合は、以下のようになります。

  color: #000;
「color」で、ヘッダーのタブの文字色を変更

位置調整(top、left)

「top」で上下の位置を調整できます。コードには書いていないですが、「left」を自分で追加することで、左右の位置も調整できます。

実際に「top」の数値を変更して、位置調整してみた動画を貼っておきます。上にずらしたい場合は、「-」記号を数字の前につけます。「top: -20px;」といった感じです。ただし、数字を大きくしすぎると、スクロールした時に正常に固定されないので注意です。

基本的には、ヘッダー画像の一番下らへんに来るように調整してみてください。

「left」を書く場合は、以下のようになります。「10px」の部分を好きな数値に変更します。

left:10px;

角丸具合(border-radius)

「角丸なのが許せない!」という方は、「border-radius」の数値を「0」にするか、行ごと削除します。もっと角丸にしたい場合は、数値を大きくします。

タブの背景の角丸が廃止されて、カクカクになる

以下のようにすると、タブの上部だけ角丸にして、下部はそのままにできます。

border-radius: 20px 20px 0 0;
タブ名の上半分(左上、右上)だけを角丸にした画像

高さ(max-height)

「max-height」の数値で、背景の高さを調整できます。いちお、僕が色々試してみて、「2.5em」あたりが、ちょーどいいかなぁと思ったのですが、人によっては、微妙かもしれません。

数値を減らしたり、増やしてみてください。増やすと大きくなり、減らすとコンパクトになります。

タブの高さをコンパクトにした画像(2em)

チャンネル名のカスタマイズ

一つ前では、タブのカスタマイズについて書きましたが、最後は、チャンネル名のカスタマイズです。タブと同じように、角丸具合、背景色、高さを調整できます。

/*チャンネル名の背景角丸&色変更*/
#channel-header-container {
  background-color: rgba(32, 32, 32, .7);
  border-radius: 10px !important;
  max-height: 70%;
}

背景・文字色

「background-color」で背景色を変更できます。灰色から薄い緑、水色、真っ白…など、RBGA次第で好きな色にできます。「#FFF」といったHTMLカラーコードでもいいのですが、半透明にしたい場合は、RBGAにしましょう。

チャンネル名、タブの背景色を、薄い緑にした画像

背景を透明にしたい場合は、「background-color: rgba(32, 32, 32, .7);」を「background-color: rgba(32, 32, 32, 0);」にします。

チャンネル名の背景を透明にした画像

ただし、透明にすると文字色の影響で見にくくなるかもしれません。その場合、以下のコードを新しい行に追加して、文字色を変更してみましょう。チャンネル名とチャンネル登録者名をピンポイントで好きな色にできます。

/*チャンネル名、登録者数の文字色*/
.ytd-channel-name #text,
#subscriber-count {
  color: #000 !important;
}

「#000」が黒にするという意味です。カラーコードは、インターネットで検索してみましょう。

「チャンネル名の背景角丸&色変更」のコード内に書くのではなく、全く別の新しい行から書き始めます。

チャンネル名の文字色を黒にした画像

角丸具合(左側の背景がアバター画像からはみ出る問題の対処法)

「border-radius: 10px !important;」でチャンネル名の背景の角丸具合を調整できます。「10px」の数値を大きくすると、より角丸になります。

ポイントが、左側部分です。普通に10pxと指定すると、左側の背景がアバター画像からはみ出てしまいます。これが嫌な場合、下記の「border-radius」を使ってみてください。

チャンネル名の背景がアバター画像の左にはみ出る問題を修正した比較画像
  border-radius: 50px 10px 10px 50px !important;

4つ数字がありますが、左から左上、右上、右下、左下の角丸具合になっています。それぞれ4つの角を個別に調整できます。

上記コードは、左上、左下の角丸だけ「50px」にするという意味です。これで、アバター画像から背景がはみ出なくなります。

高さ調整

「max-height: 70%;」で、高さを調整できます。よりスタイリッシュ・コンパクトにしたい場合は、数字を小さくします。「56%」にしてみた画像を貼っておきます。どうすかね~。好きにしてみましょう。

チャンネル名の背景の高さを調整した画像(max-height: 70%;)

チャンネル名横のボタンのサイズ、角丸具合

他の方の「チャンネル登録」、「メンバー登録」、自身のアカウントの「チャンネルをカスタマイズ」、「動画を管理」の余白を小さくして、角丸にするコードです。

チャンネル登録、メンバーになるボタンを角丸にした画像

角丸が不要な場合は、「border-radius: 8px;」の行を削除します。もっと角丸にしたい場合は、数字を大きくします。

余白を小さくすることで、ボタンがきゅっと小さくなります。余白を0にしたい場合は、「padding: 4px !important;」を「padding: 0 !important;」にします。

/*チャンネル名横の「メンバーになる」、「チャンネル登録」のサイズ*/
tp-yt-paper-button[aria-label$="をチャンネル登録"],
tp-yt-paper-button[aria-label="このチャンネルのメンバーになります"],
tp-yt-paper-button[aria-label="チャンネルをカスタマイズ"],
tp-yt-paper-button[aria-label="動画を管理"] {
  padding: 4px !important;
  border-radius: 8px;
}

ヘッダー右下にあるリンク集の位置、角丸具合

チャンネルによって、設置されているヘッダー画像右下に表示される各SNSへのリンク集の位置を調整できます。

ヘッダー画像内の右下にあるリンク集

本記事を公開した翌日に、「リンク集が消えてしまいます」という不具合を教えていただいたので、追記しました。すっかり抜け落ちていました笑感謝です。

「position: fixed;」のおかげで、左右の調整は不要だと思います。上下の位置を調整したい場合は、「top: 75%;」の数値を変更します。「px」ではなく、「%」で指定するといいと思います。

/*ヘッダー右下にあるリンク集の位置、角丸具合*/
#links-holder.ytd-c4-tabbed-header-renderer {
  top: 75%;
  position: fixed;
  border-radius: 10px;
  overflow: hidden;
}

ライトモードをお使いの場合

本記事で紹介したCSSは、ダークテーマ用です。ライトテーマの時だと、下記画像のように、タブやチャンネル名の背景色が浮いてしまいます。

本記事で紹介したCSSはダークモード用なので、ライトモードでは違和感

そこでチャンネル名、タブの背景を、それぞれライトモード用に変更してみましょう。

本記事で紹介したCSS内にある「ヘッダーのタブの位置調整、背景色」と、「チャンネル名の背景角丸&色変更」項目内にある「background-color」を、ライトモード用に差し替えます。例えば、真っ白の半透明にしたい場合は、以下のコードになります。

  background-color: rgba(255, 255, 255, .7);

いい感じにライトモードに最適化されます。後の細かいカスタマイズ(位置調整、角丸具合など)は、ダーク用の方法と一緒です。

ライトモードに合うように、チャンネル名・タブの背景色を白にした画像

感想

以上、YouTubeのヘッダー周りをごっそりカスタマイズして、スッキリコンパクトにするCSSでした。

導入前と導入後を比較してみると分かりますが、普段、かなりヘッダーが画面を圧迫していることに気づきます。

最後になりますが、本記事は、TwitterのDMから送っていただいたコードを、僕なりに改造してみました。最初は、公開するつもりなかったのですが、なんかいい感じにできたかも…と思ったので、共有しました。情報提供していただいた方、感謝です。

Posted by ナポリタン寿司