티스토리에서 텍큐닷컴으로 옮길 때 가장 어이가 없던 것은 각주를 풍선도움말로 띄워주는 기능이 없다는 것이었다.
티스토리나 설치형 텍스트큐브에선 기본적으로 사용하는 기능인데, 이런 기능이 구현되어있지 않다니...
그래서 텍큐닷컴 용 각주 풍선말 도우미를 만들었다.
이 도우미를 사용하려면 아래의 절차를 따르면 된다.
1. 관련 파일 설치
FootnoteHelper.zip2. 스킨 수정
역시, 언제나 그렇듯이... 스킨을 수정한다.
아래의 코드를 <body> 다음에 추가한다.
여기서 특히 주의해야 할 점은 마지막에 /를 반드시 붙여야 한다는 것이다.
블로그 이미지의 주소는 보통 다음과 같은 형식이 된다.
(아래 예에서도 마지막에 /를 붙였다는 것에 유의하기 바람)
아래의 코드를 <body> 다음에 추가한다.
<script type="text/javascript" src="(자기 블로그 이미지 주소)/j_footnote.gif"></script>
<script type="text/javascript">
tcFootnoteHelper.all("(자기 블로그 이미지 주소, 마지막에 / 포함)");
</script>
여기서 특히 주의해야 할 점은 마지막에 /를 반드시 붙여야 한다는 것이다.
블로그 이미지의 주소는 보통 다음과 같은 형식이 된다.
(아래 예에서도 마지막에 /를 붙였다는 것에 유의하기 바람)
http://fs.textcube.com/blog/1/2345/skin/6/images/
3. 스타일 수정
일부 스킨에선 디자인을 깔끔하게 하기 위해 <li> 앞에 숫자가 아닌 불릿을 표시하는 경우가 있다.
각주에서는 무조건 숫자로 표시해야 되니, 아래와 같은 스타일을 style.css의 마지막에 지정한다.
각주에서는 무조건 숫자로 표시해야 되니, 아래와 같은 스타일을 style.css의 마지막에 지정한다.
.footnotes li
{
list-style-type: decimal;
list-style-position: outside;
margin-left: 25px;
padding-left: 0;
}
이 도우미를 적용하면 텍큐닷컴에서도 아래 그림과 같이 풍선도움말을 띄울 수 있다.
각주는 어떻게 쓰는건가요 ㅋ
답글삭제이쁘긴한데 쓸일이 많지 않아서 말이죠 ^^;
@구차니 - 2009/12/07 09:42
답글삭제글의 일부를 [footnote] ~ [/footnote]로 감싸면 자동으로 각주로 만들어줍니다. 무척 간단합니다.
티스토리에 수동으로 적용할 수도 있겠네요. ;) [emo=091]
답글삭제[quote].footnotes li
답글삭제{
list-style-type: decimal;
list-style-position: outside;
margin-left: 25px;
padding-left: 0;
}[/quote]
복사했더니 위와 같이 나타나내요.
소스보기에서는 정상입니다.
[quote].footnotes li
{
list-style-type: decimal;
list-style-position: outside;
margin-left: 25px;
padding-left: 0;
}[/quote]
파이어폭스 3.5.5 사용합니다.
@koc/SALM - 2009/12/07 14:22
답글삭제네?
티스토리는 기본 기능입니다.
굳이 뭣하러...?
@류청파 - 2009/12/07 15:49
답글삭제Syntax Highlighter 자체 버그입니다.
텍큐닷컴에선 아마도 패치할 생각이 없는 것 같더군요.
@류청파 - 2009/12/07 15:49
답글삭제어쩔 수 없이 소스 보기를 한 뒤에 복사해야겠네요. ^^a
@zockr - 2009/12/07 19:23
답글삭제예. 기본 기능이지요.
흠... 그래도 CSS를 고치면 조금 다른 풍선 도움말이 될 수도 있겠거니 생각해 봅니다.
@koc/SALM - 2009/12/07 14:22
답글삭제아... 티스토리의 풍선 도움말은 css에 정의되어있지 않습니다.
여러모로 민감한 부분이 있어 자바스크립트에서 직접 호출합니다.
참고하세요.
오우.. 이 기능 유용하겠는데요. ^^
답글삭제원래 티스토리나 태터계열에서도 없는 기능이었어요. 2년~3년쯤 전에 태터 포럼을 검색해보면 제가 건의했던 글이 나올 거예요. 생각해보면 제가 별의별 것을 다 건의했었네요. ㅎㅎㅎ
각주글의 1,2 이런것을 주1, 주2 로 변경할수 있을까요? 정말 꼭 해보고 싶습니다. [emo=009]
답글삭제@Zasfe - 2009/12/11 10:06
답글삭제글쎄요... 방법이 없을 것 같은데요...
이건 적용시켜야 하겠군요. 텍큐로 와서 각주 바로 안 뜨는거 좀 귀찮았다능;ㅂ;
답글삭제@mahabanya - 2009/12/15 21:35
답글삭제그럼 바로 ㄱㄱㅆ이죠!
@zockr - 2009/12/16 19:56
답글삭제적용해서 잘 됩니다.
하지만 압축된 파일에는 j_footnote.gif 로 되어있는데 소스에는 footnote.js 로 되어 있어서 살짝 삽질.
그리고 텍큐 스킨 에디터에서   붙어 나오는 것 때문에 살짝 삽질.
본문에 해당 내용도 살짝 포함해 주시면 적용하는데 수월할 것 같아욤.
@mahabanya - 2009/12/15 21:35
답글삭제이런, 아직까지 티스톨 때 습관이 많이 남아있군요. 수정했습니다.
그리고,  는 무슨 말씀인지 모르겠습니다. 자세한 설명 부탁드립니다.
@zockr - 2009/12/17 18:12
답글삭제본문에서 소스를 클립보드로 복사한 후에 텍큐 스킨 에디터에 붙여넣으면 맘대로  가 붙어서 paste 되더라구요. 확인하고 삭제해야 한다고 알려주심 땡큐일 것 같아욤.
@mahabanya - 2009/12/15 21:35
답글삭제그 문제는 이미 몇 줄 위의 댓글에도 있는데... SH의 버그입니다.
웃긴 건 티스톨/텍큐 엔진이 아니라면 이 문제는 발생하지 않는단 겁니다.
즉, 텍큐닷컴 쪽에서 해결해줘야 하는 문제입니다.
이 문제는 별도로 포스팅 할 예정입니다. 다만 지금은 좀 바빠서... ㅠ.ㅠ
IE 에서는 정상적으로 보이는데 파폭(3.0.7)에서는 에러가;;
답글삭제[quote]tcFootnoteHelper is not defined
[Break on this error] tcFootnoteHelper.all("http://fs.textcube.com/blog/2/23241/skin/1/images/");\n[/quote]
라고 나오네요.
특이한거는 소스코드를 그냥 스킨에 추가 했을때에는 에러가 안난다는거..
뭐가 문제일까요..? 일단 제 블로그에 에러난 채로 적용해 두었으니, 확인 좀 부탁드리겠습니다.
따라하기를 해도 왜 안 되는지 궁금했는데, 큭,, 알고 보니 개떡같은 ie6에서 제가 몇 분을 고생을 했네요.
답글삭제빨리 버려야 하는 ie6
=================
좋은 팁 감사합니다.
trackback from: 텍큐닷컴 블로그의 가독성을 높였습니다.
답글삭제저는 글자크기 12로 글을 씁니다. 그러나 이렇게 글자크기를 키우면, 줄이 상하로 너무 다닥다닥 붙어있어서 읽기 불편한것 같더군요. 그래서 그동안 줄간격을 늘려서 여유를 줄 방법이 없을까 생각했습니다. 오늘 방법을 알아낸것 같습니다. 블로그 관리하기->꾸미기->스킨편집으로 갑니다. style.css 파일을 수정합니다. 맨 처음부분에 이런내용이 나옵니다. @charset "utf-8"; * { padding: 0; margin: 0; border: 0..
감사합니다^^
답글삭제그런데, 제 블로그에서는 살짝 이상하게 적용되네요..ㅠㅠ
http://jnstory.net/1540 포스트에 팁을 적용했는데, _<- 아래 부분만 적용되는데 해결방법이 없을까요?
@조남식 - 2010/02/02 23:40
답글삭제잘 되는데요...
그대로 해도 안되는 이유는 무엇일까? 했었는데...
답글삭제다시 확인을 해보니, IE브라우저의 문제였습니다.
파이어폭스에서는 잘 보이더라구요.
그런데, 제 블로그 말고 설치된 다른 분의 블로그 각주 풍선은 잘 보입니다.
혹, IE8.0에 어떤 설정할 것이 있는지요...
아니면, 특별히 어떤 테그가 필요한지...
BLUEnLIVE님의 답변을 조심 스럽게 기다려 봅니다.
간절히~ ^^;
고맙습니다. BLUEnLIVE님.. (_ _)
@그별 - 2010/02/09 00:10
답글삭제F5 연타 신공으로 다시 읽기... ㅎㅎ
브라우저 상관 없이 다 잘 돌아갑니다.
안녕하세요, 각주 기능 스킨 적용 하다가 문제가 생겨 문의드립니다. 1시간 째 이리저리 해보고 있는데 블로그 이미지 주소라는 것이 정확히 무엇인지 가르쳐 주실 수 있나요?
답글삭제안녕하세요. 각주에 풍선말을 잘 사용하던중 질문이 있어 이렇게 찾아왔습니다.
답글삭제각주에 링크가 걸린내용이나 일반 텍스트가 아닌내용이 들어가면 말풍선에서 일반 텍스트만 나오는데 이거 수정할 방법은 없나요? 궁금합니다. 참, 하단의 각주 설명은 정상적으로 보입니다.[emo=059]
@아네모네 - 2010/03/13 02:56
답글삭제원래 그렇게만 나옵니다.
하단의 각주 설명을 풍선 형태로 다시 띄우는 것이거든요.
@BLUEnLIVE - 2010/03/13 07:57
답글삭제아, 제가 질문을 잘못했습니다.[emo=059]
예로 [b]"링크가 적용된 글자" + "일반 글자"[/b]를 각주로 적용하면 일반글자만 보이고 [u]링크가 적용된 글자는 아예 풍선말에 나타나지를 않습니다.[/u]라는 것이 정확한 질문입니다.
죄송합니다. 저의 질문요지는 링크가 적용된 글자가 일반글자로 라도 풍선말에 나왔으면 한다는 것입니다.
그럼, 즐거운 하루되세요.
trackback from: 텍스트큐브 주석 달기
답글삭제텍스트큐브 알림판에 박쥐의 변신이라는 글이 나타났기에 단지 제목이 재미있어서 클릭했습니다. 왕미친놈이 본 추천 포스트 그런데 주석(각주)을 달 수 없다는 푸념(?)이 있습니다. 얼마나 답답하셨을까? 태터툴즈 주석 달기 제 기억이 맞다면 태터툴즈의 형제들은 주석 다는 방법이 모두 같습니다. 바로 [footnote]내용[/footnote]과 같은 꼴로 나타내면 주석으로 바꾸어 줍니다. 텍스트큐브 편집 화면 1 - 주석이 달려 있습니다. 참고로 예제로 보..
Amiable dispatch and this fill someone in on helped me alot in my college assignement. Thank you as your information.
답글삭제