Methods 티스토리 각주 스타일 꾸미기 2017. 4. 24. 19:36

우선 티스토리 각주라는 것이 무엇인지부터 알아보겠습니다.[각주:1]


각주는 출판물에서 출처 같은 것을 명기할 때 유용하게 쓰는 도구죠. 티스토리에서는 이런 각주를 쉽게 쓸 수 있게 하는 기능을 제공합니다.



글쓰기 페이지의 티스토리 편집기입니다. 에디터 메뉴에 있는 기능으로 본문에 각주 링크를 삽입할 수 있습니다.[각주:2]



여기서 보이는 빨간 숫자가 각주 링크에요. 숫자를 누르면 본문 맨아래까지 스크롤이 이동합니다. 그리고 본문 최하단에는 다음과 같이 그 숫자에 연결된 각주가 번호매김되어 적혀 있습니다.[각주:3]



이제 [본문으로]를 누르면 스크롤은 각주 링크가 있었던 원래 위치로 되돌아갑니다.



각주 링크에 마우스 커서를 올리면 각주 내용이 담긴 말풍선이 뜹니다. 본문 하단까지 내려가지 않아도 되니까 편리하네요.


여기서 문제는 저 말풍선이 제대로 스타일 적용이 되어 있지 않아서 글자를 읽을 수가 없다는 점입니다. 이 블로그는 배경이 어둡기 때문에 문자 기본색으로 흰색에 가까운 밝은 색을 썼거든요. CSS를 수정해서 말풍선의 바탕색이던지 문자 색상이던지 하나를 수정해야 글자를 읽을 수 있을 것 같습니다.



<script type="text/javascript">
$(function() {
	tistoryFootnote.showSuper = tistoryFootnote.show;
	tistoryFootnote.show = function(anchor, entryId, noteId) {
		this.showSuper(anchor, entryId, noteId);
		var layer = document.getElementById("tistoryFootnoteLayer_" + entryId + "_" + noteId);
		layer.style.color = "#000";
	}
});
</script>


이상의 스크립트를 이용하면 말풍선의 글자색을 다음과 같이 검정으로 변경할 수 있습니다. 스크립트는 티스토리 관리자 메뉴의 스킨 편집으로 가서 skin.html의 </body> 바로 위쯤에 추가하거나 작성중인 포스트의 본문 가운데에 넣습니다.




  1. 각주 예시입니다. [본문으로]
  2. 두 번째 각주 예시입니다. [본문으로]
  3. 또 다른 각주 예시입니다. [본문으로]

'Methods' 카테고리의 다른 글

TensorFlow 설치하기  (0) 2017.06.04
라즈베리파이3에 6lbr 설치하기  (0) 2017.05.25
라즈베리파이3에 ipTIME N150UA 드라이버 설치하기  (0) 2017.05.25
라즈베리파이3에서 리눅스 커널 빌드하기: TL-WN725 무선랜카드 디바이스 드라이버 설치  (1) 2017.05.25
Kivy 안드로이드 APK 만들기  (4) 2017.05.18
buildozer 빌드시 hostpython 오류  (0) 2017.05.17
웹페이지의 우클릭/드래그 방지를 해제하는 최고의 방법  (1) 2017.05.17
알기 쉬운 minicom 사용법  (4) 2017.05.10
실수로 삭제한 깃허브 저장소 복구하기  (0) 2017.04.28
gdb-arm-none-eabi 설치 오류  (0) 2017.04.23
Written by 코코넛냠냠 | 2017. 4. 24. 19:36 Comment
Top

티스토리툴바