OBSキャスコメ CSSカスタマイザ ー (v0.1) [Archive]

このページは過去アーカイブです。

新しいバージョンを公開しました:

[v0.1の更新遍歴]



OSBでツイキャスのコメント欄を表示する際に使えるCSSを、このページの「CSSカスタム設定」を操作する事で調節する事が出来ます。 (👉関連メモ: 『ツイキャスのコメント欄を表示 (サムネ付きで)』)

HTMLとCSSの表示はOSやブラウザの種類の違いによって左右されるので、必ずしも使っているバージョンのOBSで同じように表示されるかは保証できませんが、OBS上でコメント欄がどのように表示されるかを下の「コメント欄サンプル」で確認する事が出来ます。 また、調節した設定に相当するCSSは「ツイキャスコメント欄表示用CSS」に表示されるので、その下にあるボタンを押して内容をコピーすれば、OSBの設定画面の所定の場所に張り付ける事が出来ます。

※ 画面の横幅が800ピクセル以上のデバイスやスクリーンでの表示を推奨。

OBSツイキャス コメント欄CSS カスタマイザー v.0.1 (α)

コメント欄サンプル

user icon
ユーザー名1 @c:user_id1
Star 1
ツイキャス サンプル コメント1
user icon
ユーザー名2 @c:user_id2
Star 3
ツイキャス サンプル コメント2 ツイキャス サンプル コメント2


  [背景画像と背景色の説明]

CSS カスタム設定

①[a.tw-comment-item-icon]
ユーザーアイコン:
px
②[div.tw-comment-item-body]
ユーザー情報とコメントの囲い
　
%
px
③[div.tw-comment-item-name-wrapper]
ユーザー情報の行
　
　
%
④[a.tw-comment-item-name-body]
ユーザー名とIDの囲い
　
　
%
⑤[a.tw-comment-item-name]
ユーザー名
　　　
px
px
⑥[span.tw-comment-item-screen-id]
スクリーンID
px
px
⑦[img.tw-comment-item-star]
サポートランキングの星
　
　
%
px
⑧[div.tw-comment-item-comment]
コメント
%
px
px
⑨[div.tw-comment-item-date]
タイムスタンプ

%
px
px

All Rights reserved. kii 2020-2023 (kii-memo.blogspot.com)
「透明度」は別名「アルファ値」と呼ばれて、0%が透明で100%が不透明になります。

ツィキャスコメント欄表示用CSS

a.tw-comment-item-icon{
  display: unset !important;
  margin-top: 10px; }
div.tw-comment-item-body{
  background-color: rgba(30, 200, 30, 0.8);   flex: unset;   padding-left: 5px; }
div.tw-comment-item-name-wrapper{
  background-color: rgba(30, 200, 30, 0.8);
}
div.tw-comment-item-name-body{
  background-color: rgba(30, 200, 30, 0.8);
}
div.tw-comment-item-name{
  color: rgb(255, 255, 255) !important;
   font-size: 20px !important;
   padding-left: 10px; }
span.tw-comment-item-screen-id{
  display: unset !important;
  color: rgb(255, 255, 255);   font-size: 20px;   padding-left: 10px; }
img.tw-comment-item-star{
  display: unset !important;
  background-color: rgba(30, 200, 30, 0.8);   padding-left: 10px;
 }
div.tw-comment-item-comment{
  background-color: rgba(30, 200, 30, 0.8);   color: rgb(255, 255, 255);   font-size: 20px !important;   padding-left: 10px;   white-space: normal; }
time.tw-comment-item-date{
  display: unset !important;
  background-color: rgba(30, 200, 30, 0.8);   color: rgb(255, 255, 255);   font-size: 20px;   padding-left: 10px; }









※ 複数のブラウザで動作確認を行っていますが、ウインドウズの環境でしか行っていないので、もしも、不都合がある場合はコメントで報告してもらえると幸いです。



1. 背景色のスタイルの選択


1-1. 全幅ボックス

全部のユーザー情報とコメントに同じ幅の背景枠を表示します。
user icon
ユーザー名1 @c:user_id1
Star 1
ツイキャス サンプル コメント1
user icon
ユーザー名2 @c:user_id2
Star 3
ツイキャス サンプル コメント2 ツイキャス サンプル コメント2

「CSSカスタム設定」で、
  • ②ユーザー情報とコメントの囲い(div.tw-comment-item-body)
の「等幅設定の無効化」は非選択、
  • ③ユーザー情報の行(div.tw-comment-item-name-wrapper)と
  • ⑧コメント(div.tw-comment-item-comment)
の「背景色変更」を選択して色と透明度を設定します。
CSSには次の行が必要になります。
div.tw-comment-item-name-wrapper{
  background-color: rgba(0, 128, 0, 0.4);
}
div.tw-comment-item-comment{
  background-color: rgba(0, 128, 0, 0.1);
}

1-2. 等幅ボックス

背景枠は固定幅でなく、ユーザー名の幅かコメント幅どちらか大きい方に合わせた幅の枠を表示します。
user icon
ユーザー名1 @c:user_id1
Star 1
ツイキャス サンプル コメント1
user icon
ユーザー名2 @c:user_id2
Star 3
ツイキャス サンプル コメント2 ツイキャス サンプル コメント2

「CSSカスタム設定」で
  • ②ユーザー情報とコメントの囲い(div.tw-comment-item-body)
の「等幅設定の無効化」を選択し、
  • ③ユーザー情報の行(div.tw-comment-item-name-wrapper)と
  • ⑧コメント(div.tw-comment-item-comment)
の「背景色変更」を選択して色と透明度を設定します。
CSSには次の行が必要になります。
div.tw-comment-item-body {
  flex: unset;
}
div.tw-comment-item-name-wrapper{
  background-color: rgba(0, 128, 0, 0.4);
}
div.tw-comment-item-comment{
  background-color: rgba(0, 128, 0, 0.1);
}

1-3. 行幅ボックス

ユーザー名の背景枠は固定、コメントの背景枠はコメントの幅で表示します。
user icon
ユーザー名1 @c:user_id1
Star 1
ツイキャス サンプル コメント1
user icon
ユーザー名2 @c:user_id2
Star 3
ツイキャス サンプル コメント2 ツイキャス サンプル コメント2

「CSSカスタム設定」で
  • ②ユーザー情報とコメントの囲い(div.tw-comment-item-body)
の「等幅設定の無効化」を選択し、
  • ③ユーザー情報の行(div.tw-comment-item-name-wrapper)
の「背景色変更」は非選択、
  • ④ユーザー名とIDの囲い(a.tw-comment-item-name-body)と
  • ⑧コメント(div.tw-comment-item-comment)
の「背景色変更」を選択して色と透明度を設定します。 この場合、サーポータのランクを表す星はユーザー情報の背景枠の外に表示されます。
CSSには次の行が必要になります。
div.tw-comment-item-body {
  flex: unset;
}
div.tw-comment-item-name-body{
  background-color: rgba(0, 128, 0, 0.4);
}
img.tw-comment-item-star{
  display: unset !important;
}
div.tw-comment-item-comment{
  background-color: rgba(0, 128, 0, 0.1);
}

⑦サポートランキングの星(img.tw-comment-item-star)で星の背景色を同じ色に設定出来ますが、このままだとユーザー情報の枠と星の高さが微妙に違うので、段差が発生します👇。
user icon
ユーザー名1 @c:user_id1
Star 1
ツイキャス サンプル コメント1
user icon
ユーザー名2 @c:user_id2
Star 3
ツイキャス サンプル コメント2 ツイキャス サンプル コメント2


2. コメントの折り返しを有効化 comment-break

[修正] 折り返しが無効になっているのはコメントではなく、「ユーザー名」や「スクリーンID」の表示されるユーザー情報の行でした。

ユーザー情報の行の折り返しを有効にしたい場合は次のメモを参考にして下さい:

標準設定だとコメント文の表示には折り返しが無効になっているので、送られて来たコメントの1行が表示出来る幅よりも長い場合、右側にはみ出る部分のコメントは表示されません。

⑧コメント(div.tw-comment-item-comment)の「コメント折り返し」を選択するか、CSSに次の行を加えると長いコメント行は折り返される様になります。

.tw-comment-item-comment{
  white-space: normal;
}

3. ユーザーアイコンの形の微調整

ユーザーアイコンは標準の設定値だと32x32ピクセルのサイズで表示されて、画像の半径(radius)が16ピクセル(16px)に設定されているので丸いアイコンとして表示されます。

次のCSSの「16px」の部分を別の値にしてCSSに追加するとアイコンの形を変える事が出来ます。 加えて、「width」(幅)と「height」(高さ)に続く数字を変更する事でアイコンの大きさも変更する事ができます。

.tw-comment-item-icon img{
  border-radius: 16px;
  height: 32px;
  width: 32px;
}

詳しくは次のメモを参照 👉「キャスコメ欄用CSS: ユーザーアイコン (サムネ)」




更新遍歴



コメント

コメントを投稿