— 上級者編

カスタム CSS で
自由にスタイルを変える。

OBS のカスタム CSS と Miques の Custom CSS テンプレートを組み合わせることで、フォント・色・サイズ・レイアウトをピクセル単位で自由に調整できます。

どんなときに使うか
設定手順
CSS 変数一覧
要素の表示 / 非表示
記述例

— どんなときに使うか

Default テンプレートとの使い分け

SETTINGS モーダルの GUI だけで対応できない場合に Custom CSS テンプレートを使います。次のような用途に向いています。

→

ピクセル単位のフォントサイズ指定

GUI の「小 / 中 / 大」3段階では細かさが足りないとき。

→

独自フォントの適用

OBS に追加した Google Fonts やシステムフォントを曲名に使いたいとき。

→

配信デザインとのカラー統一

GUI のカラーピッカー以上に正確な色指定（RGB / HSL など）が必要なとき。

→

特定要素の完全非表示

アーティスト名・トラック番号を CSS レベルで消してシンプルにしたいとき。

→

アニメーションの無効化

登場アニメーションを完全にオフにしたいとき。

フォントサイズ・テキスト揃え・アーティスト表示・文字色などを GUI で変えたいだけなら、Default テンプレートのままで十分です。コードは不要で、SETTINGS モーダルのスイッチだけで調整できます。

— 設定手順

3 ステップで適用する

テンプレートを Custom CSS に切り替える

SETTINGS モーダルの「テンプレート」行で、変更したいソース（歌唱中・次の曲・履歴）のテンプレートを「Custom CSS」に変更する。

OBS のブラウザソース設定を開く

OBS でブラウザソースをダブルクリックし、プロパティを開く。

「カスタム CSS」欄に CSS を入力して OK

下の CSS 変数一覧を参考に :root { } の中で変数を上書きする。入力後「OK」を押すと即時反映される。

カスタム CSS はブラウザソースごとに設定します。歌唱中・次の曲・履歴それぞれのソースに個別に入力してください。

— CSS 変数一覧

上書きできる変数

すべて :root { } の中で上書きします。

Now Singing（歌唱中）

--miques-font

フォント

デフォルト: 'Bebas Neue', sans-serif

--miques-color

テキスト色

デフォルト: #ffffff

--miques-color-label

サブテキスト色

デフォルト: rgba(255,255,255,0.5)

--miques-color-dim

プレースホルダー色

デフォルト: rgba(255,255,255,0.15)

--miques-size-title

曲名サイズ

デフォルト: 120px

--miques-size-artist

アーティスト名サイズ

デフォルト: 32px

--miques-padding

外側余白

デフォルト: 3rem

--miques-align

テキスト揃え（left / center / right）

デフォルト: left

--miques-valign

縦位置（flex-start / center / flex-end）

デフォルト: flex-end

--miques-gap

要素間の縦間隔

デフォルト: 0.25rem

--miques-animation

登場アニメーション（none で無効化）

デフォルト: miques-fade-in 0.4s ease-out

Upcoming / History（共通）

--miques-font

フォント

デフォルト: 'Bebas Neue', sans-serif

--miques-color

テキスト色

デフォルト: #ffffff

--miques-color-label

サブテキスト色

デフォルト: rgba(255,255,255,0.5)

--miques-size-song

曲名サイズ

デフォルト: 28px（Upcoming）/ 36px（History）

--miques-size-number

トラック番号サイズ

デフォルト: 20px

--miques-padding

外側余白

デフォルト: 3rem

--miques-align

テキスト揃え（left / center / right）

デフォルト: left

--miques-row-gap

行間余白（CSS padding の形式）

デフォルト: 0.5rem 0

--miques-animation

リスト登場アニメーション（none で無効化）

デフォルト: miques-fade-in 0.4s ease-out

— 要素の表示 / 非表示

クラスで show / hide する

以下のクラスに display: none を指定すると、特定の要素を非表示にできます。

.miques-artistnow-singingアーティスト名

.miques-title全エントリー曲名

.miques-number全エントリートラック番号

— 記述例

コピペで使えるサンプル

右揃え・ゴールド・アーティスト非表示

Now Singing 向け

/* Now Singing: 右揃え・ゴールド・アーティスト非表示 */
:root {
  --miques-align:      right;
  --miques-valign:     center;
  --miques-color:      #FFD700;
  --miques-size-title: 100px;
  --miques-animation:  none;
}

.miques-artist { display: none; }

独自フォント・中央揃え・アニメーションなし

Now Singing 向け（OBS にフォントをインストール済みの場合）

/* 独自フォント・中央揃え */
:root {
  --miques-font:       'Noto Sans JP', sans-serif;
  --miques-align:      center;
  --miques-valign:     center;
  --miques-size-title: 80px;
  --miques-animation:  none;
}

Upcoming: コンパクト表示

曲名のみ・小さめフォント・トラック番号非表示

/* Upcoming: コンパクト表示 */
:root {
  --miques-size-song: 20px;
  --miques-row-gap:   0.25rem 0;
  --miques-padding:   1.5rem;
}

.miques-number { display: none; }

カスタム CSS で自由にスタイルを変える。