[OBS] 質〇箱風のツイキャスコメ欄カスタムCSS

ツイキャスのコメント欄用
質問箱風カスタムCSS

ツイッターとかインスタなどで、匿名で質問をする＆質問を受け取れるサービスの「質問箱」を使っているアカウントをチラホラ見かけますが、この質問箱の見た目をOBSのブラウザソースで表示するツイキャスのコメント欄でどこまで再現できるかを試す為にカスタムCSSを作ってみました。。

閲覧コメントの高さが割とあるので、秒当たりのコメント数が多い枠だとコメントが直ぐ画面外に流れてしまうので、縦長画面配信枠とか、過疎枠用かもしれません❓❓ｗ
(※ 別に過疎枠専用という意味でもありません・・読まれるまでコメントを自粛してくれる優良閲覧さんが沢山いる枠でも十分使えるカスタムCSSのはずです😇😇)

[目次]

今後の改善点

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

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

更新履歴

[15/Dec/2022]: オンツイタグ追加に伴うCSSの変更。コメント文字の大きさの設定が反映されなかった不都合を修正。

[21/Oct/2022]: Noto Color Emojiフォント設定が反映されなかった不都合を修正。

[27/Sep/2022]: style=2のURLで追加される影を無効化。リプコメも質問コメントとして表示される様に修正。閲覧コメントの文字サイズ、太文字、イタリックを変更出来る様にしました。設定で選択したGoogleフォントが表示されなかった不都合を修正。

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

[13/Feb/2022]: 設定で選択したフォントが数字の表示に使われる様にフォントスタック内の絵文字フォントの順番を修正。

[10/Feb/2022]: CSSフォント使用時のCSSに絵文字フォントの追加。

[05/Oct/2021]: ツイキャスのツール配信ページからコピーする正しい『通信ツール向けオーバーレイ』のURLを使っていない場合でも枠主のアイコンが表示される様に変更。

[31/Aug/2021]: コメント部の標準の高さを変更出来る仕様に変更。コメント部のフォントを選択肢から指定出来る仕様に変更。コメント欄サンプル表示の追加。

[24/Aug/2021]: 質問表示部にGoogleフォントを「Yomogi」丸文字フォントに指定する仕様に変更。 (👉解説「丸文字フォントを指定」参照)

質問箱風カスタムCSS (ツイキャス用)

次のカスタムCSSの枠の右下にある、「CSSをクリップボードにコピー」ボタンをクリックするとカスタムCSSがクリップボードにコピーされるので、OBSのブラウザソースのプロパティにある「カスタムCSS」にそのままペーストする事が出来ます。

/* Googleフォントの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Yomogi&display=swap");
/* 絵文字フォントの読み込み */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

/*
  Generated by 質〇箱風キャスコメカスタムCSS (ツイキャス用)
  url: https://kii-memo.blogspot.com/2021/08/Qbox-like-custom-css.html
*/

.tw-comment-item-comment br {
  display: block !important; /* コメント内の改行の有効化 */
}

/* style=2のURLで追加される影を上書き */
.tw-comment-item[data-type=other] .tw-comment-item-comment,
.tw-comment-item[data-type=mention] .tw-comment-item-comment {
  text-shadow: none !important;
}

/* ページ設定 */
::-webkit-scrollbar {
  height: 0; /* 横スクロールバーを表示させない */
}
.tw-comment-window-page {
  min-width: 220px;
}
 
body {
  font-family: 'Yomogi', cursive, 'Noto Color Emoji'; /* Webフォントを指定 */
}

/* 閲覧のコメント設定 */
.tw-comment-item[data-type=other] .tw-comment-item-body,
.tw-comment-item[data-type=mention] .tw-comment-item-body {
  background-color: #5EB9BA !important; /* 閲覧コメントの背景色 */
  margin-bottom: 1em; margin-top: 0.5em;
  padding:1em !important;
}

.tw-comment-item[data-type=other] .tw-comment-item-name,
.tw-comment-item[data-type=mention] .tw-comment-item-name {
  display: none; /* ユーザー名の非表示 */
}

body .tw-comment-item-comment {
  font-size: 12px !important; /* 文字サイズ */
}

.tw-comment-item[data-type=other] .tw-comment-item-comment,
.tw-comment-item[data-type=mention] .tw-comment-item-comment {
  background-color: #FFFFFF !important; /* コメント部の背景色(白) */
  color: black; /* コメント部の文字色(黒) */
  text-shadow: none; /* テキストの影を無効化 */
  border-radius: 1em;
  min-height: 6em;
  /* 文字をコメント部の縦横の中央に配置 */
  display: flex !important;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  /* コメント部の装飾枠の幅 */
  padding: 2em !important;
  margin-bottom: 1em !important;
}
.tw-comment-item-comment-hash {
  font-size: 12px;
}
.tw-comment-item-comment-hash-icon {
  height: 12px;
  width: 12px;
}

.tw-comment-item[data-type=other] .tw-comment-item-date::before,
.tw-comment-item[data-type=mention] .tw-comment-item-date::before {
  /* 箱アイコンを追加 */
  content: "\1F4E6";  /* 絵文字: パッケージ(ユニコード) */
  background-color: white;
  border-radius: 1em;
  font-size: 1.6em;
  padding-left:1px;
  padding-right:1px;
  margin-right: 0.5em; /* タイムスタンプとの間 */
}
.tw-comment-item[data-type=other] .tw-comment-item-date,
.tw-comment-item[data-type=mention] .tw-comment-item-date {
  display: unset !important; /* タイムスタンプの表示 */
  font-size: 1em;
  color: white;
  text-shadow: none; /* テキストの影を無効化 */
}

/* 枠主のコメント設定 */
.tw-comment-item[data-type=you] .tw-comment-item-icon,
.tw-comment-item[data-type=owner] .tw-comment-item-icon {
  display: unset;  /* ユーザーアイコンの表示 */
}

#キャスコメカスタム

コメント部の高さ (標準値):
em

CSSフォント:

閲覧コメント

文字サイズ: px

B I

コメント欄サンプル

[注] OBS上では表示が多少異なる可能性があります。

ユーザー名1

質問箱風カスタムCSSプレビュー
フォント表示例: ABCDE12345あいうえおアイウエオ

ユーザー名2

ツイキャスサンプルコメント

解説

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

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

今回のカスタムCSSでは、閲覧コメントの表示がが質○箱の匿名質問風になる様になっています。

「tw-comment-item」クラスに設定されている「data-type」というアトリビュート(属性)の値を元に閲覧コメントか枠主コメントかを区別していますが、内容は別のメモ📝での説明と重なってしまうので、詳しくは次を参照してください:

👉L◯NEの会話画面風のツイキャスコメ欄カスタムCSS: 閲覧さんのコメント vs 枠主のコメントの区別

２. コメントを中央に表示

コメントは「tw-comment-item-comment」クラスのDIVタグ内で表示されますが、閲覧側のDIVタグ内で「display: flex;」を設定してタグ内の要素が中央に配置される様にしています。

.tw-comment-item[data-type="other"] .tw-comment-item-comment {
    :   :   :
  /* 文字をコメント部の縦横の中央に配置 */
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
    :   :   :
}

「display: flex;」が設定されている場合、タグ内の要素は「justify-content: center;」で横方向に中央寄せの配置、「align-items: center;」で縦方向の中央寄せの配置が有効になります。

「text-align: center;」は、同タグ内の文字の表示を中央寄せにする設定になります。

３. 丸文字フォントを指定 (フォントの変更)

質問箱だと質問は丸文字フォントで表示されるので、コメント欄でもCSSで丸文字フォントを設定したいと思っていましたが、単にCSSの「font-family」プロパティでフォントを指定するだけだと、表示出来るフォントはOBSのブラウザが対応していて、しかもパソコンにインストールされているフォントでないと表示されない様です。

でも、CSS3.0でサポートされるWebフォントであればCSSの「@import」ルールを使ってネット公開されているWebフォントであればCSSとして読み込んで使う事が出来ます。

#カスタムCSSでコメント欄のフォントの変更

上のカスタムCSSでは「Googleフォント」に登録されている「Yomogi」フォント^※をCSSの開始行で次の様に読み込んでいます。

/* Googleフォント Yomogiの読み込み */
@import url("https://fonts.googleapis.com/css?family=Yomogi&display=swap");

この後に閲覧側のコメントの「tw-comment-item-comment」クラスのセレクターで「font-family」プロパティを「Yomogi」に指定しています。

.tw-comment-item[data-type="other"] .tw-comment-item-comment {
    :   :   :
  font-family: "Yomogi", cursive; /* Googleフォントを指定 */
    :   :   :

現時点(24/Aug/2021確認)で「Googleフォント」には1094ものフォントが登録されていましたが、日本語として分類されているフォントは31となっていました。この中で「Yomogi」フォントが質問箱の丸文字に近く見えたのでこのフォントを使いましたが、今後、新しいフォントが登録されたりもすると思うので、Googleフォント上の別のフォントを使いたい場合は、個人でカスタムCSS内にあるフォント名の「Yomogi」の部分を使いたいフォントの名前に変更してみて下さい。

※: YomogiフォントはGoogleフォントにてOpen Fontライセンスで公開されているのでコメント欄に表示して使う分には問題が無いと思いますが、フォントによっては使用方法に制限のあるフォントもあるかもしれないので、フォントを使う前に各フォントのライセンスを確認する事をお勧めします。

参考リンク

Google Fonts APIの仕様書 (英文)

今後の改善点 (??)

次に今回のCSSで再現しきれなかった部分をリストしておきます。

このカスタムCSSを適用したコメントの表示が匿名になるだけで、他のツイキャスのコメント欄で、特にCSSをいじってない場合はコメントの上にユーザー名が表示されます。😇😇 (読み上げ機能でもユーザー名は匿名化されません。)
[追記 16/Sep/2021]: ツイキャスの新機能で匿名コメントを受け取れる設定が追加されたのでこれを有効にすると閲覧側で匿名コメントを入力する事が可能になるみたいです。。(👇公式のツイート)
質問の文字制限はツイキャスのコメント欄の制限になり、質●箱のNGワード設定なども再現されていません。
本家だと質問の下に表示される本家サイトのURLは貼り付けたら怒られると思ったのでタイムスタンプを表示しています。
質問のフォントを丸文字表示にしたかったのですが、各パソコンにインストールされている丸字フォントに依存するのと、WindowsやmacOSといったOSの種類でも設定が変わってくるので~~現在時点では保留となっています。~~ ... Webフォントを読み込む仕様に変更しました。

匿名コメント設定に関するツイキャス公式のツイート (16/Sep/2021)

【お知らせ】
配信中に匿名でコメントを送れるようになりました。
匿名コメントを受け取りたい配信者は、ライブの設定から許可してください。

詳しくは以下のヘルプをご参照くださいhttps://t.co/Pk4mGV4QEH pic.twitter.com/Obx7g3Z3zq
— ツイキャス公式 (@twitcasting_jp) September 16, 2021

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

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

シンプル版
x４(アイコンサイズ変更可)バージョン: アイコンサイズ64x64バージョン
幅細めバージョン: 狭い幅で表示したい時用
『コメ欄』用カスタムCSS: 吹き出しに枠線や影を付ける事が出来るバージョン

質○箱風: 「質○箱風のツイキャスコメ欄カスタムCSS」(このメモ)
マシュマ〇風:

ツイ〇ター風:「ツイ〇ター風のツイキャスコメ欄カスタムCSS」
OBSキャスコメ CSSカスタマイザー

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

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

このブログを検索

メモ帳