立ち絵：複数・光彩

https://scrapbox.io/files/6396d04405b1fe001d472997.mp4

OBSの設定

table:obsの設定

ソースの種類 ブラウザ

URL Discord streamkit overlayのURL

よこ 1920

たて 1080

code:css

:root {

/** 画像のよこ幅 */

--image-width: 200px;

/** 画像のたて幅 */

--image-height: 200px;

/** 画像の角の丸み */

--image-radius: 8%;

/** 光彩の幅 */

--light-scale: 40px;

/** 光彩の色 */

/** 喋っていないときの暗さ */

--not-speak-brightness: brightness(100%);

/** 喋っているときの明るさ */

--speak-brightness: brightness(100%);

/** フォントサイズ */

--font-size: 25px;

/** 名前と画像の距離 */

--name-space-top: 20px;

/** 名前の上下の余白 */

--name-padding-jouge: 15px;

/** ステータス同士の距離（よこ） */

--state-distance-yoko: 30px;

/** ステータス同士の距離（たて） */

--state-distance-tate: 30px;

}

.Voice_avatar__htiqH {

display: block !important;

border: none !important;

width: var(--image-width) !important;

height: var(--image-height) !important;

margin-top: calc(var(--light-scale)) !important;

margin-left: var(--light-scale) !important;

border-radius: var(--image-radius) !important;

filter: var(--not-speak-brightness);

margin-right: 0px !important;

}

.Voice_name__TALd9 {

display: block;

text-align: center !important;

margin-top: calc( var(--name-space-top) + var(--image-height) + 22px ) !important;

margin-left: var(--light-scale) !important;

font-size: var(--font-size) !important;

padding: var(--name-padding-jouge) 0px !important;

}

.Voice_avatarSpeaking__lE\+4m {

border: none !important;

filter: var(--speak-brightness);

box-shadow: 0px 0px var(--light-scale) var(--light-color) !important;

}

.Voice_voiceState__OCoZh {

float: left;

display: block;

height: calc( var(--state-distance-tate) + var(--image-height) + (var(--name-padding-jouge) * 2) + var(--name-space-top) + 11px );

margin-right: calc( var(--state-distance-yoko) - var(--light-scale) ) !important;

}