티스토리, 각주 원본소스를 공개하며 Footnote를 수정하는 방법에 고민한다.

티스토리, 각주 원본소스를 공개하며 Footnote를 수정하는 방법에 고민한다.


몇 일 동안, 아주 조금씩 스킨을 수정하고 있습니다. 

그렇게...,  스킨 수정을 하였습니다.


이런 정신나간 블로그를 찾아주셔서 감사합니다  ^;

또, 마음에 변덕이 끓기도 그래서  참을 수 없는 마음에 갈피를 잡지 못해...,  조만간 맘에 들지 않으면 또...,  바꾸겠지만,  


이렇기도...,   그렇기도 하는  개인적인 생각이에 빠지며...,  

나를 심란하게 하는 분들도 있고 하여 뭔가 다른 것에 집중하기에  블로그를 수정하는 것 만한 것도 없어 이렇게 스킨을 수정하다보니 티스토리에서 기본적으로 제공하는 각주(Footnote)의 글자색과 배경을 변경해보려고 이렇게 저렇게 알아보다 각주(Footnote)의 원본 소스를 파악하게 되었습니다.  



각주(Footnote)의 원본소스는 아래와 같고  이걸 스킨에 잘 어울리도록...,  그리고, 

티스토리에서 제공하는 각주(Footnote)보다 나중에 로딩되어 기존 각주(Footnote)를 대체하는 방법에 대하여 고민하다가 스킨 수정하는 것을 잠시 보류하게 되었습니다.


이 놈을 어떻게 수정하면 블랙 테마에 잘 어울리게 수정할지...,


나의 땀똔님은 각주(Footnote) 원본소스로 멋지게 수정하실 수 있겠지?!라는 생각에 살짝 공개해봅니다.



참고로 각주(Footnote)를 대체하는 스크립트가 많이들 있지만, 

문제는 기존 스킨의 Layout를 틀어지게 만드는 경우가 많아....,  이래저래 고민하고 있답니다.





<script>

var tistoryFootnote = {

        notes: {},

        add: function(entryId, noteId, content) {

            this.notes[entryId + "_" + noteId] = content

        },

        show: function(anchor, entryId, noteId) {

            var layer = document.createElement("div");

            layer.id = "tistoryFootnoteLayer_" + entryId + "_" + noteId, 

layer.style.font = "11px/1 Dotum, Sans-serif", 

layer.style.width = "304px", 

layer.style.position = "absolute", 

layer.style.left = getOffsetLeft(anchor) - 86 + "px", 

layer.style.top = "0px", layer.style.zIndex = "810302", 

new RegExp("MSIE [1-6]\\.").test(navigator.userAgent)

? layer.innerHTML = "<div style=\"height: 6px; overflow: hidden; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//i1.daumcdn.net/cfs.tistory/static/admin/editor/footnotes_01.png', sizingMethod='crop')\"></div><div style=\"width: 304px; padding: 6px 0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//i1.daumcdn.net/cfs.tistory/static/admin/editor/footnotes_02.png', sizingMethod='scale')\"><div style=\"padding-bottom: 6px; border-bottom: 1px solid #f2f1be; font-weight: bold; margin: 0 15px 9px 15px\">각주 " + noteId + '</div><div style="margin: 0 15px; line-height: 1.5">' + this.notes[entryId + "_" + noteId] + "</div></div><div style=\"height: 15px; overflow: hidden; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//t1.daumcdn.net/tistory_admin/static/admin/editor/footnotes_03.png', sizingMethod='crop')\"></div>"

: layer.innerHTML = '<div style="height: 6px; overflow: hidden; background-image: url(//t1.daumcdn.net/tistory_admin/static/admin/editor/footnotes_01.png)"></div><div style="width: 304; padding: 6px 0; background-image: url(//t1.daumcdn.net/tistory_admin/static/admin/editor/footnotes_02.png)"><div style="padding-bottom: 6px; border-bottom: 1px solid #f2f1be; font-weight: bold; margin: 0 15px 9px 15px">각주 ' + noteId + '</div><div style="margin: 0 15px; line-height: 1.5; overflow: hidden">' + this.notes[entryId + "_" + noteId] + '</div></div><div style="height: 15px; overflow: hidden; background-image: url(//t1.daumcdn.net/tistory_admin/static/admin/editor/footnotes_03.png)"></div>', 

document.body.appendChild(layer), 

layer.style.top = getOffsetTop(anchor) - layer.offsetHeight + "px"

        },

        hide: function(entryId, noteId) {

            var layer = document.getElementById("tistoryFootnoteLayer_" + entryId + "_" + noteId);

            layer.parentNode.removeChild(layer)

        }

    }

</script>


참고,

아래는 티스토리 기본  각주(Footnote)의 글자색만 수정할 수 있는 스크립트입니다



$(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 = "#000000";

}

});


묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

도움/나눔을 실천한다 다른 글

이 글에 담긴 의견 4

*

*

    • 아, 저도 한때 각주 바꾸려고 하다 포기했는데 저렇게 스크립트형태로 되어있군요ㅎ
      스킨에 맞게 수정하시려는 분들에게 좋은 정보네요. 저는 귀찮아서 일단 저장만 해놓고...^^;

    • 뒷걸음치다 하나 얻어걸린셈이죠 ㅋㅋ
      그래서 배경을 어둡게 하고 글자를 하얀색으로 하니 각주글자색이 하얀색으로 나와 이번에 글자색만 살짝 바꿔뵜습니다 ㅎㅎ

이전 글

다음 글

티스토리 툴바