キャスコメカスタムCSS まとめ (メモ帳 & kii-memo-dev)
『メモ帳』と『kii-memo-dev』で公開しているツイキャスコメント欄オーバーレイ用カスタムCSS (略して「キャスコメカスタム」) と関連メモをこのページにリストしています。
#キャスコメカスタム
１．設定メモ
- 📝ツイキャスのコメント欄を表示 (サムネ付きで): OBSでコメント欄を設定する方法
- 📝「配信ツール向けオーバーレイ」のURLを探せ??: コメント欄表示に必要なURL
- 文字に付く黒い影: 黒い影を無効にする方法と影の色を変更する方法
- コメント欄がぼやける時の注意点
- その１ 📝気になる配信画面のぼやけ: 解像度編 (スケーリング)
- その２ 📝気になるコメント欄のぼやけ: シーン上の変換
２．キャスコメカスタム
マウスでポチポチしてカスタマイズが出来るカスタムCSS各種 (ツイキャスのコメント欄オーバーレイ用)
L◯NEの会話画面風
- シンプル版
- x４(アイコンサイズ変更可)バージョン:
吹き出しの背景色や、文字色、アイコンサイズなどが変更可能。 - 幅細めバージョン:
x4バージョンを狭い幅で表示したい時用 - 『コメ欄』用 L◯NE風カスタムCSS:
吹き出しの根本部分の再現度が少し向上 (別サイト:kii-memo-devより)
マシュマロ風
- マシュマ〇風のツイキャスコメ欄カスタムCSS
- ハロウイン仕様マシュマ🎃風: マシュマロの目が光ります。
ツイキャスコメ欄用マシュマ🎃風カスタムCSS
←左が🎃ハロウイン仕様、右がノーマル版になります→
縁取りの色を変えるだけの
- とてもシンプルなキャスコメ欄オーバーレイ用カスタムCSS:
文字の縁取りの色を変えるだけのカスタムCSS - そこまでシンプルでもないキャスコメ欄カスタムCSS:
文字の縁取りの色を変えるだけではないカスタムCSS
３．カスタムCSS関連のメモ
カスタムCSSを個人でいじりたい時に使えるメモ。 ほとんどがツイキャスのコメントオーバーレイ用のメモになりますが、CSSセレクターを変更すれば他のオーバーレイにも流用出来る場合もあります。
- ユーザーアイコン (サムネ) のカスタマイズ
- 改行: コメント中の改行を有効化
- ツイキャスのコメント欄のHTML構造
- フォントの変更
- コメントのフェードイン + フェードアウトのアドオンCSS: 既存のコメント欄オーバーレイのカスタムCSSに付け加える事で、新しいコメントがフェードイン & 最大表示数を超えたコメントがフェードアウトといったアニメーション効果を可能にします。
- コメントを逆の順番で表示 (別サイト:kii-memo-devより): 既存のカスタムCSSに付け加えてコメント表示の順番を上下逆にするアドオンCSS。ツイキャス用とYouTube用があります。
４．カスタムCSS関連のアプリ by kii-memo
カスタムCSS関連のツールも開発・公開しているのでここに:
ブラウザ拡張機能
-
キャスコメCSSテスター: Chrome系のPCブラウザで手持ちのカスタムCSSを読み込んでツイキャスのコメント欄オーバーレイを表示出来るので、ブラウザの開発ツールを使ってカスタムCSSのエラーチェックが出来る他、カスタムCSSを変更した場合のプレビューチェックが簡単に出来ます。 (CSSをいじれる上級者向け)
他のブラウザ拡張機能は 👉『ブラウザ拡張機能 by kii-memo』
スマホアプリ
-
ツイキャス専門店『コメ欄』✚: 画面配信/画面録画向けのコンテンツコンポーザーで、デバイスの画面に、コメント欄のURLを使ってCSSでカスタマイズしたコメント欄や、画像やテキストを配置して表示したりしてコンテンツ制作を支援します。 動く背景動画にも対応しています。
(配信にはスクリーン配信を使う必要があります。)
コメント