파란토마토 블로그

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

<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; }