관리 메뉴

PC Geek's

티스토리 블로그 각주 글자크기와 글꼴, 글자색 변경 등 본문

프로그램/알림글, 블로그 유지 관리

티스토리 블로그 각주 글자크기와 글꼴, 글자색 변경 등

1. 각주 말풍선


몇 년 전에 쓴 글이 둘 있고, 그때 코코넛냠냠님의 도움말을 더해 스킨에 어울리게 한 것이 지금 이 블로그 각주다.


과거글 참고

https://pcgeeks.tistory.com/12164

https://pcgeeks.tistory.com/10368


지금 이 블로그에 적용한 코드는 이렇다:



skin.html (<head> </head> 사이에)

※ 일부 스킨에서는 동작하지 않거나 레이아웃이 깨져 추가로 손봐야 할 수 있음.


이것이 기본이다. 티스토리 블로그의 각주 배경이미지는 포스트잇같이 생긴 풍선말칸인데, 이것은 세로로 계속 늘어나며 가로로는 배경이미지폭으로 정해져 있다. 그래서, 각주말풍선폭을 화면대비 %로 하거나 지정된 크기보다 넓히면 배경이미지가 반복해 패턴식으로 깔리거나 깨지는 식으로 깔끔하지 않게 됨. 늘린다 해도 희미해질 테니.


한편 저기서 살짝 바꾸면, 본문의 각주번호 상단이 아니라 하단에 말풍선이 나오게 할 수도 있다. 이건 해봤는데 이미지를 바꾸지 않으면 땜질느낌이 나서 적용하지 않았다. 여러 가지로 테스트해볼 것. 자동으로 다 계산되는 게 아니라 뭔가 어긋나서 숫자를 고쳐야 어울리는 경우가 종종 있다.



일단 저렇게 바꿔서 생기는 장점은,




1) 주석 말풍선안에 들어가는 텍스트의 글꼴, 색과 글꼴 크기를 마음대로 지정해줄 수 있다. 글자가 희미하다고 느꼈거나, 각주풍선 속 글자가 본문텍스트대비 너무 작다거나 글꼴이 달라 어색하다고 느낀 사람들은 마음껏 고칠 수 있다.


2) 앞으로 이미지를 바꾸고 다른 스타일로 바꾸는 기초가 될 수 있(을 것 같)다. 그리고 티스토리 시스템 자체를 사용하므로 별도의 코드를 넣어 주석을 넣을 때마다 html을 고치는 수고는 하지 않아도 된다.



요즘은 나무위키 각주도 신경써서 고쳐놓은 걸 볼 수 있는데, 나무위키의 각주는 마크다운을 쓸 수 있기 때문에 링크와 이미지를 넣어도 동작한다. 티스토리 각주도 그런 식으로 바꿔보는 게 목표.



2. 본문 하단 각주목록


그리고 본문 아래 각주에 살짝 멋을 주는 방법.



style.css


마찬가지로 각주글꼴과 글자크기 등 텍스트 속성을 조정해주었다.

그래서, 본문 아래 각주란이 이렇게 보인다.



이 글과 같은 분류글목록으로 / 최신글목록 이동
Comments
Viewed Posts
Recent Comments
Recent Posts