【YouTube Studio】スケジュールの時間を1つだけに絞るCSS

2023年7月10日2024年1月5日YouTube

この記事では、PCウェブサイト版「YouTube Studio」の動画を「スケジュールを設定」で公開する時のドロップダウンリストで、特定の時間以外を非表示にして、選択しやすくするCSSを書きます。

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

僕は、「YouTube Studio」で動画を公開する時、よくスケジュールを設定します。明日の〇時に自動公開するといった設定です。

時間を選択するドロップダウンリストは、15分間隔で時刻がずらっと表示されています。僕は、毎回18時に公開すると決めています。他の時刻は設定しないため、あっても不要です。

毎回、沢山ある選択肢から18:00を選択するよりも、最初から18:00以外を消しておいたほうが、押し間違えもなくなると思い、CSSを使うことにしました。僕は18:00ですが、皆さんの好きな時刻に調整できます。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

1. インストール方法
2. 「スケジュールを設定」で特定の時刻以外を消すCSS
3. 18時以外の時刻を表示させる場合のカスタマイズ
4. 複数の時刻を残したい場合のカスタマイズ
5. 日付カレンダーをカスタマイズする記事紹介
6. 他の「YouTube Studio」関連記事の紹介
7. 感想

インストール方法

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

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

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

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

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

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

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

「スケジュールを設定」で特定の時刻以外を消すCSS

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

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

/*YouTube Studio、公開時刻を18:00以外非表示*/
#dialog.ytcp-time-of-day-picker {
    transform: scale(1.5) !important;

    .tp-yt-paper-item.ytcp-time-of-day-picker {
        background-color: #282828 !important;
        --paper-item-selected-background: #282828 !important;

        &:not(:nth-of-type(73)) {
            display: none !important;
        }
    }
}

注意事項

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

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

記事執筆時点（2024年1月）では、入れ子でCSSを書いている場合、「Stylebot」のほうでエラーが出ますが、ブラウザ自体は対応しているので機能すると思います。書き込めたら、スタイルシートを「×」で閉じます。

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

本コードの解説
`transform: scale(1.5)`	1.5倍に拡大
`background-color --paper-item-selected-background`	時刻のドロップダウンリストの背景色
`&:not(:nth-of-type(73))`	73番目にある時刻（18:00）以外を選択
`display: none`	非表示

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

適当な動画の「公開設定」を、「スケジュールを設定」にします。時刻を選択するドロップダウンリストを開くと、18時だけ表示されて、それ以外の時刻が全部消えていると思います。合わせて選択しやすいように、「transform: scale(1.5)」で1.5倍に要素を拡大しています。

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

18時以外の時刻を表示させる場合のカスタマイズ

スタイルシートを開いて、「&:not(:nth-of-type(73))」という部分をカスタマイズしていきます。

73番目が、上から数えた時に18:00になります。「73」の数字を調整することで、自分の好きな時刻にできます。例えば、「&:not(:nth-of-type(50))」にすると、12:15が残りました。

複数の時刻を残したい場合のカスタマイズ

「12:00と15:00と18:00の3つをよく使うから、この3つは残したい…！どれか一つは選べない！」という場合、以下のようにします。

/*YouTube Studio、特定の時刻以外非表示*/
#dialog.ytcp-time-of-day-picker {
    transform: scale(1.5) !important;

    .tp-yt-paper-item.ytcp-time-of-day-picker {
        background-color: #282828 !important;
        --paper-item-selected-background: #282828 !important;

        &:not(:is(:nth-of-type(49),:nth-of-type(61),:nth-of-type(73))) {
            display: none !important;
        }
    }
}

「:is」を使って、「:nth-of-type(〇)」を複数に分けています。区切り記号は「,」です。「,」で区切って、どんどん書き足していきます。

書き足した時刻が表示されます。