Без кейворда

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

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

コメント欄設定時のメモ

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

カスタムCSS LINE風

/* 絵文字フォントの読み込み */ @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] /* リプを右にずらして表示 */ .tw-comment-item[data-type=mention] /* 枠主のコメントを右寄せ */ .tw-comment-item < clear:both; >.tw-comment-item:not([data-type=other]):not([data-type=mention]) < float: right;margin-left: auto; > .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; /* 左に出る様に調節 (枠主) */> CSSをクリップボードにコピー #キャスコメカスタム

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

設定

タイムスタンプ(日付と時間)の表示 12時間表示の場合 24時間表示の場合 タイムスタンプの距離調整 (正の数の場合は吹き出しとの距離が増えます。) オーバーレイのURLで「style=2」が指定されている場合 ユーザー名とコメントの黒い影(文字の縁取り)を表示しない。 リプコメ差別化設定 リプコメを表示しない (枠主のリプは表示されます。) リプコメを中央寄せで表示

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

解説

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

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

. .

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

.tw-comment-item[data-type=you]

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

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

.tw-comment-item:not([data-type=other])

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

.tw-comment-item .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; /* 枠主コメントの幅の上限 */>

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

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 追記: リプコメ差別化設定

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

[ 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; /* 枠主コメントの幅の上限 */> /* タイムスタンプ */.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は普段、ウインドウズPCで使っているので上の「LINE会話画面風CSS」は、当初ウインドウズ版のOBSで調節していたのですが、後日にmac版のOBSで確認した処、日付の表示と吹き出しが重なって表示されていました。。

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

解決法

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; /* 左に出る様に調節 */>

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

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

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

４. 吹き出し部

/* 吹き出し部を疑似要素(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

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

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

[ 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がインストールされているパソコン上で確認する必要もあると思います。

Windowsの場合は/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 内容更新] /* スクロールバーを表示させない設定 */ ::-webkit-scrollbar height: 0;>

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

[ 11/Nov/2021 追記]

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

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

更新履歴

[ 26/Apr/2025 ]: メモ帳の別サイトで公開している「[OBS] コメントを逆の順番で表示 (ツイキャス/YouTube)」のツイキャス用の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内で吹き出しの根元部として表示される「◣」と「◢」をユニコード表記に変更しました。

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

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

今後の改善点 (??)

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

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

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

コメント欄設定時のメモ

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

コメントコメント失礼します！こちらの吹き出しの中のフォントを変更することは可能でしょうか？返信削除コメント失礼します。視聴者のユーザー名を大きくするにはどうすれば良いのでしょうか？返信削除

コメントありがとうございます。ユーザー名は「.tw-comment-item-name」というクラスのタグ内にあるので「.tw-comment-item-name 」といった行をCSSに付け加えるとユーザー名が大きなフォントで表示されるはずなので行内の数字「16」を好みの大きさのユーザー名になる様に調節してみてください。ID(.tw-comment-item-screen-id)とサポートの星(.tw-comment-item-star)の大きさも合わせて変更したい場合は「.tw-comment-item-screen-id .tw-comment-item-star 」といった行を追加して行内の数字を同様に調節してみてください。

丁寧に解説していただいて申し訳ないのですが、自分が試した限りでは出来ませんでした。お手数をお掛けしますが１度確認していただいてもよろしいですか？削除 .tw-comment-item-name ありがとうございます。自分の設定場所が悪かったようです。変更できました！削除修正: 「you」を置き換えるのは「other」にではなく「owner」にでした。削除 [追記] 04/Dec/2021に加えた変更で、正規でないオーバーレイのURLを使っていても、枠主側のコメントの背景色と位置が正しく表示される様になっているはずです。削除

とにかく難しいとは思うんですけどｗこのＣＳＳはキャス専用じゃないですか？同時配信で他のコメントを同時に表示させる方法なんてmulti comment viewerくらいしかないです・・・よね？返信削除

コメントありがとうございます。(?)業者の方かAIか何かで作成しているコメントでしょうか？ multi comment viewerは使った事はありませんが、ツイキャス閲覧時に使う物と理解していますが、CSSでコメント欄の表示をカスタマズするのにも対応していますか？

ユーチューブには使えたりしませんか？返信削除吹き出し内のフォントを大きくしたのですが元のフォントサイズに戻すやり方を教えてもらいたいです。返信削除

/* コメント部の主な設定 */.tw-comment-item-comment br display: block !important; /* コメント内の改行の有効化 */>.tw-comment-item-comment color: #000 !important; font-size: 15px !important;などなどとある、最後の「font-size: 15px !important;」の行の数字を変更する事で吹き出し内の文字の大きさを変える事ができます。＜続く＞削除

「font-size: 15px !important;」の行の数字を変更しても大きさが変わらない場合、個人で変更又は追加したCSSが影響している可能性が高いと思われます。。その場合はカスタムCSSをテキスト編集ソフトなどにコピペしてCSS内の「font-size」という文字をすべて検索して、どの部分の数字を変更したら吹き出し内の文字の大きさが変わるか確認してみて下さい。削除

文字が必ず黒い外ふちがついてしまうのですが、黒外縁は削除できないのでしょうか？返信削除

コメントありがとうございます。 OBS上でカスタムCSSをペーストするのに開くプロパティの上の方に「URL」という欄がありますが、そこに入力した文字列の内にある「style=2」の数値を2以外の値にすると黒い縁は表示されなくなるはずだと思います [ページの頭のオレンジ色の枠内の追記参照]。

(1) カスタムCSS内の.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; /* 枠主コメントの幅の上限 */>

(2) 後.tw-comment-item:not([data-type=other]) < float:right; >の行は編集するのではなくよりは削除してしまう方が良いと思います。削除

.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; /* 左に出る様に調節 */>

の部分を、閲覧の設定が標準になる様に.tw-comment-item .tw-comment-item-date float:right; margin-right:-11em; /* 右に出る様に調節 */>などに書き換えますが、これだとタイムスタンプが右にはみ出てしまうので、気になる場合は上のコメント(1)で削除した部分の代わりに

.tw-comment-item-body max-width: calc(100% - 13em); /* コメントの幅の上限 */>

明るい背景に使用したいです。ユーザー名を黒くしたいのですが、.tw-comment-item .tw-comment-item-name 部分に color: #000 !important; を追加しても白いままです。どうしたらいいでしょうか、？返信削除

コメントありがとうございます。「.tw-comment-item .tw-comment-item-name」だと、デフォルトに読み込まれるCSSに含まれる「body[data-is-embedded=true] .tw-comment-item-name」によって上書きされてしまう様です。なので、「.tw-comment-item .tw-comment-item-name」を「body[data-is-embedded=true] .tw-comment-item-name」に変更すると問題ないはずです。後でこのページのCSSを更新しておきます。

ツイキャスで使用したいのですがユーザー名とユーザーIDを非表示にしたいです。やり方を教えていただけたら幸いです返信削除コメントの表示を上から更新ではなく、本来のLINEのメッセージのように下にどんどん更新されていく形にしたいのですが、変更方法をご教授いただけますと幸いです。返信削除コメントを投稿ラベルもっと見る一部のみ表示ブログアーカイブもっと見る一部のみ表示このブログの人気の投稿ツイキャスで推しをサポートした日を簡単に確認する方法 OBSの音声出力を他のアプリへ渡す方法 (音声モニタリング) VB-Cable 仮想オーディオ・ケーブル (Virtual Audio Cable) [Chrome拡張機能] カスタムCSSテスター (ツイキャス版/YouTube版/Twitch版): カスタムCSSのエラーを確認。 [OBS] とてもシンプルなキャスコメ欄カスタムCSS ブラウザーでツイキャス配信中のアイテム確認当サイトのテキスト・画像の無断転載・複製を固く禁じます。 ®kii-memo-jp 2020 - 2025 and beyond 広告キィーなんだかんだでまだオーストラリアに住んでいます。 Bookmarks

Discord
TwiCall
OBS (Open Broadcaster Software)

📎📎📎📎📎📎📎📎📎📎