[OBS] L◯NEの会話画面風のツイキャスコメ欄カスタムCSS (シンプル版)

「ツイキャスのコメ欄がLINEみたいだったら面白いかも」という話を小耳に挟んだので、OBSでツイキャスのコメント欄を表示する場合、カスタムCSSでLINEの会話画面をどこまで再現できるか試してみました。。

お知らせ

吹き出しの背景色や、文字の色、アイコンサイズなどをカスタマイズできるバージョンはこちら:

「L◯NEの会話画面風のツイキャスコメ欄カスタムCSS x４」

[目次]

• カスタムCSS LINE風
• 設定
• 解説
1. 閲覧さんのコメント vs 枠主のコメントの区別
2. タイムスタンプを非表示にしたい場合
3. タイムスタンプの表示位置を左右に調節
4. 吹き出し部
5. 吹き出し内のフォントの変更
6. コメント欄の下にスクロールバーが表示される場合
7. コメントに黒い影が付く件
• 今後の改善点

L◯NEの会話画面風のツイキャスコメ欄カスタムCSS

• L◯NE風 シンプルバージョン
• 📝L◯NE風 x４(アイコンサイズ変更可)バージョン: 色や文字サイズをクリックで変更可能
• 📝L◯NE風 幅細めバージョン: コメント欄を狭い幅で表示したい時用、コメントのフェードイン&フェードアウト表示が可能
• 📝『コメ欄』用カスタムCSS - L〇NE風 (ツイキャス): 吹き出しの縁取りの枠/影の表示が可能

コメント欄設定時のメモ

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

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

カスタムCSS LINE風

次のカスタムCSSの枠の右下にある、CSSをクリップボードにコピーボタンをクリックするとカスタムCSSがクリップボードにコピーされます。

👉コメント欄に表示されるタイムスタンプが24時間表記か、AM/PM表記かによって、タイムスタンプと吹き出しの距離が変わるので、実際にOBS上で表示されるタイムスタンプを確認して、コピーボタン横に表示される時間表示のオプションの「12時間表示」か「24時間表示」を選択してからCSSをコピーして下さい。

/* 絵文字フォントの読み込み */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

/*
  Generated by キャスコメカスタムCSS L〇NE風 - シンプル版 (ツイキャス用)
  url: https://kii-memo.blogspot.com/2021/04/Line-like-custom-css.html
*/

/* ページ設定 */
::-webkit-scrollbar {
  height: 0; /* スクロールバーを表示させない設定 */
}
.tw-comment-window-page {
  min-width: 220px;
}

/* テキストの影を無効化 */
body .tw-comment-item-body,
.tw-comment-item-name,
.tw-comment-item-comment { text-shadow: none !important; }

/* リプを非表示 */
.tw-comment-item[data-type=mention] { display: none; }

/* リプを右にずらして表示 */
.tw-comment-item[data-type=mention] {
  width: 60%;
  margin-left: auto; margin-right: auto;
}

/* 枠主のコメントを右寄せ */
.tw-comment-item { clear:both; }
.tw-comment-item:not([data-type=other]):not([data-type=mention]) {
  float: right;
}

.tw-comment-item-body {
  flex: unset !important; /* 全てのコメントが同じ幅にならない設定 */
  margin-top:0.5em;
}
.tw-comment-item[data-type=other] .tw-comment-item-body {
  max-width: calc(100% - 13em); /* 閲覧コメントの幅の上限 */
  margin-left:10px;
}
.tw-comment-item:not([data-type=other]):not([data-type=mention]) {
  max-width: calc(100% - 10em) !important;  /* 枠主コメントの幅の上限 */
}

/* コメント部の主な設定 */
.tw-comment-item-comment br {
  display: block !important; /* コメント内の改行の有効化 */
}
body {
  font-family: 'Hiragino Kaku Gothic ProN','Hiragino Sans','メイリオ','Meiryo',system-ui,-apple-system,BlinkMacSystemFont,'Noto Color Emoji',sans-serif;
}
body .tw-comment-item-comment {
  color: #000 !important;
  font-size: 15px !important;
  border-radius: 16px;
  margin: 3px 0 !important;
  padding: 3px 12px !important;
}
.tw-comment-item[data-type=other] .tw-comment-item-comment {
  background-color: #ffffff; /* 閲覧コメントの背景色 */
}
.tw-comment-item[data-type=mention]  .tw-comment-item-comment {
  background-color: rgba(238, 238, 238, 0.7); /* リプコメの背景色 */
}
.tw-comment-item:not([data-type=other]):not([data-type=mention]) .tw-comment-item-comment {
  background-color: #9DE694; /* 枠主コメントの背景色 */
  margin-right: 8px !important;
}
/* 吹き出し部を疑似要素(pseudo-element)として設定 */
.tw-comment-item[data-type=other] .tw-comment-item-comment::before {
content: "\25E3"; /* 閲覧コメントの吹き出し口 */
  transform: rotate(-35deg);
  color: #fff;
  margin-left: -13px;
  margin-top: -10px;
  float:left;
}
/* リプコメの吹き出し口 */
.tw-comment-item[data-type=mention] .tw-comment-item-comment::before {
  content: '';
  position: absolute;
  height: 10px; width: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E %3Ccircle cx='14' cy='14' r='8' fill='%23eeeeee' opacity='0.7'/%3E %3Ccircle cx='34' cy='32' r='14' fill='%23eeeeee' opacity='0.7'/%3E %3C/svg%3E");
  margin-left: -18.5px;
  margin-top: -6px;
}
.tw-comment-item:not([data-type=other]):not([data-type=mention]) .tw-comment-item-comment::before {
  content: "\25E2"; /* 枠主コメントの吹き出し口 */
  color: #9DE694;
  transform: rotate(35deg);
  margin-right: -13px;
  margin-top: -10px;
  float:right;
}
/* style=2のURLで追加される影を吹き出し部で無効化 */
.tw-comment-item-comment::before {
  text-shadow: none !important;
}
  
/* 閲覧側アイコン */
.tw-comment-item[data-type=other] .tw-comment-item-icon,
.tw-comment-item[data-type=mention]  .tw-comment-item-icon {
  display: unset !important;
  margin-top: 14px;
  margin-right: 0;
}

/* ユーザー情報の行 */
.tw-comment-item-info {
  padding-bottom: 3px;
}
.tw-comment-item:not([data-type=other]):not([data-type=mention]) .tw-comment-item-info {
  display: none; /* 枠主のユーザー情報は表示しない */
}
body[data-is-embedded=true] .tw-comment-item-name {
  color: rgb(255, 255, 255) !important;
}
.tw-comment-item-name-body {
  overflow: visible !important; /* ユーザー情報が長い場合に省略されない様に設定 */
}
/* ユーザーID */
.tw-comment-item .tw-comment-item-screen-id {
  display: unset !important;
  color: rgb(255, 255, 255);
}
/* サポートの星 */
.tw-comment-item-star {
  display: unset !important;
}

/* タイムスタンプ */
.tw-comment-item-date {
  color: rgb(255, 255, 255) !important;
  display: unset !important;
  margin-top: -1.5em !important;
  height: 0;
}
.tw-comment-item[data-type=other] .tw-comment-item-date,
.tw-comment-item[data-type=mention] .tw-comment-item-date {
  float:right;
  margin-right: 11em; /* 右に出る様に調節 (閲覧) */
}
.tw-comment-item:not([data-type=other]):not([data-type=mention]) .tw-comment-item-date {
  float:left;
  margin-left: 11em; /* 左に出る様に調節 (枠主) */
}

#キャスコメカスタム

注: OBSにカスタムCSSをペーストする時は、以前に設定されていたCSSが残らない様に気をつけて下さい。
(「カスタムCSS」右横の入力ボックスに既にCSSが設定されている場合は、ボックス内を一度クリックしてから、Windowsは [Ctl]+[A]　、macは[⌘]＋[A]ボタンを同時に押して、すでに入力されているCSS全てを選択した後に新しいCSSをペーストします。）

設定

タイムスタンプ(日付と時間)の表示
  12時間表示の場合
  24時間表示の場合

タイムスタンプの距離調整 (正の数の場合は吹き出しとの距離が増えます。)

閲覧側 em

枠主側 em

オーバーレイのURLで「style=2」が指定されている場合
  ユーザー名とコメントの黒い影(文字の縁取り)を表示しない。

リプコメ差別化設定
  リプコメを表示しない (枠主のリプは表示されます。)
  リプコメを中央寄せで表示

※ この設定はツイキャスのサイトからコピーした正規のオーバーレイURL使用時のみに有効で、色々とURLのパラメーターを省略した簡易URL使用時は無効になります。

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

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

解説

次に上のカスタムCSSの説明をメモしておきますが、基本的なHTMLとCSSの知識を前提にした解説になります。

１. 閲覧さんのコメント vs 枠主のコメントの区別

LINEの会話画面では自分のコメントは緑色の背景で右側に、相手のコメントは白の背景で左側に表示されます。

ツイキャスの「ツール・ゲームズ配信」ページからコピーしたコメ欄表示用のURLを、パソコンのブラウザに入力して、表示されたページのHTMLソースを確認してみると、各ユーザーの情報とコメントが「tw-comment-item」いうクラスのDIVタグ内に記述されている事が確認出来ます。

• また、閲覧さんのコメントのDIVタグは
  

  <div class="tw-comment-item" data-type="other"> ... </div>

• 枠主のコメントのDIVタグは
  

  <div class="tw-comment-item" data-type="you"> ... </div>

というフォーマットになっていて、どちらも「data-type」というアトリビュート(属性)が設定されていますが、閲覧さんのコメントには「other」、枠主のコメントには「you」と違う属性値になっているので、CSSの属性セレクタを使って区別する事ができます。

上のカスタムCSSの頭、6行目では以前:

.tw-comment-item[data-type=you] { float:right; }

「float:right;」を設定して、枠主のコメントだけを右寄せに設定していますした。

[04/Dec/2021修正]: この設定は、ツイキャスのサイトからコピーする正式な「配信ツール向けオーバーレイ」を使う場合は全く問題がないのですが、色々とURLのパラメーターを省略した簡易URLを使っている人もいる様で、その場合は枠主のコメントの「data-type」アトリビュート(属性)は「owner」と設定されています。

この場合、簡易URLを使っている場合は上記のCSS属性セレクタ「[data-type=you]」では枠主のコメントが正確に区別されず、すべてのコメントが左側に表示されてしまいます。

なので上のカスタムCSSの頭、6行目では:

.tw-comment-item:not([data-type=other]) { float:right; }

と「:not([data-type=other])」をセレクターに使って「float:right;」を設定して、枠主のコメントだけを右寄せに設定しています

また、これだけだと、一番上に表示される枠主のコメント以降のコメントの表示が全て右寄せになってしまうので、5行目の

.tw-comment-item { clear:both; }

では、右寄せ、左寄せの設定を各コメントごとにクリアする様にしています。

また、その少し下にある (12～18行目)

.tw-comment-item[data-type=other] .tw-comment-item-body {
  max-width: calc(100% - 13em); /* 閲覧コメントの幅の上限 */
  margin-left:10px;
}
.tw-comment-item:not([data-type=other] {
  max-width: calc(100% - 10em) !important;  /* 枠主コメントの幅の上限 */
}

では、コメント「max-width」を設定して各コメントの幅の上限を設定していますが、「calc(...)」を使って表示幅の100%からタイムスタンプの表示幅分だけ狭くなる様にしています。

枠主側は10em、閲覧側はアイコンの幅も加わるので13emの幅を100%の表示幅から差し引いていますが、この関係で、コメント欄の幅が400px以下だと表示が切れてしまう場合もあるので、その場合はタイムスタンプを非表示にすると良いと思います^※。

12行目のCSSセレクタは「.tw-comment-item[data-type=other] .tw-comment-item-body」と長くなっていますが、このような方法で閲覧さんのコメントDIVタグ内にある「.tw-comment-item-body」全てを選ぶ事が出来ます。

残りのCSSでは、この方法を使って閲覧コメントと枠主コメントで違う背景色やアイコンの表示/非表示を設定しています。

15/Aug/2022 追記:

簡易URLではなく、ツイキャスのサイトからコピーした正規URLを使っている場合に限られるみたいですが、コメント内に「@」マークを使ったユーザー名の引用があると、閲覧コメントでもコメントがアイコン表示無しで左側に表示されてしまう様です。。

「リプ」又はリプコメ」と呼ばれるコメントの事になりますが、data-typeが「mention」(メンション) に設定されていて、普段閲覧コメントに設定される「other」ではない為、現バージョンのCSSだと枠主コメントとして判断される為、左側に表示されます。

又、枠主が同様にユーザー名を引用した場合でもdata-typeが「mention」に設定される為、閲覧/枠主に限らずリプコメは左側に表示されます。   (07/Sep/2022 追記) 改めて確認した処、枠主がリプコメをした場合、正規のオーバーレイURLを使っていればdata-typeは「you」に設定される様です。

近日中に、カスタムCSSを「mention」にも対応した仕様に更新したいと思いますが、現時点で閲覧のリプコメが右側に表示されるのが気になる場合は、ツイキャスのアカウントメニューで「@」マークをNGワードに設定すると配信内でリプコメが送れなくなるので、この設定でリプコメが表示されない様にする事も可能です。

25/Aug/2022 追記: リプコメ差別化設定

カスタムCSSの設定にリプコメを非表示にするか、次の例の様に中央寄せで少し違う色で表示するオプションを追加しました。

一番上の例では吹き出しの部分が黒い背景上では灰色になっていますが、リプコメの背景色は白色に不透明度70% (透明度30%)で設定されているので、他の例では吹き出しの色は背景色が透けた色で表示されます。

但し、このオプションはツイキャスの「ツール・ゲームズ配信」ページからコピーしたオーバーレイのURLを使っている時にのみ有効で、いろいろとパラメータが省略されている簡易URLを使っている場合はリプコメが差別化されない為、無効になります。

２. タイムスタンプを非表示にしたい場合

[22/Jul/2021 追記] 「CSSをクリップボードにコピー」ボタンの上にタイムスタンプの表示/非表示を選択するオプションを追加しました。 このオプションの選択を外すと、このページの一番上にあるCSSには「/* タイムスタンプ */」とある行とそれ以降が表示されなくなるので、次の変更をする必要はありません。

※ 上記カスタムCSSでタイムスタンプを非表示にするには、12～18行目の部分で次に取り消し線が引いてある部分を削除:　

.tw-comment-item[data-type=other] .tw-comment-item-body {
  max-width: calc(100% - 13em); /* 閲覧コメントの幅の上限 */
  margin-left:10px;
}
.tw-comment-item:not([data-type=other] {
  max-width: calc(100% - 10em) !important;  /* 枠主コメントの幅の上限 */
}

又、最後尾部にある次の部分を削除します。 (それか、取り消し線が引いてある部分を削除するだけでもOKです。)

/*　タイムスタンプ */
.tw-comment-item-date {
  color: rgb(255, 255, 255) !important;
  display: unset !important;
  margin-top:-1.5em !important;
  height: 0;
}
.tw-comment-item[data-type=other] .tw-comment-item-date {
  float:right;
  margin-right:-11em; /* 右に出る様に調節 */
}
.tw-comment-item:not([data-type=other] .tw-comment-item-date {
  float:left;
  margin-left:-11em; /* 左に出る様に調節 */
}

３. タイムスタンプの表示位置を左右に調節

[21/Jul/2021 追記]

OBSは普段、ウインドウズのコンピューターで使っているので上の「LINE会話画面風CSS」は、当初ウインドウズ版のOBSで調節していたのですが、後日にmac版のOBSで確認した処、日付の表示と吹き出しが重なって表示されていました。。

文字のサイズウインドウズ版とマック版で違う?？のかと直感的に思ったのですが、そうではなく、実は、時間の表示がウインドズ版では24時間表示 (例: 2021/7/18 22:35:16) で、mac版では12時間表示 (例: 2021/7/18 9:35:16 PM)になっていて、最後にAM/PMの表示がある分、mac版の時間の表示が長いというのが理由でした。

いろいろと試してみましたが、特にOSの時間表示の設定や言語設定を変更してもこの表示が変更されるという事でもなかったので、ウインドウズ版とmac版とで、OBSの中の設定の違うのが原因なのだと思われます。。。※

解決法

CSSの最後尾部にある/*　タイムスタンプ */の部分で:

/*　タイムスタンプ */
.tw-comment-item-date {
  color: rgb(255, 255, 255) !important;
  display: unset !important;
  margin-top:-1.5em !important;
  height: 0;
}
.tw-comment-item[data-type=other] .tw-comment-item-date {
  float:right;
  margin-right:-11em; /* 右に出る様に調節 */
}
.tw-comment-item:not([data-type=other] .tw-comment-item-date {
  float:left;
  margin-left:-11em; /* 左に出る様に調節 */
}

「margin-right:」「margin-left:」の右にある値を:

• Windows版のOBSの様に時間が24時間表示になっている場合は、「-11em」
• mac版のOBSの様に時間が12時間表示になっている場合は、「-12.5em」

に設定します。

※: OBSのバージョン26.1.xと27.0.1で確認しましたが、今後の新バージョンで設定が変わる可能性もあるかもしれません・・・

[追記 (18/Aug/2021)] 本日確認した処、ウインドウズ版のOBSでもタイムスタンプが12時間表示 (AM/FM)になっていました。 「３.タイムスタンプの表示位置を左右に調節」の追記から、OBSのバージョンは変わっていませんでしたが、ウインドウズにはいくつかのアップデートがあったので、何かの原因で設定がリセットされたか、ウインドウズの仕様がアップデートされたのかと思われます。

でも、いろいろと試してみましたが、OBS上での表示を以前の24時間表示に戻す方法が見つからなかったので上のCSSをコピーして使う場合は「12時間表示」か「24時間表示」かを確認してからコピーする様にお願いします。

注 [13/Dec/2021追記]: Windowsでタイムスタンプが24時間表示になっている場合に、CSSの方で12時間表示を設定すると、配信の時間帯によっては時間表示が表示幅からはみ出てしまい、コメント欄の下部にスクロールバーが表示されてしまう場合があるみたいです。

スクロールバーを表示させない為には、正しい時間表示を選択してCSSをペーストし直すか、上記の数値を手動で小さい数値に編集してみてください。

また、これ以外にも、OBSのブラウザソースの『幅』の設定が狭いと時間帯に関係なくスクロールバーが表示されてしまう場合があるみたいなので詳しくは別のメモ📝内の項目 『コメント欄の下にスクロールバーが表示される場合』 (📝L◯NE風ツイキャスコメ欄カスタムCSS x４(アイコンサイズ変更可)バージョン )を参考にしてみて下さい。

４. 吹き出し部

このCSSではコメントの吹き出しの根本の部分を「◣」(U+25E3) と「◢」(U+25E2)の文字で再現しています。

/*　吹き出し部を疑似要素(pseudo-element)として設定 */
.tw-comment-item[data-type=other] .tw-comment-item-comment::before {
  content: "\25E3";
  transform: rotate(-35deg);
  color: #fff;
  margin-left: -13px;
  margin-top: -10px;
  float:left;
}
.tw-comment-item:not([data-type=other] .tw-comment-item-comment::before {
  content: "\25E2";
  color: #9DE694;
  transform: rotate(35deg);
  margin-right: -13px;
  margin-top: -12px;
  float:right;
}
/*　style=2のURLで追加される影を吹き出し部で無効化 */
.tw-comment-item-comment::before {
    text-shadow: none !important;
}

コメントを表示するDIVタグ (tw-comment-item-comment) の疑似要素 (pseudo-element) として同DIVタグのコーナーに重ねて表示していますが、「transform: rotate(-35deg);」といった設定も追加して、文字を少し回転させて表示しています。

最後の3行については、オーバーレイのURL内に「style=2」というパラメーターが含まれる場合に表示される文字の黒い影が根本部の三角にも表示されるのを防ぐCSSのコードになります。

iPhoneのLINEの場合だと、弧を描く様な吹き出しで、もしも三日月の文字でもあれば、もう少し再現度が高かったと思うのですが、実はアンドロイドのLINEの場合は吹き出しの根元部はそこまで弧を描いていないので、アンドロイドのLINE風のコメント欄となっていますw。

👇アンドロイド版LINEの例 (個人情報削除済み)

因みに、枠主が時々コメントを入れないと白の背景のコメントばかりになってしまって、LINE風というのが伝わらない場合もあると思うので、定期的に自枠にコメントを入れる努力も必要かもしれませんｗｗ。

現在、アンドロイドでツイキャスのコメント欄を表示出来るアプリ『コメ欄』をGoogleストアで公開していますが、このアプリのサポート用に作った別サイトでも、L◯NEの会話画面風のカスタムCSSを公開していて、このカスタムの場合は吹き出しの根本部分が弧を描いていて、もう少し忠実に再現されています。

仕様としては、吹き出し部に影、又は囲み線を追加出来る様になっていて、移動しながらのカメラ配信などで背景の色が吹き出し部の色と類似する場合でも吹き出しの境目を見易くする事が出来ます。

OBSのコメント欄のカスタムCSSと互換なので、興味のある方はこちらも試してみてください:

👉『コメ欄』用カスタムCSS - L〇NE風 (ツイキャス)

５. 吹き出し内のフォントの変更

[04/Aug/2021 追記]

コメントで「吹き出しの中のフォントを変更することは可能でしょうか？」という質問があったので次に説明を加えておきます。

吹き出し部は「tw-comment-item-comment」いうクラスのDIVタグで記述されるので、上のカスタムCSS内にある、 「/* コメント部の主な設定　*/」と 「/*　吹き出し部を疑似要素(pseudo-element)として設定 */」の行間にある次の部分:

/* コメント部の主な設定　*/
   : : :

.tw-comment-item-comment {
  color: #000 !important;
  font-size: 15px !important;
  border-radius: 16px;
  margin: 3px 0 !important;
  padding: 3px 12px !important;
}

   : : :
/*　吹き出し部を疑似要素(pseudo-element)として設定 */

を使って変更する事が出来ます。

例としては、Windows版のOBSで、上のカスタムCSSの.tw-comment-item-comment{...}の部分を:

.tw-comment-item-comment {
  color: #000 !important;
  font-size: 15px !important;
  font-weight: bold;
  font-family: "UD デジタル 教科書体 N-B","UD Digi Kyokasho N-B";
  border-radius: 16px;
  margin: 3px 0 !important;
  padding: 3px 12px !important;
}

に書き換えると、コメント欄のフォントが「UD デジタル 教科書体 N-B」の太字で表示される様になります。

font-weightでは文字の太さが指定出来て、lighter、 normal、 bold、 bolderといったキーワード、それか100、200、… 900の値で設定出来ます。

つけ加えて、font-style: italic;を加えるとイタリック、font-style: oblique;を加えると斜体を指定出来ます (フォントによってはイタリックも斜体も同じ様に表示されるみたいですが。。)。

font-familyはフォントの種類を指定しますが、そのフォントが使っているパソコンにシステムフォントとしてインストールされていないと正しく表示されないので注意が必要になります。 パソコンに標準でインストールされいるフォントも、OSがWindowsか、macOS、Linuxか、また各OSのバージョンによっても変わる^※ので、違う環境のパソコンを複数台使っている場合は、実際にOBSがインストールされているパソコン上で確認する必要もあると思います。

※: 各OSで標準にインストールされているフォントがどのように表示されるかをまとめているページもあったりするので参考までに👉「フォントカタログ・標準の日本語フォント (外部サイト)」

Windowsの場合は<Winods>/fontsのフォルダでインストールされているフォントが確認できるのでそこで確認出来るフォントの名前を正確にfont-familyの値として設定すれば吹き出し内のフォントとして表示されるはずです。

[追記 (24/Aug/2021)] システムフォントでなく、CSS3.0互換のWebフォントを使う方法を別のメモ📝「質〇箱風のツイキャスコメ欄カスタムCSS」で紹介しています

例としては、Googleフォントに登録されているWebフォント「フォント名」を使いたい場合:

@import url("https://fonts.googleapis.com/css2?family=フォント名&display=swap");

をカスタムCSSの先頭に付け加える事でGoogleフォントのWebフォントが読み込まれるので。 読み込んだフォントを表示したい部分を選択するCSSセレクタで次のプロパティを追加します:

font-family: フォント名

６. コメント欄の下にスクロールバーが表示される場合

[29/Jan/2022 追記]

[22/Apr/2022 内容更新]

コメント欄の下にスクロールバーが表示されてしまう場合があるみたいですが、対処法としてカスタムCSSに次のCSS設定を追加しました。

/* スクロールバーを表示させない設定 */
::-webkit-scrollbar {
  height: 0;
}

現行バージョンのカスタムCSSではスクロールバーが表示されない仕様になっています。

７. コメントに黒い影が付く件

[11/Nov/2021追記]

(2021年末に) ツイキャスのツール配信ページでコピーする「配信ツール向けオーバーレイ」のURLが微妙に変更された模様で、以前よりも表示される文字が大きめで、しかもかなり濃い影付きで表示される仕様になっています。 コピーしたURL中に「style=2」というパラメーターが追加されているので、この部分を「style=1」や「style=0」などの様に別の値に変更すると以前の表示になります。

👉関連メモ: URL内の「style=2」パラメータ (📝「配信ツール向けオーバーレイ」のURLを探せ??)

コメントに黒い影が付く場合。。

[15/Apr/2022]: URL中に「style=2」が設定されている場合でも黒い影が文字に付かない仕様にカスタムCSSを変更しました。

現行バージョンのカスタムCSSでは文字に黒い影が付かない仕様になっています。

更新履歴

[23/Jul/2023]: ユーザー名の色を指定するCSSセレクターを「.tw-comment-item .tw-comment-item-name」から「body[data-is-embedded=true] .tw-comment-item-name」に修正。 匿名様コメントありがとうございました。

[21/Oct/2022]: Noto Color Emojiフォント設定がページ全体に反映される仕様に変更

[25/Aug/2022]: リプコメの表示スタイルを変更/非表示にするオプションを追加。(オーバーレイの正規URL使用時のみ有効で、簡易URLの場合はリプコメが差別化されないので無効になります。)

[19/Aug/2022]: OBSのブラウザのプロパティで設定する「幅」の値を「250」まで下げても表示の右端が切れない様に変更。 CSS内にサイト情報を追加。

[25/May/2022]: 14/May/2022の更新後、タイムスタンプがコメントの横ではなく、ユーザー情報の行の右に表示されてしまっていたのを修正しました。

[14/May/2022]: 閲覧コメントの文字数が小さい場合、吹き出しの幅がユーザー名の幅に揃ってしまわない仕様に変更。

[22/Apr/2022]: オーバーレイの表示幅が320px以下の場合でもスクロールバーが表示されない仕様に変更。

[15/Apr/2022]: オーバーレイのURLで「style=2」が設定されている場合でも文字の黒い影が表示しない仕様に変更 (設定で変更可)。

[10/Feb/2022]: 絵文字フォントの追加。

[03/Jan/2022]: タイムスタンプの距離調整を追加。

[13/Dec/2021]: 閲覧アイコン(.tw-item-icon)の表示位置を調節。margin-top: 5px → 18px 14px

[04/Dec/2021]: 枠主コメントを判断するCSSセレクターの一部を「[data-type=you]」から「:not([data-type=other])」に変更しました。

[19/Nov/2021]: オーバーレイのURL中に「style=2」が設定されている場合に、吹き出しの根本部に使われている三角(◣と◢)にも影が付いてしまうのでカスタムCSSを修正しました。

[18/Aug/2021]: タイムスタンプを表示する場合、12時間表示か24時間表示かを選択するオプションについての説明を変更しました。
CSS内で吹き出しの根元部として表示される「◣」と「◢」をユニコード表記に変更しました。

[04/Aug/2021]: 解説「吹き出し内のフォントの変更」を追加

[22/Jul/2021]: タイムスタンプの表示/非表示選択ボタンの追加。
(👉解説「タイムスタンプを非表示にしたい場合」参照)

[20/Jul/2021]: AA(アスキーアート)の様な改行を含むコメントの改行が反映される様に、コメント内の改行を有効化するCSSを追加しました。
(👉📝「キャスコメ欄用カスタムCSS: 改行」内の「コメント内の改行の有効化」 参照)

[18/Jul/2021]: mac版のOBSで確認した処、タイムスタンプの一部が吹き出しと重なって表示される不都合を修正しました。
(👉解説「タイムスタンプの表示位置を左右に調節」参照)

今後の改善点 (??)

文字の行間やフォントといった細かい部分は別として、次に今回のCSSで再現しきれなかった部分をリストしておきます。

• タイムスタンプに日付はいらない (現在のCSSだけでは変更不可)。
• 枠主のコメントに「既読」が付かない。
• 15/Aug/2022 追記: 閲覧によるリプコメが左側に表示されてしまう。
  ✅「リプコメ差別化設定」を追加しました。

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

• L◯NEの会話画面風のツイキャスコメ欄カスタムCSS
1. シンプル版 (このメモ)
2. x４(アイコンサイズ変更可)バージョン: アイコンサイズ64x64バージョン
3. 幅細めバージョン: 狭い幅で表示したい時用
4. 『コメ欄』用カスタムCSS: 吹き出しに枠線や影を付ける事が出来るバージョン
• 質○箱風: 「質○箱風のツイキャスコメ欄カスタムCSS」
• マシュマロ風: 「マシュマ〇風のツイキャスコメ欄カスタムCSS」
• ツイ〇ター風:「ツイ〇ター風のツイキャスコメ欄カスタムCSS」
• OBSキャスコメ CSSカスタマイザ ー

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

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

---

コメント欄設定時のメモ

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