[OBS] とてもシンプルなキャスコメ欄カスタムCSS
からツイキャスのコメント欄のオーバーレイが、ツイキャスのサイトからコピーする正規のURLを使うとコメントとユーザー名に黒い縁取りが表示される仕様になりました。
コメント欄の背景がコメント文字の色に近い場合はこの黒い縁取りがあることで文字が見易くなる事もあると思いますが、カスタムCSSで設定した文字の色が縁取りの黒色に暗い場合や、後ろにくる背景画に暗い色の要素が全く含まれていない場合だと、文字の「黒い」縁取りの存在がとても残念に思える場合があると思います。
今回は文字の縁取りの色を変えただけのシンプルなカスタムCSSを作ってみました。。。 でも、それだけだとつまらないので、設定でプラスでユーザーアイコンやタイムスタンプも表示出来る仕様になっています。
OBSでツイキャスのコメント欄を設定する方法や、下に説明するCSSをOBSに読み込ませる方法については、先に別のメモ「📝ツイキャスのコメント欄を表示 (サムネ付きで)」を参照して下さい。
下の設定で各パーツの表示/非表示の変更ができます。
コメント欄の文字の縁取りの色を変更するだけでもコメント欄がかなり映えると思いますがどうでしょう・・。
現在使っている既存のカスタムCSSに文字の縁取りの色を変えるCSS設定を追加したい場合は、別のメモにある次の追記を参考にしてみて下さい:
カスタムCSS
/* Noto Sansフォントの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&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/2022/04/simple-custom-css.html
*/
body {
font-family: 'Noto Sans JP', sans-serif, 'Noto Color Emoji'; /* フォント設定 */
}
.tw-comment-item-comment br {
display: block !important; /* コメント内の改行の有効化 */
}
body .tw-comment-item-body {
text-shadow:none !important; /* テキストの影を無効化 */
}
/* 文字の影 */
.tw-comment-item-name,
.tw-comment-item-comment {
text-shadow: -2px -2px 0 #111, -1px -2px 0 #111, 0 -2px 0 #111, 1px -2px 0 #111, 2px -2px 0 #111, -2px -1px 0 #111, -1px -1px 0 #111, 0 -1px 0 #111, 1px -1px 0 #111, 2px -1px 0 #111, -2px 0 0 #111, -1px 0 0 #111, 0 0 0 #111, 1px 0 0 #111, 2px 0 0 #111, -2px 1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 1px 1px 0 #111, 2px 1px 0 #111, -2px 2px 0 #111, -1px 2px 0 #111, 0 2px 0 #111, 1px 2px 0 #111, 2px 2px 0 #111 !important;
}
/* アイコン */
.tw-comment-item-icon {
display: unset !important;
}
/* ユーザー名 */
.tw-comment-item-name {
display: none; /* ユーザー名を非表示 */
fontsize: 10px;
}
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: #ffffff !important;
}
/* ユーザーID */
.tw-comment-item-screen-id {
display: unset !important;
color: #8d9296;
}
/* サポートの星 */
.tw-comment-item-star {
display: unset !important;
}
/* コメント */
.tw-comment-item-comment {
font-size: 16px !important;
color: #ffffff !important;
}
.tw-comment-item-comment-hash {
white-space: nowrap;
}
.tw-comment-item-comment-hash-icon {
stroke: #111;
stroke-width: 4px;
}
/* タイムスタンプ */
.tw-comment-item-date {
display: block !important;
color: #8d9296;
margin-top: 0;
}
コメント欄サンプル
次👇は配色を確認する為のサンプル表示になります。 (サンプルの次にある設定を変更するとサンプルの表示が更新されます。)
ツイキャス サンプル コメント2、
ツイキャス サンプル コメント2
設定
設定変更後は「コメント欄サンプル」でどの様に表示されるかを確認できます。
👈左のボックスをクリックして縁取りの色を変更出来ます。
今後の改善点
- もしも需要があれば文字の色を設定するオプションを設定に追加しても良いかと思うのですが、需要ありますかね？
👉[ 公開]『そこまでシンプルでもないキャスコメ欄カスタムCSS』:
ユーザー名とコメント文字以外の文字サイズやアイコンの大きさが調節できる他、フォントもカスタマイズ出来ます。
例
更新履歴
| [] | カスタムCSSの設定でサンプルの色をドラッグして文字の色ドロップする事で色を設定できる仕様に変更。 |
| [] | オンツイタグのアイコンに縁取り色の追加。 |
| [] | Noto Color Emojiフォント設定が反映されなかった不都合を修正。 |
| [] | Noto Sans JPとNoto Color Emojiフォントを使う仕様に変更。 |
| [] | 文字の縁取りの色に薄い色が選択された場合、文字の色が既定値ままの白だと見難いので、文字の色を変更できる仕様にしました。 ユーザー名とコメントの各々の文字の既定サイズをオーバーレイURL中に「style=2」が指定された場合の規定値となる「10px」と「16px」に変更。 |
| [] | コメントの文字サイズのCSSを修正。 |
| [] | 公開日 |
OBS ツイキャス用カスタムCSS
コメント欄設定時のメモ
当サイトで公開しているカスタムCSSを、ツイキャスの配信中にコメント欄を表示する目的で使う場合は問題ありませんが、コードの一部又は全体をそのままコピーして、まるで自分が作ったかの様に他のサイトで公開/配布する事はくれぐれも控えて下さい。
当サイトのテキスト・画像の無断転載・複製を固く禁じます。 (https://kii-memo.blogspot.com/ & https://kii-memo.blog.jp)
コメント
コメントを投稿