OBSキャスコメ CSSカスタマイザー v0.1
『[OBS] ツイキャス コメント欄用CSSのカスタマイズ』のメモで、OBSでツイキャスのコメント欄を表示する時のCSSをカスタマイズするCSSジェネレータ (v.0.0)を公開しましたが、この改良版のバージョン0.1を次のページで公開しています。
新しいバージョンを公開しました:
バージョン0.1
v0.0同様、JavaScriptを使ったジェネレータですが、v0.1ではカスタマイズ出来る項目を増やした事で「CSSカスタム設定」のパネルが比較的縦長になってしまったので、ページを縦にスクロールしても「コメント欄サンプル」(プレビュー)と「ツイキャスコメント欄表示用CSS」は画面内にある程度固定されて表示される様に変更しました。 これで各設定を変更しながら見た目とCSSがどのように変化するかが比較的簡単に確認できると思います。
仕様
バージョン0.1では次の設定が可能になっています。
- ユーザーアイコン(サムネ)の表示/非表示
- スクリーンIDの表示/非表示
- サポートランキングの星(
,
,
)の表示/非表示 - タイムスタンプの表示/非表示
- ユーザーアイコンの上部余白の変更
- 各表示テキストの色と背景色の変更
- 各表示テキストサイズの変更 (ピクセル単位)
- 各表示テキストの左余白幅の変更 (ピクセル単位)
- ユーザー情報の行とコメント行の背景枠の等幅表示の有効化/無効化
- コメント行の折り返しの有効化/無効化
また、「コメント欄サンプル」のプレビュー部分の背景色と背景画像が設定出来る様になっています (👉背景画像と背景色の説明)。
更新遍歴
v0.1b mod-3: () ユーザー名文字色変更用CSS出力のセレクタ名を修正 (⋆うさこ10/5歌みた新作ᙏ *様、ご指摘ありがとうございました)。
v0.1b mod-2: () 背景画像&背景色設定パネルのアクセス修正、CSS出力のセレクタ名からタグ名を削除
v0.1b mod-1: () アイコン幅変更用のCSSの修正 (琴葉とわ様、ご指摘ありがとうございました)。
v0.1b: () a.tw-comment-item-nameの文字色変更用のCSSの修正
v0.1a mod-1: () コメントの文字色の変更が反映されないという指摘をいただいたのでCSSに変更を加えました (うさち🎮様、ご指摘ありがとうございました)。⑤a.tw-comment-item-name用のCSSのセレクターの修正 (div→a)
v0.1a: () アイコンサイズ設定とコメント改行有効オプションの追加
v0.1re: () v0.1のページが消えてしまったのでリメイク
v0.1: () UIレイアウト変更、 文字サイズ変更などの追加 (👉 このメモ)
v0.0d: マイナーアップデート
v0.0: () 初回公開
コメント
コメントを投稿