왼쪽을 오른쪽으로 바꾸는 방법입니다.
주사위 결과출력까지 바꾸기는 어렵지만 기본 롤플 대화들은 바꿀 수 있습니다.
전체 항목마다 ctrl+f로 위쪽을 찾고 아래쪽으로 바꿔줍니다.
0. 사전작업
주사위와 모듈의 컴펜디움 표기로 인해 간혹 채팅 중간에 [] 문자가 포함되어있는 경우가 있습니다. 미리 확인해서 제거합니다. 이 과정을 거쳐야 이후 줄바꿈이 이상해지지 않습니다.
예시: [slashing], [fire] 혹은 @UUID[JournalEntry.FELTJlKaJBHWt3iE]{집중 Concentrating}
[slashing] 등의 피해 유형의 경우 파운드리 캐릭터 시트에서 미리 제거하면 채팅에도 입력되지 않습니다.
1. 스타일 css
전체 텍스트의 맨 앞에
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
.messagedesc {
box-sizing: content-box;
padding-left: 15px;
padding-right: 10px;
padding-bottom: 7px;
background-color: #f1f1f1;
position: relative;
font-style: italic;
font-weight: bold;
text-align: center;
color: #333333;
font-family: Pretendard Variable, sans-serif;
font-size: 15px;
}
.messagegeneral {
box-sizing: content-box;
padding-left: 45px;
padding-right: 10px; padding-bottom: 7px;
background-color: #f1f1f1;
position: relative;
text-align: left;
color: #333333;
font-family: Pretendard Variable, sans-serif;
font-size: 15px;
}
.spacertitle {
box-sizing: content-box;
background-color: #e1e1e1;
height: 2px;
margin-bottom: 7px;
margin-left: -15px;
}
.spacerchat {
box-sizing: content-box;
background-color: #e1e1e1;
height: 2px;
margin-bottom: 7px;
margin-left: -45px;
}
.avatar {
box-sizing: content-box;
position: absolute;
top: 4px;
left: 5px;
width: 28px;
}
.avatarimg {
box-sizing: content-box;
border: 0px;
vertical-align: middle;
max-width: 28px;
height: auto;
max-height: 28px;
}
</style>
를 추가합니다.
2. 날짜 지우기:
비주얼 스튜디오 코드를 이용해서 이 부분을 먼저 바꿉니다. 검색창 옆의 정규식 사용을 반드시 누릅니다(아래 이미지 참고)
*11/25 수정: 엑셀을 사용하면 큰따옴표가 사라지는 문제가 있어 엑셀 부분을 삭제합니다.
\[[^\]]*\]를
교체용텍스트로 바꿉니다.
또한 달력 모듈을 사용한다면
\{[^\]]*\}를
아무것도 입력하지 않은 채로 바꿉니다.
3. desc 메세지:
*모듈 사용시에만 desc 입력 가능
Cautious Gamemaster's Pack 사용시: #CGMP_DESCRIPTION
Narrator Tools 사용시: 내레이터
교체용텍스트 #CGMP_DESCRIPTION혹은
교체용텍스트 내레이터
를
<div class="messagedesc">
<div class="spacertitle"></div>
4. 일반 채팅 배경색 만들기:
교체용텍스트
을
<div class="messagegeneral">
<div class="spacerchat"></div>
<div class="avatar"><img src=" " class="avatarimg";></div>
5. desc, 배경색 마무리:
---------------------------
를
</div>
6. 인장 이미지 넣기, 이름 강조(볼드체)하기:
<img src=" " class="avatarimg";></div> 캐릭터이름
를
<img src="인장으로 사용할 이미지 주소" class="avatarimg";></div><b>캐릭터이름: </b>
7. 인장 없는 캐릭터, 엑스트라 등등 이름 강조(볼드체)만 넣기:
<img src=" " class="avatarimg";></div> 인물이름를
</div><b>인물이름: </b>
8. 마무리
텍스트 맨 마지막 줄에
</div>추가.
완성되었으면 html로 티스토리에 복붙해줍니다.
편집창에서는 줄 사이에 엔터가 보일 수 있는데 포스팅 완료하면 붙어서 나옵니다.
끝!
~~~~~~~~~~~여기부터는 옵션~~~~~~~~~~~
이런 식으로 다듬는다면 1번의 스타일 css를 1번 대신 다음처럼 복붙하세요.
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
.messagedesc {
box-sizing: content-box;
padding-left: 15px;
padding-right: 10px;
padding-bottom: 7px;
background-color: #f1f1f1;
position: relative;
font-style: italic;
font-weight: bold;
text-align: center;
color: #333333;
font-family: Pretendard Variable, sans-serif;
font-size: 15px;
border-radius: 10px;
margin-bottom: 2px;
}
.messagegeneral {
box-sizing: content-box;
padding-left: 45px;
padding-right: 10px;
padding-bottom: 7px;
background-color: #f1f1f1;
position: relative;
text-align: left;
color: #333333;
font-family: Pretendard Variable, sans-serif;
font-size: 15px;
border-radius: 10px;
margin-bottom: 2px;
}
.spacertitle {
box-sizing: content-box;
background-color: transparent;
height: 2px;
margin-bottom: 7px;
margin-left: -15px;
}
.spacerchat {
box-sizing: content-box;
background-color: transparent;
height: 2px;
margin-bottom: 7px;
margin-left: -45px;
}
.avatar {
box-sizing: content-box;
position: absolute;
top: 4px;
left: 5px;
width: 28px;
}
.avatarimg {
box-sizing: content-box;
border: 0px;
vertical-align: middle;
max-width: 28px;
height: auto;
max-height: 28px;
border-radius: 50%;
}
</style>