メモ帳

ツイキャス 、 YouTube と Twitch のライブ配信のコメント欄は、 オーバーレイ としてOBSなどの配信ツール上で表示できるほか、専用のカスタムCSSを使ってコメント欄のデザインをカスタマイズする事もできます。 検索で見つけたサイトからコピーしたカスタムCSSや、自分で編集したカスタムCSSを試したい場合、実際にOBSのブラウザソースにオーバーレイとCSSを読み込ませて表示するのが普通かもしれませんが、カスタムCSSの設定をブラウザソース上で更新するのが少し面倒なのと、CSSにエラーがあってもOBSのプラウザソースでそのエラーを確認するには少し面倒な設定が必要になります。 なので、各サイトのコメント欄オーバーレイ用のカスタムCSSを、一般的なブラウザ上で表示できる カスタムCSSテスター を拡張機能として作ってみました。 現在、Chromeウェブストアで ツイキャス 、 YouTube と Twitch 用の三種のカスタムCSSテスターを拡張機能として公開しています: キャスコメカスタムCSSテスター 👉 サポートページ チューブコメカスタムCSSテスター 👉 サポートページ TwitchコメカスタムCSSテスター 👉 サポートページ これらのカスタムCSSテスターを使うと、手持ちのカスタムCSSを実際のコメント欄のオーバーレイのURLと一緒に読み込んで、どの様に表示されるかをブラウザで確認出来るほか、ブラウザの開発者ツールを使ってCSSのエラーを確認する事も出来ます。 このメモでは、各カスタムCSSテスターの使い方よりも、オーバーレイをブラウザで読み込んだ際にカスタムCSSのエラーをブラウザの開発者ツールでどのように確認出来るかを説明しているので、上記のカスタムCSSテスターの使い方については各拡張機能のサポートペー...

以前公開した「 とてもシンプルなキャスコメ欄カスタムCSS 」のもう少しカスタマイズが出来るカスタムCSSを作ってみました。 これまで設定出来た文字の縁取りの色だけでなく、 コメント以外の文字サイズや、 フォントの種類、 太文字とイタリックの選択、 ユーザーアイコンの大きさ も変更出来る仕様になっています。 OBSでツイキャスのコメント欄を設定する方法や、下に説明するCSSをOBSに読み込ませる方法については、先に別のメモ 「📝 ツイキャスのコメント欄を表示 (サムネ付きで) 」 を参照して下さい。 [ 目次 ] カスタムCSS コメント欄サンプル 設定 今後の改善点 (??) 更新履歴 👉 📝 キャスコメカスタムCSS まとめ カスタム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/2023/01/not-so-simple-custom-css.html */ body { /* フォント設定 */ font-family: 'Hiragino Kaku Gothic ProN','Hiragino...

10月31日 はハロウインですが、今回はハロウイン仕様の マシュマ🎃風のカスタムCSS を作ってみました。 右がノーマル版になります→。 ←左がハロウイン仕様、 右がノーマル版になります→。 マシュマロの目が光ります。 [ 目次 ] 質問箱風カスタムCSS 解説 表示されるコメントの数 表示幅の調節 👉 📝 キャスコメカスタムCSS まとめ ノーマルのマシュマ〇風はこちら: 👉 マシュマ〇風のツイキャスコメ欄カスタムCSS OBSでツイキャスのコメント欄を設定する方法や、下に説明するCSSをOBSに読み込ませる方法については、先に別のメモ「📝 ツイキャスのコメント欄を表示 (サムネ付きで) 」を参照してみてください。 更新履歴 [ 15/Dec/2022 ] : オンツイタグ追加に伴うCSSの変更。 [ 21/Oct/2022 ] : フォント設定が閲覧コメントだけでなく全体に反映される仕様に変更。 [ 02/Oct/2022 ] : 設定の既定値として文字が太文字になる仕様に変更。 [ 28/Sep/2022 ] : 一般公開。 マシュマ🎃風カスタムCSS (ツイキャス用) 次のカスタムCSSの枠の右下にある、 「CSSをクリップボードにコピー」ボタン をクリックするとカスタムCSSがクリップボードにコピーされるので、OBSのブラウザソースのプロパティにある「カスタムCSS」にそのままペースト出来ます。 /* Googleフォントの読み込み */ @import url("https://fonts.googleapis.com/css2?family= Yomogi &display=swap"); /* 絵文字フォントの読み込み */ @font-face {...

ツイキャスのコメント欄用 マ〇ュマロ風カスタムCSS このサイトのメモで「 質〇箱風カスタムCSS 」を公開していますが、今回は マシュマ〇風のカスタムCSS を作ってみました。 [目次] 質問箱風カスタムCSS 解説 表示されるコメントの数 表示幅の調節 👉 📝 キャスコメカスタムCSS まとめ OBSでツイキャスのコメント欄を設定する方法や、下に説明するCSSをOBSに読み込ませる方法については、先に別のメモ「📝 ツイキャスのコメント欄を表示 (サムネ付きで) 」を参照してみてください。 ハロウイン仕様 のマシュマ🎃風はこちら: 👉 ハロウイン仕様マシュマ🎃風のツイキャスコメ欄カスタムCSS 更新履歴 [ 14/Dec/2022 ] : オンツイタグ追加に伴うCSSの変更。 [ 21/Oct/2022 ] : フォント設定が閲覧コメントだけでなく全体に反映される仕様に変更。 [ 27/Sep/2022 ] : 閲覧コメントの文字サイズ、太文字、イタリックを変更出来る様にしました。 設定で選択したGoogleフォントが表示されなかった不都合を修正。 [ 01/Sep/2022 ] : アイコンの大きさを変更 (2em x 2em)。 [ 30/Aug/2022 ] : 一般公開 マシュマ〇風カスタムCSS (ツイキャス用) 次のカスタムCSSの枠の右下にある、 「CSSをクリップボードにコピー」ボタン をクリックするとカスタムCSSがクリップボードにコピーされるので、OBSのブラウザソースのプロパティにある「カスタムCSS」にそのままペーストする事が出来ます。 /* Googleフォントの読み込み */ @import url("https://fon...