【YouTube Studio】スケジュール（カレンダー）の高さを広げるCSS
この記事では、PCウェブサイト版「YouTube Studio」で、「スケジュールを設定」のカレンダーダイアログの高さを、好きなサイズに広げるCSSを書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。
PCウェブサイト版「YouTube Studio」で動画をアップロードする時、「スケジュールを設定」だと、日付選択ダイアログが表示されます。どの日に公開しますか？というカレンダーです。
このカレンダーの高さが狭く感じました。約1ヶ月分しか表示されず、前後の月を選択しようと思うと、スクロールする必要があります。スクロール量によっては、「びよーん」と飛ばされてしまい、目的の日にちを選択しにくい時があります。
CSSを利用することで、好きな高さに調整できます。自身の環境上だけで、他人には影響しません。いつでもオンオフできます。高さではなく、上下の表示位置を調整するCSSとセットで紹介します。
「よくスケジュールを設定するけど、カレンダーの高さが短すぎる！もっと広げたい！」という方、参考にしてみてください。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/「スケジュールを設定」のカレンダーの高さを広げるCSS
「YouTube Studio」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「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」の数値を調整します。
「min-height」が高さです。数値を大きくすると、その分広がります。広げすぎると他の要素の邪魔になったり、画面の外に見切れる可能性があるので注意です。まぁ好きな時にいつでも微調整できるので、自由にやってみましょう。
書き込めたら、スタイルシートを「×」で閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：studio.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
「YouTube Studio」にアクセスして、コンテンツページ（動画一覧）で、動画をアップロードします。設定ダイアログが表示されるので、最後の「公開設定」ページに移動します。
「スケジュールを設定」にして、「一般公開としてスケジュール」の日付部分をクリックします。
CSS導入後は、指定した高さで表示します。上記のサンプルCSSをそのままコピペするだけで、ぐぐっと高さが広くなります。僕の環境だと、約3か月分が表示されました。選択しやすくなります。
スケジュールではなく、撮影日の選択ダイアログにも同様に反映されます。
広くなります。
公開日時の設定ダイアログだと、今日より前の日を選択することはできませんが、撮影日の選択ダイアログだと、過去の日にちを選択するので、高さを広げることで、どっちも選択しやすくなるという恩恵が得られます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「studio.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
時刻部分をカスタマイズする記事紹介
同じくCSSを利用することで、日にち選択ダイアログではなく、その隣の時刻選択ダイアログもカスタマイズできます。
僕の場合、スケジュールを設定する際は、大抵「18時公開」と決めているので、それ以外の不要な時刻は消しています。押し間違えが減ります。詳しくは、下記記事を参考にしてみてください。
他の「YouTube Studio」関連記事の紹介
「YouTube Studio」関連の記事は、他にも書いています。気になるものがあれば、参考にしてみてください。
- 【YouTube Studio】上部のライブ配信、ポッドキャストなどの非表示CSS
- 【YouTube Studio】再生リスト選択画面の高さを広げるCSS
- 【YouTube Studio】チャンネル登録者数を非表示にするCSS
- 【YouTube Studio】変更を破棄と保存ボタンの位置を離すCSS
- 【YouTube Studio】動画管理画面の各種ボタンを非表示にするCSS
- 【YouTube Studio】視聴回数、高評価率、コメントを非表示にするCSS
感想
以上、PCウェブサイト版「YouTube Studio」で、「スケジュールを設定」のカレンダーダイアログの高さを、好きなサイズに広げるCSSでした。
やっぱり日頃自分が使うサービスは、使いやすい見た目にすると、全然快適度が変わりますね。「YouTube Studio」関連で、「ここをこういう風にしたい！」みたいなのがあれば、問い合わせしていただけたら、もしかしたら挑戦してみるかもしれません。僕はCSS初心者なのでできないことの方が多いですけども…。
「YouTube Studio」系のCSS記事は、他にもいくつか書いている気がするので、気になった方は、サイト内検索していただけると嬉しいです。