記事一覧へ戻る

かってに改造その①『STT/RTT』


更新日時:18日前 投稿日時:2020-3-17 00:37:41 Author:shikask



 

使い方

このCSSは『ブラウザソース→翻訳システム→STT及びRTT』に対応しています。
OBSのブラウザソース下部にあるカスタムCSSへコピー&ペーストで追加してください。
トラブル防止のため、最初から入力してあるbody~は削除せず、改行後に入力してください。

さらなる改変もご自由にどうぞ。質問等は受け付けておりません。「css 吹き出し 色 変える」等で検索してみてね。
壊滅的な問題が発生した場合は、お手数ですがshikaskまで直接お問い合わせ願います。


 

吹き出し

 

半透明/白




#text_area { min-height: 60px; min-width: 300px; margin: 40px; background: rgba(236,240,241,0.5); border-radius: 10px; position: relative; padding: 10px 10px 20px; color: #FFFFFF; display: inline-block; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 5px 5px rgba(0, 0, 0, 0.06); } #text_area:after { border: 10px solid transparent; border-right-color: rgba(236,240,241,0.5); border-left-width: 0; width: 0; left: -10px; top: 40px; content:""; display: block; position: absolute; }


 

半透明/黒




#text_area { min-height: 60px; min-width: 300px; margin: 40px; background: rgba(32,32,32,0.5); border-radius: 10px; position: relative; padding: 10px 10px 20px; color: #FFFFFF; display: inline-block; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 5px 5px rgba(0, 0, 0, 0.06); } #text_area:after{ border: 10px solid transparent; border-right-color: rgba(32,32,32,0.5); border-left-width: 0; width: 0; left: -10px; top: 40px; content:""; display: block; position: absolute; }


 

枠線/白背景



 
#text_area { border-radius:6px; margin: 40px; color: #19283C; position: relative; display: inline-block; padding:0px 6px 30px; min-width: 300px; min-height:60px; background: #F6F6F6; border: 3px solid #19283C; z-index: 0; } #text_area:before { content: ""; position: absolute; top: -8px; left: 30%; margin-left: -9px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent #F6F6F6 transparent; z-index: 0; } #text_area:after { content: ""; position: absolute; top: -12px; left: 30%; margin-left: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #19283C transparent; z-index: -1; }



 

白文字ぼかし影/色マーカー風




これらはOBSのブラウザソースではなくMSJPの翻訳システムに直接挿入してください。

認識文字-白文字+影
filter: drop-shadow(0px 0px 1px #000000); font-size:17px; font-weight:500; line-height:1.2; margin:20px 5px -10px 10px;

翻訳文字-マーカー
font-size:20px; line-height:1.0; padding:5px 10px; margin:15px 10px -10px 10px; position: relative; display: inline-block; background: rgba(26,188,156,0.7);


 

MSJPサイト内のSubTitle Optionから体裁を整える例

認識文字
font-size:24px; font-weight:600; line-height:1.2; margin:20px 5px -10px 10px;

翻訳文字
font-size:20px; font-weight:bold; line-height:1.2; margin:14px 20px -10px 10px;

コメント一覧: