ROLL20 꾸미기용 CSS

또잉(@life_hwanmyeol) 롤꾸 CSS 정리글

롤꾸하려는 지인들 보여주기 위해 정리한 글. 불친절함.

여기저기서 긁어온 거 개많음. 출처 기재했으나 불편할 시 말씀해주시면 바로 내립니다!

2024-04-13 보기편하게 이미지 추가 수정, 코드 추가

 

롤꾸 예시 코드

저는 이런식으로 합니다.

이렇게 템플릿 만들어놓고 복사해다 쓰면 무지 편합니다 :) 파란색 부분은 세션마다 유동적으로 바뀌는 부분임

/desc https://imgur.com/Zib0Vkg.png /desc [　시나리오　](#" style="text-decoration:none; color: #cbddee; background-color:#355C9F; text-align:center; display:block; padding:2px; box-shadow: 0px 8px 0px 15px #355C9F; font-size:12px; font-style: normal;)[　제목　](#" style="text-decoration:none; color: white; background-color:#355C9F; text-align:center; display:block; padding:2px; box-shadow:0px 8px 0px 15px #355C9F; font-style: normal;) /desc [Written by](#" style="font-style: normal; text-decoration:none; color: #355C9F;) [라이터명](#" style="font-style: normal; text-decoration:none; color: #333333;)[@아이디](#" style="text-decoration:none; color: #999999;font-size:9px;display:block;font-weight: normal;) /desc [Call of Cthulhu 7th Edition FanMade Scenario](#" style=" color: #7C7B84 !important; text-decoration:none; font-weight: normal; font-size: 10px;) /desc https://imgur.com/ZJwjEXk.png /desc [KPC](#" style="font-style: normal; text-decoration:none; color: #355C9F;) [이름](#" style="font-style: normal; text-decoration:none; color: #333333;)　[PC](#" style="font-style: normal; text-decoration:none; color: #355C9F;) [이름](#" style="font-style: normal; text-decoration:none; color: #333333;) /desc [세션 날짜](#" style="font-style: normal; text-decoration:none; color: #333333;) /desc https://imgur.com/ZJwjEXk.png /desc [시나리오 문구1](#" style="text-decoration: none; color:#333333; font-size:12px; font-weight: normal;)[시나리오 문구2](#" style="color:#333333;display:block;text-decoration:none; font-size:12px; font-weight: normal;) /desc https://imgur.com/zRmRXpz.png /desc [─────── CHAPTER 00 ───────](#" style="text-decoration:none; color: #cbddee; background-color:#355C9F; text-align:center; display:block; padding:2px; box-shadow: 0px 8px 0px 15px #355C9F; font-size:12px; font-style: normal;)[도입](#" style="text-decoration:none; color: white; background-color:#355C9F; text-align:center; display:block; padding:2px; box-shadow:0px 8px 0px 15px #355C9F; font-style: normal;)

예시 코드 출처들:

인트로 간지나는 이미지 코드 https://colorname1357.tistory.com/87

인트로 꾸미기 코드(챕터, 판정 포함) https://posty.pe/iqjzm4

 

 

원하는 스타일을 만들기 위한 코드 나열(간단한 것들만)

[할 말](#" style="여기에 코드가 들어갑니다)

회색 부분이 바뀌는 부분

그냥 그대로 복사해서 회색 부분에 넣고싶은 거 집어넣으면 됨

 

할 말 대신에 ?{할말|}를 집어넣으면 새 창에서 입력 가능

text-decoration:none;	글자에 밑줄이 없게함
color: #ffffff;	글자색 변경 #색상코드
background-color:#B9062F;	배경색 변경 #색상코드
text-align:center;	텍스트 중앙 정렬 (center, left, right/중앙, 왼쪽, 오른쪽)
display:block;	상자 모양 유지
font-size:20px;	폰트 사이즈 변경, (폰트 크기, 숫자)px
font-weight:bold;	글자 굵기(normal, bold, number, initial/보통 굵기, 굵은 굵기, 숫자 지정(100단위, ~900), 기본값)
font-style: normal;	기본값, 기울기 X
font-family: 'Candal', sans-serif; font-family: 'Contrail One', cursive; font-family: 'Patrick Hand', cursive; font-family: 'Shadows Into Light', cursive;	폰트 변경 외부 폰트는 PRO계정으로 가능

폰트 코드 출처 > https://twitter.com/zughwa_TRPG/status/1369894175735312388?s=20

 

넣는 순서는 상관 없음

소괄호 안에 있는 것들은 뭘 쓰든 표시 안 됨

코드 서식 중간에 넣는 것만 아니면 주석으로 사용 가능

ex. [예시](#" style="text-decoration:none; 어쩌구저쩌구뿡; color: #ffff00;)

 

 

 

 

자주 쓰는 것들 정리

나레이션

주황색 배경 강조

행동 지문(2개 동일)

엑스트라 NPC 출현시 사용

/as "이름" 할말

주사위 굴리는 법 /r ndm, [[ndm]]

응용

GM주사위 GM한테만 보임

간단한 텍스트 효과 백틱(`) 헷갈리지 말 것

귓속말 하는 법

/w 캐릭터이름 할말 주의할 점: 캐릭터 이름에 띄어쓰기 있으면 그 전까지만 적어야 됨 ex) 김 또잉 > /w 김 할말 gm한테는 gm이라고 써도 됨 ex) /w gm 할말

 

비밀 주사위 GM한테만 보임

비밀 패널티/보너스 주사위 GM한테만 보임

/w gm &{template:coc-1}{{name=기능이름}}{{success=[[기능치]]}}{{hard=[[floor(기능치/2)]]}}{{extreme=[[floor(기능치/5)]]}}{{roll1=[[1d100]]}} /w gm &{template:coc}{{name=기능이름}}{{success=[[기능치]]}}{{hard=[[floor(기능치/2)]]}}{{extreme=[[floor(기능치/5)]]}}{{roll1=[[1d100]]}}{{roll2=[[1d100]]}} {{roll3=[[1d100]]}}

 

이미지 보내는 법

요즘은 그냥 아무데서나 이미지 링크 복사 > 채팅창에 그대로 붙여넣기하면 전송된다.

 

텍스트 블러 (모달창이 뜨면 내용을 입력함, 드래그하면 텍스트 내용이 보임)

[?{할말|}](#" style="color:rgba(0,0,0,0);text-shadow:5px 0px 10px black,-5px 0px 10px black;font-size:12px;line-height:12px;text-decoration:none;)

출처: https://wady-6ox.tistory.com/221

원하는 효과를 템플릿화하기

[?{할말}](#" style="text-decoration:none; font-weight:bold; color:#A1045A;) ?{할말} 이라고 쓰면 할말이라는 입력창이 생긴다. 뒤에 CSS 코드를 넣어주면 텍스트 칠 때마다 효과 넣을 수 있음(매크로 등록용) 위 코드는 밑줄 제거, Bold체 (텍스트 굵게), 글자색 #A1045A(색상코드)로 변경한 CSS 코드다. 위에 적어둔 코드를 응용하면 쉽게 사용가능

 

산치체크용 매크로

/desc [　⚠️　SANC (?{할말|})　⚠️　](#" style=" color:white; text-shadow:1px 3px 2px #ff0000,2px 1px 2px #0100ff, 3px 1px 0px #40FF00;text-decoration:none; font-style: normal !important; text-align: center; display: inline-block; letter-spacing: -1px; border-radius: 20px; padding: 5px 15px;margin-left: -4px;background-image: linear-gradient(135deg, #4f0000, #AA0000 ;) 매크로 등록해두고 SAN 변경치만 모달창에 입력해주면 된다. 위 예시는 1D3이라고 입력한 것.

요즘 자주 쓰는 초보자 배려용 강조 표시

[키워드](#"style="text-shadow: 1px 1px 1px  #66E0FF, -1px -1px 1px #FF69C3; ;text-decoration:none; font-weight:bold; color:#333333;font-size:10pt;text-decoration: none;) 지문 사이사이에 키워드를 강조 표시해주면 TRPG 초보자들에게 조사포인트나 중요한 내용을 강조해줄 수 있다.

출처:https://docs.google.com/document/d/1f-FU6i07BGg0LEkgK-nCxBJZsMK_14K_rzC7ZjG6vvQ/edit?usp=sharing

깔끔하게 챕터 나누기

/desc [CHAPTER 1.](#" style="text-decoration:none; font-size: 16px; color: #ffffff; background-color:#B9062F;  text-align:right !important; display:block; padding:4px; padding-right: 20px; border-radius: 10px 10px 10px 10px;)

출처: https://posty.pe/ptafi3

오너 사담용

/o [?{잡담내용}](#"style="color:#aaaaaa;)

출처: https://x.com/kibkibe_trpg/status/1369910530530373632

핸드아웃 급할 때 쓰는 매크로(즉석 제작)

/desc [**🔎 ?{핸드아웃 명} │　** ?{내용}](#" style="text-decoration:none; color: black; font-weight: bold; padding: 8px 12px; margin: 5px 5px 7px 5px; background: #ffffff; line-height: 150%; border: 2px solid black; box-shadow: -4px 4px 0px black ; display: inline-block;)

 

브금 급할 때 쓰는 매크로(즉석 제작)

/desc [💿　　?{BGM제목|10자 이하}　　▶ ■](?{URL|BGM 링크} #" style="margin: 0px 7px 7px 7px; font-size:15px; color: black; background: white; text-align: center; display: inline-block; padding: 5px 15px; font-style: normal !important; font-weight: normal !important; border-radius: 20px; margin-left: 4px; text-decoration: none; border: 1px dashed black; box-shadow: 2px 2px 0 black; letter-spacing: -1px; )

 

메모 템플릿

[?{할말|}](#" style="background: #배경색; border-left: 7px solid #배경색; font-size:13px; padding: 3px; text-decoration:none; color: black;)

출처: https://posty.pe/m1m4ix

네온 템플릿

[?{내용}](#" style="text-decoration:none; display:block; text-align: center; font-family: Georgia, serif; font-weight: bold; font-style: italic; font-size:15px; line-height:1.3; margin: 0px 0px 7px 0; color: white; text-shadow: 0 0 2px white, 0 0 3px #9900ff, 0 0 10px #9900ff, 0 0 15px #9900ff;" )

 

네온 템플릿2

/desc [?{노랑|}](#" style="text-decoration: none; text-align: center; display: block; color: #F7E217; background-color: black; line-height: 1.5; padding: 10px 0px 10px 0px; margin: -8.8px -10px -8.8px -15px; text-shadow: 1.1px 1.1px 0px #E12611, 0 0 2px white, 0 0 3px #F7E217, 0 0 10px #E12611, 0 0 15px #E12611, 0px 0px 20px #E12611, 3px 3px 2px #E12611; )

출처: https://sasjnejjjfdf.tistory.com/1

말풍선

[?{할말|}](#" style="position: relative; background: #ffffff; border-radius: .4em; padding:10px; user-select:none; display:block;text-decoration:none;) [ ](#" style="content: ''; position: absolute; border: 12px solid transparent; border-right-color: #ffffff; border-left: 0; border-bottom: 0; margin-top: -25px; margin-left: -10px; text-decoration:none;)

출처: https://posty.pe/m1m4ix

생각 말풍선

[●](#" style="color:white;font-size:12px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[●](#" style="color:white;font-size:19px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[?{할말|}](#" style="order: 1px solid black; border-radius: 7px; padding: 5px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;background-color:white;text-decoration:none; color:black;)

출처: https://posty.pe/m1m4ix

카톡

[?{내용}](#" style="color:black; background: white; border-radius: 0px 15px 15px 15px; padding: 8px; display: inline-block; line-height:1.3; box-shadow: 1px 1px 1px 1px #97A9B9; text-align:left; line-height:1.3; text-decoration:none; margin: 0px 0px 3px 0px; word-break:keep-all;)　 [?{:|PM|AM}](#" style="text-decoration:none; text-align:right; color:black; font-size:10px;) [?{시간}](#" style="text-decoration:none; text-align:right; color: black; font-size:10px;)

 

시스템 모달창 매크로

/desc [▽ SYSTEM](#" style="font-size: 16px; font-family: sans-serif !important; font-weight: 400; color: #FF0000; text-shadow: 1px 1px 2px #FF0000; text-align: left !important; background: #111111; display: block; padding: 10px 15px; padding-bottom: 10; font-style: normal !important; font-weight: normal !important; margin-left: -4px; text-decoration: none; border: 1px solid white; letter-spacing: -1px; border-top: none; border-bottom: none;)[?{대사}](#" style="font-size: 14px; font-family: sans-serif !important; color: #FFFFFF; text-shadow: 1px 1px 2px #999999; font-weight: 400; text-align: left !important; background: #313131; display: block; padding: 10px 15px; padding-bottom: 10; font-style: normal !important; font-weight: normal !important; margin-left: -4px; text-decoration: none; border: 1px solid white; letter-spacing: -1px; border-top: none; border-bottom: none;)

코드 출처: https://x.com/Rekxin/status/1756888676318241051

 

슈퍼챗 매크로

코드 확인: https://x.com/315486v6/status/1750493853193580782

 

자잘한 팁(모르면 개손해)

함께 만드는 Roll 20 명령어 매크로 정리 링크 https://posty.pe/ke1m99

주크박스 사이트 https://jukebox.today/       /       https://w2g.tv/en/

TRPG BGM 찾을 때 정리 노션 https://x.com/Protect64842077/status/1266689472000745472

X의 Protect님(@Protect64842077)

쥬나님 배포 핸드아웃 템플릿 정리 포스타입 https://posty.pe/a93p7t

핸드아웃 템플릿 전체 목록 열람 : 포스타입 포스트

독님 핸드아웃 이미지 CSS 코드 https://posty.pe/coi4ze

Roll20용 핸드아웃 CSS 이미지 : 포스타입 포스트

꿀비님 핸드아웃 CSS 코드 https://posty.pe/9a9fje

[롤20] CSS 핸드아웃 매크로 : 포스타입 포스트

쥬나님 배포 인트로 코드
https://posty.pe/q60kdm

https://posty.pe/5qjqbh

ROLL20 채팅창 롤꾸용 이미지 무료 배포 (ver.10) : 27종 : 포스타입 포스트

Shen님 인트로 코드 모음 https://colorname1357.tistory.com/63

인트로 코드 통합본

다양한 롤꾸 매크로  1~4
https://sasjnejjjfdf.tistory.com/1

https://sasjnejjjfdf.tistory.com/5 
https://sasjnejjjfdf.tistory.com/11
https://sasjnejjjfdf.tistory.com/14

ROLL20 매크로 백업 4

 

사용한 매크로&롤20 CSS 정리 사이트 출처

타임님 Roll20 매크로 정리 https://posty.pe/164jxp

피화님 롤20 예쁜 글자 https://posty.pe/8qu7hr

나는 간지나는 롤20을 할거야 <Pro는 아니지만 말야> https://wady-6ox.tistory.com/221

개인 백업용 Roll20 CSS  https://docs.google.com/document/d/1f-FU6i07BGg0LEkgK-nCxBJZsMK_14K_rzC7ZjG6vvQ/edit?usp=sharing

Roll20 CSS 배포 https://posty.pe/iqjzm4