티스토리 각주 풍선 스타일을 고쳐보려는 시도 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] 

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


참고한 링크.


찾아보면 빅풋이라는 외부 스크립트를 사용하면서 수동으로 각주를 붙여주라는 팁도 있다.
수동으로 각주를 붙여주겠다면, 그냥 만든 사람도 있다.
CSS 롤오버로 각주 만들기 - http://circlash.tistory.com/589
이 분의 각주는 무척 깔끔하다. 티스토리의 서식 기능을 사용하면 좀 덜 번거롭게 쓸 수 있다고 한다.
하지만 글쓰며 각주를 달 때마다 태그를 만들어야 하니.. TeX로 글쓰는 느낌이겠군.

편한 거 없을까..



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

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


  1. 본문과 비교될 만큼 큰 글꼴인가? [본문으로]
  2. 그리고, 자바스크립트를 만들어붙일 땐 앞으로는 되도록 외부 파일로 만들어 따로 빼는 게 좋을 텐데, 그럴 때 다른 파일로 분리되면 우선적으로 적용하도록 한 코드의 순위가 달라지지 않을까. [본문으로]
이 글과 같은 분류 글목록으로 가기 / 최신글목록으로 가기
트랙백이 없고, 댓글 2개가 달렸습니다
☞ 링크/트랙백관련

댓글을 달아 주세요

  1. 코코넛냠냠 2018.03.22 13:15 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 블로그 통계를 보고 찾아왔습니다.

    올려 주신 코드는 잘 될 것 같은데 이상하네요. (들여쓰기가 어긋나 있어서 순간 중괄호가 하나 빠졌나 싶었는데 그것도 아니네요)

    이렇게도 한 번 해 보세요. 폰트가 커지면 말풍선도 커지기 때문에 위치 조정을 추가했어요.

    $(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";
    layer.style.font = "14px/1 Dotum, Sans-serif";
    layer.style.top = getOffsetTop(anchor) - layer.offsetHeight + "px";
    }
    });