[OBS] キャスコメ欄用カスタムCSS: 改行

ツイキャスの「ツール・ゲームズ配信ページ」から入手出来るコメント欄表示用のURLですが、OBSで表示する場合は、URL表示に使うブラウザーソースのプロパティに適切なカスタムCSSを追加する事で、コメント欄の表示スタイルを好みの設定に変更する事が出来ます。

このカスタムCSSで使える改行に関係したCSSコードを２つここにメモしておきます。

[目次]

[参考リンク]

👉📝『ツイキャスのコメント欄を表示 (サムネ付きで)』 その２ - CSS追加

ユーザー情報の折り返し

コメ欄表示用URLのページでは「tw-comment-item-info」クラスのDIVタグ内にユーザー名、ユーザーID^※とサポートランキングの星^※ ( Star 1 、 Star 2 、 Star 3 )といったユーザー情報が表示されるというHTMLタグ構成になっています。

例:

ユーザー名 c:user_ID

ユーザーのコメント

※: 標準設定では、ユーザーIDとサポートランキングの星は非表示になっているので適切なCSS設定をカスタムCSSに追加する必要があります (👉『OBSキャスコメ CSSカスタマイザー』参照)。

標準設定の場合、ランキングの星を表示するIMGタグには「float: right;」というCSSが設定されているので常にユーザー情報の右端に表示されます。又、ユーザー情報を表示する「tw-comment-item-info」クラスのDIVタグは標準設定のCSSによって行の折り返しが無効になっているので、ユーザー名とユーザーの表示幅が長過ぎる場合は末尾が「...」で省略されます。

例: ながーーーいユーザー名の場合 (折り返し無し)

ながーーーーーーーーーーーーーーーーーーーーーーいユーザー名の場合 c:user_ID

ユーザーのコメント

普段はあまり気にしなくても良い事かもしれませんが、折り返しが有効になっていないと全部表示出来ないほど長いユーザー名を設定しているユーザーさんもいない訳ではありません。そういう場合でもユーザー情報をもれなく表示したい場合は、次のCSSをカスタムCSSに追加するとユーザー情報の行で折り返しが有効になります。

.tw-comment-item-info{

white-space: normal;

}

例: ながーーーいユーザー名の場合 (折り返し有)

ながーーーーーーーーーーーーーーーーーーーーーーいユーザー名の場合 c:user_ID

ユーザーのコメント

コメント内の改行の有効化

コメ欄表示用URLのページではコメントは「tw-comment-item-comment」クラスのDIVタグ内に表示されますが、標準設定のCSSでは改行タグ<br />が非表示となっています。なので次の様な複数行からなるアスキーアート(AA)のコメントがされた場合:

例: AAコメント (ショボーン)

〃∩　∧＿∧
⊂⌒（ 　・ω・）
　 ｀ヽ_っ⌒/⌒ｃ
　　　　 ⌒ ⌒

コメ欄表示用URLのページではコメントの改行がされないので、次の様に一行に繋がって表示されます。

例: 改行タグ<br />が無効の場合

〃∩　∧＿∧
⊂⌒（ 　・ω・）
　 ｀ヽ_っ⌒/⌒ｃ
　　　　 ⌒ ⌒

この「1行表示」は、「複数行弾幕」とも言われる、複数行のAAをコメントとして沢山送ってコメント欄を読めなくする行為を防止する場合に使われる設定でもあるみたいですが、そういった事を想定した設定なのでしょうか？

コメントに含まれる改行を有効にしたい場合は、次のCSSをカスタムCSSに追加します。

.tw-comment-item-comment br {

display: block !important;

}

(05/Apr/2021) 追記: 「コメ欄の幅を狭くすると行が途切れてしまう。。」

先日、某SNSで『ツイキャスのコメント欄の表示幅を狭くすると長文のコメントが折り返し表示されずに切れてしまう』といった内容の投稿を見かけたのですが、コメ欄表示用URLのページは標準設定だとコメントが折り返しされるので、どういう事なのか不思議に思い、少し検索してみた処、他にも同様の問題を嘆く投稿がいくつか検索結果に出て来ました。。

でも、これらの投稿をしたアカウントのその後の投稿をサラッと読んでみましたが、特に解決策を見つけたといった内容の投稿は確認できず、ツイキャス以外のサイトで配信しているといった内容の投稿を上げているアカウントがほとんどだったので、行が折り返されない問題は未解決のまま、お蔵入りになってしまったのでは? という印象を受けました。

勝手に考察

上記のSNSの投稿にはどういったカスタムCSSを使っているといった説明が無かったので詳しい設定は不明ですが、ツイキャスのコメ欄表示用URLのページの場合、標準でコメントが折り返される設定になっているので、各個人が追加したカスタムCSSの中に折り返しを無効にしてはみ出した部分を非表示にするCSSルールが含まれている可能性が高いと思います。

思い当たるのは、カスタムCSS内で、コメントを表示するタグの「tw-comment-item-comment」クラスか、そのタグを囲っている親のタグのクラスに、幅が広い要素のはみ出る部分を非表示にする

oveflow: hidden;

というルールが設定されている可能性です。

追加したカスタムCSS内に「oveflow: hidden;」が全く無い場合は別の設定が原因になりますが、いくつかある場合は、対処方として、コメントの表示に関連する部分の「oveflow: hidden;」を削除するか、「oveflow: visible;」に変更すると改善される可能性が高いと思います。

又、CSSを最近いじり始めたばかりで、CSSはあまり良く分からないという方の場合でも、まず、カスタムCSSのコピーを作って、元のカスタムCSSを安全な場所に保存した後、コピーのCSS内にある「oveflow: hidden;」に少しずつ編集を加えて行くと最終的には結果が出るかもしれません。

「overflow: hidden」以外で「overflow-x: hidden」(横方向限定のルール)と設定されている可能性も考えられます。

ツイキャスのコメント欄の構造

ツイキャスのコメ欄表示用URLのページだと各コメントは (19/Aug/2021最終確認):

.tw-comment-item

img.tw-comment-item-icon

IMG
[ユーザーアイコン]

.tw-comment-item-body

.tw-comment-item-info

.tw-comment-item-name-wrapper

.tw-comment-item-name-body

.tw-comment-item-name

ユーザー名;

.tw-comment-item-screen-id

ユーザーID;

.tw-comment-item-star

星

.tw-comment-item-attachment

.tw-comment-item-comment

コメント 👈

.tw-comment-item-date

タイムスタンプ

というHTML構造になっていて、コメントが表示される「tw-comment-item-comment」は　「tw-comment-item」と「tw-comment-item-body」クラスのタグに囲われています。

また、このコメントは次の様なHTMLレイアウトでページ内に表示されています。

body

: :
.tw-page tw-comment-window-page

.tw-player-page__component ...

.tw-comment-list-view ...

.tw-comment-list-view__scroller

<無名のDIV>タグ

ここに上記のコメント構造が下から上へと古いコメントから新しいコメントの順番で縦に並んで表示されます。
: :
.tw-comment-item

コメント 3 ...

.tw-comment-item

コメント 2 ...

.tw-comment-item

コメント 1 ...

なので、コメントが表示されるtw-comment-item-commentクラスのタグと、そのタグを囲っている親タグに関連するCSSル―ルを確認する必要があるかと。。。と書きましたが、「overflow:　hidden;」に関しては「表示を途切れさせたくない」という場合はカスタムCSS内にあるほとんどを削除/変更しても問題ない様にも思えます。

このブログを検索

メモ帳