Skip to content

Custom CSS for YouTube Comments that can be applied to OBS

Notifications You must be signed in to change notification settings

MoomA-0750/horizontal-comments-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 

Repository files navigation

Screenshot 2024-01-10 at 5 33 24

おそらく結構荒削り状態だと思われるので、何か見つかった際は、issueを建てていただくか、Xアカウントにでも連絡下さいますと助かります

とりあえずこのレポジトリにあるCSSファイルの中身を丸コピして、OBSのカスタムCSS欄に貼り付けていただければ動くはずです

カスタムの仕方

cssファイルのトップにある以下の部分で、基本的なカスタムはできるようになっています

:root {
    /* ユーザーネームの文字色 */
    --username-color: rgba(255, 255, 255, 0.7);
    /* メンバー加入ユーザーの文字色 */
    --membership-user-color: #FFCDE5;
    /* チャット本文の文字色 */
    --message-color: #fff;
    /* 本文アウトライン色 (4個目の数字を0にして無効化) */
    --message-outline-color: rgba(0,0,0,0.35);
    /* 本文文字サイズ */
    --font-size: 20px;
    /* 本文列高さ */
    --line-height: 24px;
    /* フォント */
    --font: "LINE Seed JP_OTF";
    /*コメントと名前の空間*/
    --space: 4px;
    /* コメント間の空間 */
    --gap: 50px;
    /*底の高さ*/
    --floor: 10px;
  }

基本的には「:」この記号の後の文字列を変更することにより変更できます

またその際、一番最後にある「;」の記号は残すようにしてください

変更前

/* フォント */
--font: "LINE Seed JP_OTF";

変更後

/* フォント */
--font: "IBM Plex Sans JP";

色の指定

記法がわかる場合はそのまま変更していただけますが、わからない場合は下記のツールの使用をお勧めします (インストールしている場合はPowerToysのColor Pickerも便利かも)

Color Picker

色の指定方法

フォントの指定

一番上の:rootの中の以下の部分を変更してください

/* フォント */
--font: "LINE Seed JP_OTF";

フォント名の確認方法

Windows

設定アプリに行き、「個人用設定」から「フォント」へ行くと、インストールされているフォントが表示されます

Screenshot 2024-01-10 202427 Screenshot 2024-01-10 202937

使用したいフォントを検索すると結果が表示されるので、目的のフォントの名前をそのまま入力します

Screenshot 2024-01-10 210629

この場合は「IBM Plex Sans JP」がその名前になり、

/* フォント */
--font: "IBM Plex Sans JP";

のようになります

macOS

Font Bookを開き、検索バーで目的のフォントを検索します

Screenshot 2024-01-10 at 22 19 27 Screenshot 2024-01-10 at 22 19 57

結果が表示されるので、目的のフォントの名前をそのまま入力します

Screenshot 2024-01-10 at 22 23 00 Screenshot 2024-01-10 at 22 22 42

この場合は「IBM Plex Sans JP」がその名前になり、

/* フォント */
--font: "IBM Plex Sans JP";

のようになります

About

Custom CSS for YouTube Comments that can be applied to OBS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages