わんコメ用 ネームプレート付き吹き出し テンプレ 「Hiduki Name Balloon」
- ダウンロード商品通常版 hiduki_name_balloon¥ 0
- ダウンロード商品スリム版 hiduki_name_balloon_slim¥ 0
「わんコメ」で使用できる、ネームプレートが付いた吹き出しのテンプレートになります。 １つのコメントあたりのスペースをゆったりと広めに取るテンプレートですので、コメント頻度ゆっくりめの配信者のかたにおススメのテンプレとなっております。 なお、「通常版」のほかに、縦幅がスリムめで、省スペースな「スリム版(slim)」の2パターンを用意しております。
使い方
ダウンロードしたzipファイルを展開し、「hiduki_name_balloon」（スリム版の場合は「hiduki_name_balloon_slim」）をわんコメのテンプレートフォルダ「templates」に入れて下さい。 その後は、他のテンプレート同様の手順で、OBSに取り込んでご利用ください。
利用規約
再配布はカスタマイズの有無に関わらず、禁止とさせて下さい。
カスタムCSS例
背景色は、標準のテンプレート同様に、CSS変数--lcv-background-colorで設定可能です。 ネームプレート部分は、CSS変数--lcv-name-plate-colorで設定可能です。 OBSのカスタムCSSの例を挙げます。 グラデーションカラー、アルファ値で半透明設定しております。 :root{ --lcv-name-plate-color:linear-gradient(315deg, rgba(36,0,6,1) 0%, rgba(250,0,34,1) 35%, rgba(255,159,167,1) 100%); --lcv-background-color:linear-gradient(315deg, rgba(2,0,36,0.5) 0%, rgba(0,0,250,0.5) 35%, rgba(0,212,255,0.5) 100%); }
カスタムCSS例 ～アニメーション編～
グラデーション設定した背景色をアニメーションで動かしたいとき用のCSS変数を用意しております。 --lcv-comment-body-animation: アニメーションの方向です。ご自身で設定しても良いですが、横方向、縦方向に流すだけでしたら、次の変数が利用できます。 ・横方向に動かすとき --lcv-comment-body-animation: var(--lcv-bg-animation-x) ・縦方向に動かすとき --lcv-comment-body-animation: var(--lcv-bg-animation-y) --lcv-bg-animation-duration:アニメーション開始～完了までの時間を設定します。 --lcv-comment-body-bgsize:背景色画像のサイズになります。詳細は説明は省略します。 ・後述のアニメーション方向で横方向に動かすとき --lcv-comment-body-bgsize:200% 100%; ・縦方向に動かすとき --lcv-comment-body-bgsize:100% 200%; （これまた詳細の説明は省略するのですが、200%のところを400%など大きくするとアニメーションの速度が早くなります。） 説明が長くなりましたが、下記の様に設定すると、グラデーション+アニメーションが設定できます。 :root{ --lcv-comment-shadow: var(--lcv-comment-shadow-2); --lcv-background-color:linear-gradient(90deg, rgba(101,132,255,1) 0%, rgba(255,159,167,1) 100%); --lcv-comment-body-bgsize:400% 100%; --lcv-comment-body-animation:var(--lcv-bg-animation-x); --lcv-bg-animation-duration:3s; }
おまけ機能
OBSの対話機能を開き、対話画面上のコメントが表示されてるあたりをクリックすると「通常版」←→「スリム版」の表示が切り替わります。 配信途中に、「通常版使っていたけど、コメントをスリム版的にたくさん表示したくなったとき」等にお使いください。
修正内容
2023/01/04 : 【修正】縦方向のアニメーションが正常動作しない不具合を修正しました。