当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【YouTube Studio】スケジュール（カレンダー）の高さを広げるCSS

YouTube

YouTubeのアイコン

この記事では、PCウェブサイト版「YouTube Studio」で、「スケジュールを設定」のカレンダーダイアログの高さを、好きなサイズに広げるCSSを書きます。

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

PCウェブサイト版「YouTube Studio」の日にち（カレンダー）ダイアログをCSSで広げた比較画像

PCウェブサイト版「YouTube Studio」で動画をアップロードする時、「スケジュールを設定」だと、日付選択ダイアログが表示されます。どの日に公開しますか？というカレンダーです。

このカレンダーの高さが狭く感じました。約1ヶ月分しか表示されず、前後の月を選択しようと思うと、スクロールする必要があります。スクロール量によっては、「びよーん」と飛ばされてしまい、目的の日にちを選択しにくい時があります。

PCウェブサイト版「YouTube Studio」の日にち（カレンダー）ダイアログ画像

CSSを利用することで、好きな高さに調整できます。自身の環境上だけで、他人には影響しません。いつでもオンオフできます。高さではなく、上下の表示位置を調整するCSSとセットで紹介します。

「よくスケジュールを設定するけど、カレンダーの高さが短すぎる！もっと広げたい！」という方、参考にしてみてください。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

インストール方法

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

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

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

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

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

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

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

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

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

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

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

「スケジュールを設定」のカレンダーの高さを広げるCSS

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

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

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

/*【YouTube Studio】撮影日選択ダイアログ*/
tp-yt-paper-dialog#dialog.ytcp-date-picker {
    top: 300px !important;
    min-height: 700px !important;
    height: auto !important;
}
注意事項

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

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

ざっくりコードの意味を書いておきます。

本コードの解説
top上下の表示位置
min-height高さ
height: auto高さを自動化して、「min-height」の数値に委ねる形にする

「top」の数値を調整することで、上下の表示位置を調整できます。「min-height」で設定した数値やモニター環境によっては、広げることで画面外にはみ出る可能性があります。その場合は、はみ出ないよう「top」の数値を調整します。

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

「min-height」が高さです。数値を大きくすると、その分広がります。広げすぎると他の要素の邪魔になったり、画面の外に見切れる可能性があるので注意です。まぁ好きな時にいつでも微調整できるので、自由にやってみましょう。

書き込めたら、スタイルシートを「×」で閉じます。

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

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

「YouTube Studio」にアクセスして、コンテンツページ（動画一覧）で、動画をアップロードします。設定ダイアログが表示されるので、最後の「公開設定」ページに移動します。

「スケジュールを設定」にして、「一般公開としてスケジュール」の日付部分をクリックします。

PCウェブサイト版「YouTube Studio」の日にち（カレンダー）ダイアログをCSSで広げた画像1

CSS導入後は、指定した高さで表示します。上記のサンプルCSSをそのままコピペするだけで、ぐぐっと高さが広くなります。僕の環境だと、約3か月分が表示されました。選択しやすくなります。

PCウェブサイト版「YouTube Studio」の日にち（カレンダー）ダイアログをCSSで広げた画像2

スケジュールではなく、撮影日の選択ダイアログにも同様に反映されます。

PCウェブサイト版「YouTube Studio」の日にち（カレンダー）ダイアログをCSSで広げた画像3

広くなります。

PCウェブサイト版「YouTube Studio」の日にち（カレンダー）ダイアログをCSSで広げた画像4

公開日時の設定ダイアログだと、今日より前の日を選択することはできませんが、撮影日の選択ダイアログだと、過去の日にちを選択するので、高さを広げることで、どっちも選択しやすくなるという恩恵が得られます。

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

時刻部分をカスタマイズする記事紹介

同じくCSSを利用することで、日にち選択ダイアログではなく、その隣の時刻選択ダイアログもカスタマイズできます。

PCウェブサイト版「YouTube Studio」の時刻ダイアログをCSSでカスタマイズした画像

僕の場合、スケジュールを設定する際は、大抵「18時公開」と決めているので、それ以外の不要な時刻は消しています。押し間違えが減ります。詳しくは、下記記事を参考にしてみてください。

他の「YouTube Studio」関連記事の紹介

「YouTube Studio」関連の記事は、他にも書いています。気になるものがあれば、参考にしてみてください。

感想

以上、PCウェブサイト版「YouTube Studio」で、「スケジュールを設定」のカレンダーダイアログの高さを、好きなサイズに広げるCSSでした。

やっぱり日頃自分が使うサービスは、使いやすい見た目にすると、全然快適度が変わりますね。「YouTube Studio」関連で、「ここをこういう風にしたい！」みたいなのがあれば、問い合わせしていただけたら、もしかしたら挑戦してみるかもしれません。僕はCSS初心者なのでできないことの方が多いですけども…。

「YouTube Studio」系のCSS記事は、他にもいくつか書いている気がするので、気になった方は、サイト内検索していただけると嬉しいです。

YouTube