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

木曜日, 1月 26, 2023

そこまでシンプルでもないキャスコメ欄オーバーレイ用カスタムCSS (サンプル画像)

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

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

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

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

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

[目次]

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

カスタムCSS

/* Googleフォントの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Yomogi&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'Yomogi', cursive, '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 #111, -1px -2px 0 #111, 0 -2px 0 #111, 1px -2px 0 #111, 2px -2px 0 #111, -2px -1px 0 #111, -1px -1px 0 #111, 0 -1px 0 #111, 1px -1px 0 #111, 2px -1px 0 #111, -2px 0 0 #111, -1px 0 0 #111, 0 0 0 #111, 1px 0 0 #111, 2px 0 0 #111, -2px 1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 1px 1px 0 #111, 2px 1px 0 #111, -2px 2px 0 #111, -1px 2px 0 #111, 0 2px 0 #111, 1px 2px 0 #111, 2px 2px 0 #111 !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: #111;
  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などの実際に使う環境内で再度確認して下さい。

今後の改善点

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

更新履歴

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

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

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

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

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

コメント欄設定時のメモ

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

このブログを検索

メモ帳