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

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

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

[v0.1の更新遍歴]



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

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

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

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

コメント欄サンプル

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


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

CSS カスタム設定

①[a.tw-comment-item-icon]
ユーザーアイコン:
px
[a.tw-comment-item-icon > img]
アイコンサイズ:
px
px
②[div.tw-comment-item-body]
ユーザー情報とコメントの囲い
　
%
px
③[div.tw-comment-item-name-wrapper]
ユーザー情報の行
　
　
%
④[div.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-comment br] 改行タグ
⑨[div.tw-comment-item-date]
タイムスタンプ

%
px
px

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

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

.tw-comment-item-icon{
  display: unset !important;
  margin-top: 10px; }
.tw-comment-item-icon > img{
  height: 32px;   width: 32px; }
.tw-comment-item-body{
  background-color: rgba(30, 200, 30, 0.8);   flex: unset;   padding-left: 5px; }
.tw-comment-item-name-wrapper{
  background-color: rgba(30, 200, 30, 0.8);
}
.tw-comment-item-name-body{
  background-color: rgba(30, 200, 30, 0.8);
}
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: rgb(255, 255, 255) !important;
}
.tw-comment-item-name{
  font-size: 20px !important;
   padding-left: 10px; }
.tw-comment-item-screen-id{
  display: unset !important;
  color: rgb(255, 255, 255);   font-size: 20px;   padding-left: 10px; }
.tw-comment-item-star{
  display: unset !important;
  background-color: rgba(30, 200, 30, 0.8);   padding-left: 10px;
 }
.tw-comment-item-comment{
  background-color: rgba(30, 200, 30, 0.8);   color: rgb(255, 255, 255) !important;   font-size: 20px !important;   padding-left: 10px;   white-space: normal; }
.tw-comment-item-comment br {
  display: block !important;
}
.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. 背景色の選択

CSSでのカスタマイズは、HTMLによって既に設定されているHTMLタグの色やサイズなどのプロパティを変更してカスタマイズしますが、背景色の場合はどのタグの背景色を変更するかで背景枠の範囲が違ってきます。 変更するタグの組み合わせによって違うスタイルになります。 次にいくつかの組み合わせをリストしておきます。


1-1. 全幅ボックス

全部のユーザー情報とコメントに同じ幅の背景枠を表示します。

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

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

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

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

[追記 ]
③ユーザー情報の行(div.tw-comment-item-name-wrapper)の背景色変更で追加されるCSSに「display: inline-flex;」も追加するとユーザー名、ユーザーIDとサポートランキングの星の背景をギャップ無しで変更する事が出来ました。

例としては次の様なCSSになります。
.tw-comment-item-name-wrapper {
  display: inline-flex;
  background-color: rgba(0, 128, 0, 0.4);
}

次のバージョンのカスタマイザーに追加したいかと思います。


2. コメントユーザー情報の折り返しを有効化

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

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

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

関連メモ: 👉「キャスコメ欄用CSS: 改行」1.ユーザー情報の折り返し


3. コメントの改行を有効化

ツイキャスのコメント表示用のURLから得られるページでは改行タグ(<br>)が表示されない設定になっているので、標準設定だとコメントに含まれる改行が全て無視されて表示されます。

⑧コメント(div.tw-comment-item-comment)の「コメント改行タグ有効化」を選択するか、CSSに次の行を加えるとコメントに含まれる改行が無視されなくなります。

.tw-comment-item-comment br{
  dispaly: block !important;
}

関連メモ: 👉「キャスコメ欄用CSS: 改行」2.コメント内の改行の有効化


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

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

「CSSカスタム設定」のパネルからだと①ユーザーアイコン(a.tw-commnent-item-icon)の「アイコンサイズ」でアイコンの縦幅/横幅を個別で設定できます。 アイコンの半径はパネルからは変更できないので、CSSを手で変更する必要があります。 詳しくは次のメモを参照 👉「キャスコメ欄用CSS: ユーザーアイコン (サムネ)」



更新遍歴



コメント

  1. 琴葉とわ2020年9月22日火曜日 20:05:00 JST

    アイコンの大きさを変える場所がどっちもheightになってます

    返信削除
  2. キィー2020年9月22日火曜日 23:09:00 JST

    琴葉とわ さんご指摘ありがとうございます🙇‍♀️。早速、修正しておきました。

    返信削除

コメントを投稿