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

생활공공기관

온라인 툴

인블로그 링크

SW, 서비스, HW 리뷰

Link

공공데이터베이스

지식데이터베이스

관리 메뉴

PC Geek's

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

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

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

1. 각주 말풍선

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

과거글 참고

https://pcgeeks.tistory.com/12164

https://pcgeeks.tistory.com/10368

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

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

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

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

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

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

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

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

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

2. 본문 하단 각주목록

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

style.css

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

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

'프로그램 > 알림글, 블로그 유지 관리' 카테고리의 다른 글

티스토리 스킨에서 사이드바 엘레멘트는 한 번만 렌더링됨. 위치 옮기기. (0)	2019.12.07
티스토리 반응형#2 스킨에서 blockquote (0)	2019.12.02
안드로이드폰용 티스토리앱과 네이버 앱의 문제점 (0)	2019.11.12
구글블로그(Blogger.com) 백업 관련 2019년 가을 기준. (0)	2019.11.10
티스토리 반응형 #2 스킨. 검색창 (0)	2019.11.05
클릭하면 펼쳐지는 박스 CSS: 카테고리 등 (0)	2019.11.03
티스토리 카테고리 공개, 비공개 메뉴에 대해 (0)	2019.11.02
티스토리 반응형 #2 스킨에 대해 11.01 (0)	2019.11.01