[Chrome拡張機能] TwitchコメカスタムCSSテスター (TwitchコメCSSテスター)
配信サイトのコメント欄オーバーレイ用のカスタムCSSを、PCのブラウザを使ってテスト出来るブラウザ拡張機能のTwich版を作ってみました。
この拡張機能を使う事で、Twitchのコメント欄にカスタムCSSを読み込ませてWebブラウザに直接表示出来る様になるので、カスタムCSSを変更するごとに毎回OBSのブラウザソースに読み込ませて確認する必要が無くなります。
また、コメント欄を表示した後も、拡張機能のポップアップでカスタムCSSを修正出来るほか、ブラウザの「開発者ツール」を開く事で読み込まれたカスタムCSSのエラー確認も簡単に出来る様になります。
[目次]
テスト用カスタムCSS
ブラウザへインストール
Chromeウェブストアで拡張機能として公開されているので、ストアの
のページで、Chromeを始めとするEdge、OpearaやBraveといった、Chromium系のブラウザに追加して使う事が出来ます。
拡張機能の追加方法が確かでない方は次のメモ内にあるリンクの説明を参考にしてみて下さい。
主な機能と使い方
１. オプションページ
『TwitchコメカスタムCSSテスター』のアイコンをブラウザのツールバーに固定している場合は、ブラウザのツールバーに表示されている
アイコンをクリックするとオプションページが表示されます。
(コメント欄が表示されている場合はポップアップが代わりに開きます。)
『TwitchコメカスタムCSSテスター』のオプションページは次の様なレイアウトになっています。
おおまかな流れとしては、他のカスタムCSSと同様に、このオプションページで:
- 「コメント欄URL」 で表示したいTwtichのチャットオーバーレイ、
- 「カスタムCSS」 でカスタムCSS
を指定した後 (値を変更した際は保存する必要があります)、オプションページの中央、右側にある ボタンをクリックすると、カスタマイズされたTwitchのコメント欄が、新しく開くタブに表示されます。
b. コメント欄URL
コメント欄のURLを複数登録してポップアップメニューで選択する事が出来ます。
- 見出しの「コメント欄URL:」の下にある入力欄の:
- 「ユーザーID」に、表示したいコメント欄のTwithユーザーのIDを入力するか、
- 「URLを指定」に、TwitchのライブページからポップアップしたTwitchのコメント欄のURLを入力。
- 右端にある ボタンをクリックして設定を保存します。
コメント欄URLは複数の設定の保存が可能になっています。
インストール時は無名の設定が一つ保存されていて、次の例にある様に、見出し横の緑色の部分に「(無名)」と表示されます。
緑の部分がドロップダウンボタンになっているので、クリックすると登録されている設定の名前が下にリストされて、又、リスト編集用のボタン各種 (名前変更/削除/新規追加)が右にツールバーとして表示されます。
- 下に表示されたリストから表示したい設定の設定名を見つけてクリックするか、
- 右のリスト編集用のボタンから、選択されている設定名への編集動作を1つ選んでクリックします。
リスト編集用のボタンを選択した場合はボタンの表示から編集用の表示に切り替わります。
 |
| 例:「名前変更」ボタン選択時 |
※: 緑のドロップダウンボタンをクリックして開くドロップダウンリストとツールバーはマウスポインターが離れると閉じる設定になっているので、開いてもすぐ閉じてしまう場合は、マウスをゆっくりと動かしてみて下さい。
c. 背景色を上書きする
チェックボックスを選択✅して有効にするとオーバーレイを表示した際に背景色が横のカラーボックスで指定した色で上書きされます。
bodyタグの背景色属性を指定して(body {background-color: #指定した色;})背景色を変更しているので、同じbodyタグを使って背景を設定しているカスタムCSSを読み込んだ場合は背景が正しく表示されない場合もあるので、その場合はチェックを外してこの機能を無効にしてください。
あくまでも一時的に背景色を変更する機能なので、入力したカスタムCSSをOBSのブラウザソースで使っても背景色が変わってしまう事はありません。
d.「オーバーレイを開く」ボタン
「配信ツール向けオーバーレイ」と「カスタムCSS」を設定した後、ページ右上の ボタンをクリックすると、同じブラウザ上で新しいタブが開いてカスタムされたTwitchのコメント欄が表示されます。
注: コメント欄URLに入力されたURLが拡張機能によって正しく認識されない場合は、「オーバーレイを開く」ボタンは無効になるのでクリックする事は出来ません。
この方法で新しく開いたタブに表示されるコメント欄には既定値としてオプションページで保存されているカスタムCSSが読み込まれますが、この後にオプションページのカスタムCSSを変更しても既に表示されているコメント欄にはオプションページでの変更は反映されません。
オプションページで変更したカスタムCSSを確認したい場合は、新たにオーバーレイを開く必要があります。
e. カスタムCSS
- オプションページ内の「カスタムCSS」の下の欄にテストしたいカスタムCSSを入力。
(この欄でCSSを編集するよりは、Windowsなら「メモ帳」といった、テキストエディタで編集したCSSをペーストする事をお勧めします。) - 右にある ボタンをクリックして保存します。
テストに使いたいカスタムCSSが必要な場合は、別サイトで公開中の
👉Twitchコメント欄向けカスタムCSSカスタマイザー (試作)
を使ってみて下さい。
プレビューを確認しながら設定を変えてコメント欄のカスタマイズが出来ます。
２. ポップアップ
Twitchのコメント欄を表示している時にツールバーにある拡張機能のTwitchコメカスタムCSSテスターのアイコンアイコンをクリックするとポップアップが表示されます。 (コメント欄が表示されていない場合はオプションページが開きます。)
ポップアップでは、表示されているタブのコメント欄に既に読み込んでいる「カスタムCSS」を確認出来る他、このCSSを変更して、ページ内にある ボタンをクリックすると表示中のコメント欄のカスタムCSSが更新されます。
ポップアップ内に表示されるカスタムCSSは初めは既定値としてオプションページで保存されたカスタムCSSですが、ポップアップで更新した内容は表示しているコメント欄だけで有効で、変更が別のタブに表示されているコメント欄に反映されたり、オプションページのカスタムCSSに保存される事はありません。
３. 開発者ツール
ブラウザの開発者ツールを使うと、読み込まれているカスタムCSSのエラーを確認したり、一時的な変更を加えて表示を確認したりする事が出来ます。
「F12」キーを押すと開発者ツールが表示されるブラウザが多いと思いますが、使っているブラウザ(PC版)によって操作方法が少し違うので詳しい説明は避けておきます。
開発者ツールの大まかな使い方としては、📝「キャスコメカスタムCSSテスター」のサポートページにある「開発者ツール」の説明を参考にしてみて下さい。
ブラウザの開発者ツールを使うと次の様な事を確認する事が出来ます。
- 指定したCSSが実施に有効になっているか、別のCSS設定によって無効になっているかどうか。
- 指定したCSSの書式の間違い
- 実際にページに表示されたHTML要素にどのCSS設定が有効になっているか。
- 実際にページに表示されたHTML要素のCSSプロパティ値
更新履歴
| Chrome 拡張機能 | 更新内容 |
|---|---|
| v0.0.3 () |
日本語名を「ツイッチコメカスタムCSSテスター」から「TwitchコメカスタムCSSテスター」に変更。 (この拡張機能の英語名は「Twitch Chant Comments Overlay Custom CSS Tester」です。) |
| v0.0.2 () |
|
| v0.0.1 () |
初回リリース。 |
関連ページ
- キャスコメカスタムCSSテスター サポートページ
- チューブコメカスタムCSSテスター サポートページ
- TwitchコメカスタムCSSテスター サポートページ (このページ)
- ブラウザー拡張機能 by kii-memo まとめ
コメント
コメントを投稿