티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법

이 글은 이전에 쓴 글의 일부분으로서, 너무 장문의 글이라 이미지 직접 올리기 부분만 따로 떼어낸 글입니다.

2008/01/03 - 엄청 고생하면서 알아낸 스킨 변경, HTML/CSS 설정시의 티스토리 버그와 팁입니다.!

그러므로 이전 글을 읽으신 분들은 안읽으셔도 됩니다.


제가 이것을 시도하게 된 것은 스킨 변경할 때 more/less 아이콘 버튼이 사라져버렸기 때문입니다. 


원래 기본 스킨에서는 멀쩡하게 자리하고 있던 more/less 아이콘이 공지스킨으로 바꾸면서 사라졌습니다. 심리테스트의 결과 보기나, 추가 설명 시에 more/less 기능을 많이 사용하는 저에게는 아주 치명적인 오류지요. 버튼이 없이 글자만 떡~ 하니 나오니까 more/less 인지 구분이 안가서 정말 불편했거든요.

그런데 이것의 해결방법이 의외로 간단하다는 것을 알았어요!!
지금은 버튼이 나오도록 만들었습니다. 혹시 필요하신 분은 이 아이콘을 저장해서 사용하세요.
(→→→→ )

이건 스킨 변경에서 직접 올리기를 통해서 해결이 가능한데요, 직접 올리기는 다운받은 스킨을 사용할 때만 필요한 기능인줄 알았는데 그게 아니더군요. 이런 more/less 버튼, rss 버튼 등도 직접 올리기에서 등록이 가능합니다.
(※ rss 버튼을 자신이 원하는 이미지로 바꿀 때, 웹 주소로 올리는 방법은 다른 분들도 많이 설명해주셨으니 생략하겠습니다. 저는 Zet님, 선샤인님의 글을 참고로 했습니다.)

이 사실을 모를 때는 저는 일일이 이걸 다른 웹싸이트에 올리거나, 이 블로그에서 비공개로 그림을 올린 다음 그 그림의 주소를 링크하는 방식으로 사용했는데 정말 불편했습니다. 그림주소도 엄청 길고, 블로그에 직접 등록된 것이 아니라서 html에서 수정할 때도 html 태그 형식을 바꾸는게 정말 헤깔리고 어렵더군요.


혹시 여러분도 more/less 아이콘이나, rss 버튼을 일일이 다른 싸이트에 올려서 링크해서 올리시나요??
그러지 말고, 직접 올리기를 해보세요. 트래픽 걱정도 없고 파일명도 간단해서 훨씬 편리합니다! ^^

제가 직접 올린 것들은 more/less 아이콘, rss 버튼, 댓글 입력 버튼 등입니다.
간단히 설명하면, 직접 올리기에 가서 추가하고, skin.html 혹은 style.css에 가서 이미지 이름 변경하면 됩니다.

1. 일단 직접 올리기에 가서 자신이 올리고자 하는 파일(***.jpg, ***.gif, ***.png 등)을 선택해서 올립니다. 저는 more/less 아이콘과, 저의 파란토마토RSS 아이콘, 댓글입력창을 올렸습니다. 검색의 용이함을 위해서 이름도 원래 아이콘과 비슷하게 지었습니다.

2. 그 다음에 skin/html 편집으로 갑니다. 그리고는 Ctrl키 + F 를 눌러서 RSS 링크를 찾습니다.
(저는 한rss에 추가하기 명령이라서 여러분들과 명령어가 약간 다를 수 있습니다.)

    <!-- RSS 링크 -->
     <div id="btnRSS">

<center>      
<a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Ffeeds.feedburner.com%2Fblutoto" title="한RSS에 추가"><img src="./images/rss.gif" alt="rss"/></a> 

이런 게 나올 것입니다.


여기에서
<img src="./images/rss.gif" alt="rss"/></a>  
 img src= 다음에 나오는 " "안에 든 것이 이미지의 이름이나 주소거든요,
이것을 방금 제가 올린 rss_blutoto.gif라는 이름의 파일로 바꿔보겠습니다.

<img src="./images/rss_blutoto.gif" alt="한RSS에 추가"/> </a> </center>
그림의 이름이 다른 거 보이시죠? 제가 올린 그림으로 바꾼 것입니다.



3. 다음은 more/less 버튼 삽입/수정입니다.
more/less는 조금 더 어렵습니다.
*skin.html이 아니라, style.css에서 수정하셔야 하거든요.

style에서 원하는 부분을 찾으세요!
more 버튼과 less 버튼에 각각 기본적인 모양이 설정되어 있을 것입니다.
(문제는 이 설정만 있고, 아이콘 파일 업로드가 빠진 스킨이 아주 많다는 것입니다!)

 { background:url(images/iconmore.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}
 { background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}

이때, 이것을 여러분이 올린, 아이콘의 이름으로 바꿔주기만 하면 됩니다!!
(저기서 빨간 부분이 제가 올린 아이콘의 이름입니다.)

/* 본문 - more / less */

.moreless_fold { background:url(images/icon-more-circle-red.png) top left no-repeat;  padding-left:20px; color:#000;}
.moreless_top   { background:url(images/icon-less-blue.png) top left no-repeat;  padding-left:20px; color:#000;}
.moreless_body          { }
.moreless_bottom        { background:url(images/icon-less-blue.png) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}



4. 다음은 제가 늘 답답하게 생각하던 댓글 입력창 넓히기입니다.
이 스킨은 댓글 입력창이 너무 작아서 ↓↓↓↓↓ 정말 불편하더군요.

제가 누굽니까? 고객의 편의를 제일로 생각하는 '친절한 주인장' 아닙니까?
그래서 댓글 입력창을 넓직하게 바꾸기로 마음 먹었습니다.
(친절하신 세션님께서 강같은 은혜를 내리사 친절하게 가르쳐주셨습니다.)


style.css에서 다음을 찾습니다. (이 역시  Ctrl키 + F 를 이용하시면 편리합니다.)
그런데 숫자만 조정했더니 그림은 그대로라서 넓어졌는지 표시가 안나더군요.

마음 먹은 김에 그림 하나를 만들었습니다.

btn_reple_acple.jpg이라는 파일이름으로 올렸습니다.

그리고는 이것을 아까처럼 직접 올리기에서 올린 후에 이름을 변경했습니다.
원래 이름은 btn_reple.gif였는데 제가 올린 파일 이름으로 변경하고, 넓이도 넓혔습니다.

.commentWrite .submit { background:url(images/btn_reple_acple.jpg) no-repeat; width:620px; height:26px; overflow:hidden; display:block; text-indent:-1000em; border:0; cursor:pointer; margin:0 auto; }

어떻게.. 도움이 조금이라도 되었으면 좋겠네요.
캡쳐하고 잘 모르는 skin.html, style.css 편집하느라 장장.. 5시간에 걸쳐 쓴 글입니다..ㅜㅜ

정말 너무 고생해서 쓴 글이라 처음으로 제 블로그 구독을 권유드려 봅니다.
이 게시물이 도움이 되었다면 제 블로그를 한RSS로 구독해보세요.   

 

관련글
티스토리 more/less(더보기, 감추기) 기능에 대해 알아보자!
티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법
티스토리 카테고리 모두 펼치기 방법! (하위 카테고리를 모두 보여주는 방법)
트랙백(trackback)의 개념과 보내는 방법을 그림으로 알아보자!