본문 바로가기
블로그

티스토리 댓글창 배경 이미지 넣기

by e마루 2010. 10. 12.
블로그에서 댓글은 매우 중요한 역활을 합니다. 포스팅을 하는 블로거에게는 기쁨을 선물하고 검색엔진에서는 상위에 랭크 될 수 있는 점수를 부여합니다.
이웃이 별로 없는 블로거에게 있어 많은 댓글은 부러움의 대상인 것 같습니다.

댓글을 많이 달리게 하는 가장 좋은 방법은 다른 블로그에 찾아가 꾸준히 댓글을 달고 이웃을 만들어 나가는 것 입니다.
그밖에는 여러가지 기술적인 팁들이 있는데 그중에 하나가 댓글창 배경에 댓글을 바라는 이미지를 배경사진으로 넣어 두는 것입니다.
지금 제가 쓰고 있는 댓글창입니다. 하얀색 입력창 보다는 조금이라도 관심을 불러 일으킬 것 같습니다.

이 팁은 꼬마낙타님(블로그 보러가기)의 팁을 적용해 보면서 작성한 것입니다.

 댓글창에 배경 이미지 넣기

먼저 블로그의 댓글창 크기를 확인합니다. 배경이미지가 짤리는 것보다는 딱 맞춰서 나오는 것이 보기 좋겠죠.
화면을 캡쳐해서 사이즈를 측정하는 것이 가장 확실하겠죠?
지금 사용하는 댓글창이 너무 작아서 이미지를 넣기 힘들다면 댓글창의 크기를 키워주시고 사이즈를 재는 것이 좋습니다.
관리자화면 > 스킨 > HTML/CSS편집 으로 들어갑니다. Ctrl + F를 눌러 rp_input_comment를 찾습니다. 댓글창과 관련된 소스입니다.
박스친 rows="10"이 댓글창의 높이를 결정합니다.(스킨마다 다릅니다) 소스그대로 10개 줄이 들어가는 창이기 때문에 창의 높이를 늘리기 위해서는 10 대신 높은 수를 써주면 됩니다.

댓글창의 사이즈를 측정했다면, 이제 그 사이즈에 맞는 이미지를 만들어야 합니다. 이미지는 최대한 시선을 끌 수 있는 것이 좋습니다.
네이버에서 "댓글"이라는 검색어로 이미지 검색만 하셔도 재미있는 이미지들을 구하실 수 있습니다. 오유나 디씨 같은 곳에는 더욱 많겠죠?

이미지는 포멧을 가리지 않습니다. 즉 GIF애니메이션도 가능합니다.
저는 Daum의 소녀시대 화면보호기 영상을 GIF애니메이션으로 제작하여 사용하였습니다.
관련글동영상(avi,flv)을 Gif애니메이션(움짤)으로 만들기


관리자화면 > 스킨 > HTML/CSS편집 으로 들어간 후,
1. 파일업로드 탭에서 
2. 이미지 파일을 업로드를 합니다.
3. 파일목록에 업로드한 파일을 선택합니다.
4. 좌측 미리보기 화면에 이미지가 보여집니다.
5. 미리보기 이미지에서 오른쪽 클릭하여 속성을 봅니다.

속성창에서 주소를 복사합니다.

이제 HTML/CSS편집의 skin.html로 돌아와서 처음 댓글창 크기를 조절했던 댓글창 소스인 rp_input_comment를 다시 찾습니다.
 <textarea name="" rows="10" cols="50"></textarea>

위의 소스를 아래의 소스로 변경해 줍니다.

<textarea style="background-image:url(복사한 이미지 경로);background-repeat:no-repeat; background-position:left" onClick="this.style.backgroundImage=''" name="" rows="10" cols="50"></textarea>

복사한 이미지 경로 파일업로드>이미지 미리보기의 속성에서 복사한 주소를 써 넣습니다.
소스 변경 후, 미리보기로 확인하고 저장을 누르면 완료됩니다.