출처 소금간장님 티스토리
본문
※티스토리 기준
이 색은 참고할 단축키
어려움이 있으시다면 언제든 010-깨알깨알-깨알깨알
대신 님들 로그 구경시켜주셔야함
(참고: https://www.postype.com/@salvia-chan/post/18876157)
1. 채팅 기록→한페이지로 보기
2. 전체 복사 (ctrl+a → ctrl+c)
3. 주소창에 data:text/html, <html contenteditable> 입력
원래 빈 페이지 상태로 뜨니 걱정x
4. 빈페이지를 아무 곳이나 한 번 클릭해서 커서를 띄운 후 2에서 복사한 전체 채팅 로그 붙여넣기 (ctrl+v)
혹시 사진과 같은 형태가 아닌 일반 텍스트의 형태로 붙여넣기가 됐다면 그냥 다시 roll20 채팅 로그에 들어가서 복붙해오시면 됩니다.
로그 복사 이후 다른 것을 복사하면 클립보드에서 로그의 서식을 복사했던게 지워지기 때문에 그런 거예요.
5. 해당 상태에서 hidden, 사담, 오타 등 지워야 할 부분 수정 및 삭제
백스페이스, del 키로 맘대로 지우시면 됩니다.
6. 개발자 도구 (F12) → body에 마우스 올린 채 오른쪽 클릭 → copy - copy elements
7. 그대로 메모장에 붙여넣기 (ctrl+v)
8. (생략 가능) 다이스 결과창 크기 편집
다이스 결과를 모바일이나 특정 스킨에서 화면 밖으로 튀어나가지 않도록 조절해주는 과정입니다.
찾기 (ctrl+f) → 찾을 내용: background: rgb(255, 255, 255); width: → width 이후 적힌 숫자 기억 (예시에선 884px. 매번 값이 다름.)
→ 바꾸기 (ctrl+h)
찾을 내용: background: rgb(255, 255, 255); width: (찾은 숫자) (예: 884px)
바꿀 내용: background: rgb(255, 255, 255); width: 100%
→ 모두 바꾸기
생략해도 문제는 없지만 대신 안 바꾸면 이렇게 돼요...
9. 메모장 내용 전체 복사 (ctrl+a → ctrl+c) → 티스토리 html 모드에 붙여넣기 후 한 번 업로드 or 기본모드로 전환
추가적인 편집을 하기 쉽도록 형식을 자동으로 변환해주는 과정입니다.
더 수정하거나 추가할 것이 없으시다면 여기서 끝내셔도 ㄱㅊㄱㅊ
----------심화 : 추가 과정 (백.꾸(백업꾸미기) 하기) ----------
10. 업로드 한 글 수정 클릭 → html 모드 → 변환된 내용 메모장에 복붙 (ctrl+a → ctrl+c)
11. roll 20 기본 폰트로 수정
편집 - 바꾸기 클릭 (ctrl+h)
찾을 내용: ;" data-messageid="
바꿀 내용: ;font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" data-messageid="
각각 입력 후 모두 바꾸기 클릭
맨 앞 세미콜론(;) 꼭 붙여서 바꿔주셔야 합니다.
폰트 사이즈를 바꾸고 싶다면 font-size 부분의 숫자를 고치시면 되고,
티스토리에 따로 등록해둔 폰트를 사용하고 싶으시다면 (티스토리 폰트 등록에 관해선 ㉱ 티스토리 기본 폰트가 아닌 외부 폰트 사용법 참고) font-family 부분에 해당 폰트 이름을 넣으면 됩니다.
11번의 폰트 수정 방법은 이 채팅 로그 전체에 기본 서식을 부여해 준 느낌이라, 세션 도중 roll20의 명령어 / 매크로를 사용해 폰트를 바꾸었을 경우에는 따로 서식이 지정되어 있어 글씨체가 바뀌지 않습니다.
이 글씨체를 바꾸고 싶으실 때는 해당 부분의 <a style="box-sizing: 이후 나오는 font-family 부분을 찾아 바꿔주셔야 합니다.
(참고: 한 줄을 차지한 </div> 또 이후 한 줄을 차지한 </div>까지가 채팅의 한 칸을 나타낸다고 보시면 편합니다.
그 사이의 요소가 의미하는 것을 정리해 보면 아래 표와 같습니다.
| 요소 | 형식 | 의미 |
| <div class="message ... | <div class="message desc" | /desc 채팅 |
| <div class="message general" | 일반 채팅 | |
| <div class="message general you" | 내 채팅 | |
| <div class="spacer" ... | 칸 사이 여백 조정 | |
| <div class="avatar" ... <img ... src=(이미지 링크) /> | 인장 이미지 | |
| <span style=" ...class="by"> (이름) :</span> (채팅 내용) | 채팅 내용 | |
| <div id=" | 우리에게 중요하지 않음 삭제해도 ㄱㅊ 근데 귀찮아서 남겨둠 |
12. 이미지(인장 등) 수정
저장용량 문제로 roll 20에 업로드 해둔 이미지를 삭제하면 백업해둔 로그에서도 해당 이미지가 깨져보이기 때문에 그런 일을 방지하고자 거치는 과정
㉮ 찾기 (ctrl+f) → files.d20.io(세션에서 지정한 탐사자 인장) 혹은 app.roll20.net/users/avatar(플레이어 프로필 인장) 입력 → 해당 이미지 링크(이하 a)를 복사해 둠
㉯ 바꾸고자 하는 이미지 링크(이하 b)를 준비. 트위터에 업로드한 이미지를 사용하고 싶은 경우, 링크의 ?format 이후 부분을 .png(or jpg등의 이미지 확장자)로 수정하고 사용해야함. png 앞에 온점 필수!! (참고: 트위터 배경투명화 가능 최대 크기는 900px*900px)
예) https:// pbs.twimg.com/media/어쩌구?format=jpg&name=small → https:// pbs.twimg.com/media/어쩌구.png
㉰ 바꾸기 (ctrl+h) → 찾을 내용: a , 바꿀 내용: b
㉱ 탐사자 인장마다 노가다 반복
13. 브금 추가
브금을 넣고 싶은 위치에 아래 코드, 혹은 원하는 코드 삽입. 링크 부분에 추가하고 싶은 브금 링크를 넣으면 됨.
<div class="message desc" style="box-sizing: content-box; padding-left: 15px; padding-right: 16px; padding-bottom: 7px; background-color: #f1f1f1; position: relative; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: italic; font-weight: bold; text-align: center;" data-messageid="-OK1UxDMaHZ7iTBHdZBD">
<div class="spacer" style="background-color: #e1e1e1; margin: 0px -5px 8px -15px; height: 1px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;"> </div>
<a style="text-decoration-line: none; font-style: normal; font-weight: normal; display: inline-block; color: white; background: black; letter-spacing: -1px; border-radius: 20px; padding: 7px 17px; margin-left: -4px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;" href="링크" target="_blank" rel="noopener"> ♬ BGM ▶ ■</a></div>
14. 기본모드에서 배경화면, 핸드아웃 이미지 추가, 타이포 등 이미지 크기 조정
<div class="message desc" style="box-sizing: content-box; padding-left: 15px; padding-right: 16px; padding-bottom: 7px; background-color: #f1f1f1; position: relative; font-size: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: italic; font-weight: bold; text-align: center;" data-messageid="-OK1UxDMaHZ7iTBHdZBD">
<div class="spacer" style="background-color: #e1e1e1; margin: 0px -5px 8px -15px; height: 1px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;"> </div>
(티스토리에서 따온 이미지링크)
</div>
</div>
