[OBS] そこまでシンプルでもないキャスコメ欄カスタムCSS

以前公開した「とてもシンプルなキャスコメ欄カスタムCSS」のもう少しカスタマイズが出来るカスタムCSSを作ってみました。

これまで設定出来た文字の縁取りの色だけでなく、

• コメント以外の文字サイズや、
• フォントの種類、
• 太文字とイタリックの選択、
• ユーザーアイコンの大きさ

も変更出来る仕様になっています。

OBSでツイキャスのコメント欄を設定する方法や、下に説明するCSSをOBSに読み込ませる方法については、先に別のメモ
「📝ツイキャスのコメント欄を表示 (サムネ付きで)」 を参照して下さい。

[目次]

• カスタムCSS
• コメント欄サンプル
• 設定
• 今後の改善点 (??)
• 更新履歴

👉 📝キャスコメカスタムCSS まとめ

カスタムCSS

/* Googleフォントの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");
/* 絵文字フォントの読み込み */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

/*
  Generated by そこまでシンプルでもないキャスコメカスタムCSS (ツイキャス用)
  url: https://kii-memo.blogspot.com/2023/01/not-so-simple-custom-css.html
*/

body {
  /* フォント設定 */
  font-family: 'Hiragino Kaku Gothic ProN','Hiragino Sans','メイリオ','Meiryo',system-ui,-apple-system,BlinkMacSystemFont,'Noto Color Emoji',sans-serif'Noto Sans JP', sans-serif, 'Noto Color Emoji';
}

.tw-comment-item-comment br {
  display: block !important; /* コメント内の改行の有効化 */  
}
body .tw-comment-item-body {
  text-shadow:none !important; /* テキストの影を無効化 */
}
.tw-comment-window-page {
  min-width: unset; /* 表示幅の最低値(320px)を無効化 */
}

/* 文字の影 */
.tw-comment-item-name,
.tw-comment-item-comment {
  text-shadow: -2px -2px 0 #00ff00, -2px -1px 0 #00ff00, -2px 0px 0 #00ff00, -2px 1px 0 #00ff00, -2px 2px 0 #00ff00, -1px -2px 0 #00ff00, -1px -1px 0 #00ff00, -1px 0px 0 #00ff00, -1px 1px 0 #00ff00, -1px 2px 0 #00ff00, 0px -2px 0 #00ff00, 0px -1px 0 #00ff00, 0px 0px 0 #00ff00, 0px 1px 0 #00ff00, 0px 2px 0 #00ff00, 1px -2px 0 #00ff00, 1px -1px 0 #00ff00, 1px 0px 0 #00ff00, 1px 1px 0 #00ff00, 1px 2px 0 #00ff00, 2px -2px 0 #00ff00, 2px -1px 0 #00ff00, 2px 0px 0 #00ff00, 2px 1px 0 #00ff00, 2px 2px 0 #00ff00 !important;
}

/* アイコン */
.tw-comment-item-icon {
  display: unset !important;
}
.tw-comment-item-icon>img {
  border-radius: 50%;
  height: 32px;
  width: 32px;
}

/* ユーザー名 */
.tw-comment-item-name {
  display: none; /* ユーザー名を非表示 */
  fontsize: 10px;
  font-weight: bold;
  
  font-style: italic;
  
}
a.tw-comment-item-name:link,
a.tw-comment-item-name:visited,
a.tw-comment-item-name:hover,
a.tw-comment-item-name:active {
  color: #ffffff !important;
}

/* ユーザーID */
.tw-comment-item-screen-id {
  display: unset !important;
  fontsize: 12px;
  font-weight: bold;
  
  font-style: italic;
  
  color: #8d9296;
}

/* サポートの星 */
.tw-comment-item-star {
  display: unset !important;
  height: 14px;
}

/* コメント */
.tw-comment-item-comment {
  font-size: 16px !important;
  font-weight: bold;
  
  font-style: italic;
  
  color: #ffffff !important;
}
.tw-comment-item-comment-hash {
  white-space: nowrap;
}
.tw-comment-item-comment-hash-icon {
  stroke: #00ff00;
  stroke-width: 4px;
}

/* タイムスタンプ */
.tw-comment-item-date {
  display: block !important;
  fontsize: 12px;
  font-weight: bold;
  
  font-style: italic;
  
  color: #8d9296;
  margin-top: 0;
}

#キャスコメカスタム

コメント欄サンプル

下は配色を確認する為のサンプル表示になります。 (上の設定を変更するとサンプルの表示が更新されます。)

ユーザー名1 @c:user_id1

ツイキャス サンプル コメント1

26/1/2023 1:56:44 AM

ユーザー名2 @c:user_id2

ツイキャス サンプル コメント2、
ツイキャス サンプル コメント2

26/1/2023 1:56:21 AM

実際に表示されるパーツのサイズや位置がサンプルと微妙に違う場合があるので、『コメ欄』や、OBSなどの実際に使う環境内で再度確認して下さい。

設定

設定変更後は「コメント欄サンプル」でどの様に表示されるかを確認できます。

: 下の設定はブラウザに一定期間保存される設定になっていますが、左のリセットボタンで既定値に初期化出来ます。

縁取りの色

👈左のボックスをクリックして縁取りの色を変更出来ます。

又、下のサンプルの色をクリックするとその色が縁取りの色として設定されます。

#EEAAAA

#EEBBAA

#EECCAA

#EEDDAA

#EEEEAA

#DDEEAA

#CCEEAA

#BBEEAA

#AAEEAA

#AAEEEE

#AADDEE

#AACCEE

#AABBEE

#AAAAEE

#EEEEEE

上の色をマウスでドラッグして下の文字色のボックスにドロップする事も可能です。

アイコン:

表示

アイコンサイズ  px

ユーザー名:

表示

文字サイズ  px

B I

文字色

ユーザーID:

表示

文字サイズ  px

B I

文字色

サポートの星/メンシプバッジ:

表示

高さ  px

コメント:

文字サイズ  px

B I

文字色

タイムスタンプ:

表示

文字サイズ  px

B I

文字色

フォント設定:
無し Noto Sans JP Noto Serif JP Hachi Maru Pop Kaisei Tokumin Rampart One Train One Yomogi

ABC あいうえお

(フォントの変更)

今後の改善点

• IDとタイムスタンプにも囲み？

更新履歴

[13/Sep/2024]	表示幅が320px以下でも行が改行される仕様に更新。
[26/Jan/2023]	初公開

OBS ツイキャス用カスタムCSS

• とてもシンプルなキャスコメ欄カスタムCSS
• そこまでシンプルでもないキャスコメ欄カスタムCSS

👉 📝キャスコメカスタムCSS まとめ

👉 キャスコメ カスタムCSSのタグが付いたこのサイトのメモ

---

コメント欄設定時のメモ

• 📝気になる配信画面のぼやけ: 解像度編
• 📝気になるコメント欄のぼやけ: シーン上での変換

当サイトで公開しているカスタムCSSを、ツイキャスの配信中にコメント欄を表示する目的で使う場合は問題ありませんが、コードの一部又は全体をそのままコピーして、まるで自分が作ったかの様に他のサイトで公開/配布する事はくれぐれも控えて下さい。

当サイトのテキスト・画像の無断転載・複製を固く禁じます。 All Rights Reserved. (https://kii-memo.blogspot.com/ & https://kii-memo.blog.jp)