JKtuts

티스토리 댓글박스에 그림을 넣자!! 본문

IT&컴퓨팅/블로그

티스토리 댓글박스에 그림을 넣자!!

카기 2009. 8. 19. 08:16

늘은 티스토리 댓글창에 그림을 넣어볼까 합니다.
실은 어제 이미 저는 여기저기 뒤적거려서 넣었습니다만..
혹시 어려워 하시는 분들이 있을거 같아서 한번 적어 봅니다. 쉽게 쉽게 ~
평소 허전해 보이던 댓글박스가 뭔가 느낌이 달라졋어요
아주 만족스러운 ^^;; 스스로 만족하고 있습니다.

제가보고 따라한 블로그는 여기에요 - 누구나 글을 쓸수 있지만..

그럼 한번 시작해 볼까요 ^^ GO~

step1
제일 처음 하셔야 할일은 이미지를 만들어야 겠지요 요건 따로 설명 없이 갈께요 이미지를 만들거나 구하셔서 적당한 크기로 자르셔야 합니다. 자신의 댓글 박스 크기에 맞추셔야 합니다.

step2
다음은 이미지를 업로드 하셔야지요 "관리창->스킨->파일 업로드" 요기서 업로드가 가능합니다.
로드를 하시면 이미지의 주소는 이렇습니다.
"images/업로드하신 파일이름" 
저는 파일이름이 textbox.jpg이니까 images/textbox.jpg가 제 이미지 주소입니다. 

step3
업로드 하셧으면 이제 style.css를 편집 해야 합니다.
일단 "관리->스킨->style.css창" 에서 .commentWrite textarea 를 Ctrl+F로 찾으시면 됩니다.
.commentWrite textarea           
{ font:11px dotum,tahoma; margin-bottom:5px;width:99%;  height:100px;}
이부분 입니다. 이부분에서 이제 백그라운드 이미지를 넣어주시면 됩니다.
이부분에 보면 height:100px라고 있는데요 이부분은 높이 설정 입니다. 이미지를 제작하실대 이왕이면 저높이를 맞춰서 제작 하시면 더 깔끔하게 보이겠지요

.commentWrite textarea           
{ font:11px dotum,tahoma; margin-bottom:5px;width:99%;  height:100px;
background:url(images/textbox.jpg) no-repeat right;
background-color:white;
}
자 이부분을 추가 해주세요
추가 하실때 빨강색 부분 (업로드한 이미지 파일) 을 자신의 파일 이름으로 변경 해주세요

자이제 저장하시면 모든게 끝나네요 간단하죠?
깔끔하고 뭔다 튀는 느낌의 댓글박스를 만들어 봐요 ^^/


Tistory Comments