티스토리 각주 풍선 스타일을 고쳐보려는 시도 1

티스토리 본문 하단 각주에 관해서는 예전에 짧게 적은 게 있으니 그걸로 갈음한다. 

이번에는 본문에 풍선으로 뜨는 각주창을 어떻게 해보는 이야기를 적어 간다.

하려는 이유는, 본문 글꼴 크기에 비해 각주 풍선 글꼴 크기가 너무 작아서.

먼저 코코넛냠냠님 블로그 링크. 

http://nanite.tistory.com/12

티스토리 각주 풍선 글꼴의 글자색은 본문 글자색을 따라간다고 하는데, 그 글자색을 바꿔준 것. 

티스토리 각주 풍선 표시는 외부 파일에 저장된 자바스크립트.

그래서 그 파일을 손대진 못하니, 

본문에 같은 이름으로 함수를 넣어 오버라이드, 우선적으로 실행하도록 한 것이라고.

이걸 이용하면 글자색 뿐 아니라, 

글꼴의 크기도 바꿀 수 있다고 한다.

코딩은 전혀 따라갈 실력이 못 되어, 흉내내보았다. ;;

먼저, 위 링크에서 코코넛냠냠님의 코드를 가져왔다.

<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.font = "14px/1 Dotum, Sans-serif";

}

});

</script>

어디 한 번..^[각주:1] 

한 번 보자. 난 안 되는데.. 여전히 까막눈이라, 내 문제같은데.. 좀 더 물어뜯어봐야겠다.

=> 나중에 다는 덧글. 이건 제가 그때 똥손이어서.. 나중에 다른 스킨에서 해보니 잘 됩니다.. 그리고 댓글달아주신 코드에 추가된 한 줄덕분에 붙는 자리도 제대로 갑니다. 코노넛냠냠님 고맙습니다. (_ _)

참고한 링크.

• https://stackoverflow.com/questions/7642442/what-does-function-do
• jQuery Callback Functions https://www.w3schools.com/jquery/jquery_callback.asp
• jQuery Syntax https://www.w3schools.com/jquery/jquery_syntax.asp
• Javascript 함수 실행 다양한 방법 https://github.com/milooy/TIL/blob/master/JavaScript/javascript-run-function.md

찾아보면 빅풋이라는 외부 스크립트를 사용하면서 수동으로 각주를 붙여주라는 팁도 있다.

수동으로 각주를 붙여주겠다면, 그냥 만든 사람도 있다.

CSS 롤오버로 각주 만들기 - http://circlash.tistory.com/589

이 분의 각주는 무척 깔끔하다. 티스토리의 서식 기능을 사용하면 좀 덜 번거롭게 쓸 수 있다고 한다.

하지만 글쓰며 각주를 달 때마다 태그를 만들어야 하니.. TeX로 글쓰는 느낌이겠군.

편한 거 없을까..

티스토리의 각주 기능은 매우 초보적이라서, 이미지를 못 넣거니와 하이퍼링크도 걸지 못한다. 이걸 다 하려면 저런 플러그인을 쓰고 일일이 태그를 걸 수밖에 없는 것 같다. 

하단에 각주가 표시되는 부분은 어떻게 손쉽게 고칠 수 있는데, 풍선은 어렵다. 안 된다는 게 아니라 공부 필요. 그리고 다른 스킨 개조와 달리, 각주를 하이퍼링크와 이미지 삽입이 되도록 개조해버리면 (영리하게 마크다운비슷하게 만들어쓰지 않는다면) 그 개조한 스킨없이는 깨지고, 특히 아직 스킨을 적용하지 못하는 모바일화면에서 깨지는 것을 감수해야 한다. 따라서, 하이퍼링크와 이미지 삽입은 아직은 놔두고.. 데스크탑 스킨에서 풍선 레이아웃을 고치는 부분을 먼저 해 본다. !important 를 써서 우선순위를 오버라이드(?)하는 방법으로 css에서 어떻게 하거나, 자바스크립트를 그런 식으로 손대서 어떻게 안 될까..^[각주:2]

1. 본문과 비교될 만큼 큰 글꼴인가? [본문으로]
2. 그리고, 자바스크립트를 만들어붙일 땐 앞으로는 되도록 외부 파일로 만들어 따로 빼는 게 좋을 텐데, 그럴 때 다른 파일로 분리되면 우선적으로 적용하도록 한 코드의 순위가 달라지지 않을까. [본문으로]