블로그 댓글창에 배경그림 넣기

배경이 들어간 댓글창

배경을 넣은 댓글창 그림


댓글은 블로그 운영의 꽃이 아닐까?
블로그에서 댓글은 블로그 운영의 재미를 느끼게 하고 활발한 포스팅의 힘이 되기도 하죠..
파워블로거나 저널 못지 않은 금펜의 블로그 외에는 댓글 받기가 너무도 힘들죠..
오죽하면 악플이 무플보다 낫다라는 말이 생겼을까요..

그래서 싸이에서 많이 유행했던.. 댓글 유도그림이 생각나서 이렇게 댓글창에 배경을 넣어봤는데,
마침 블로그 댓글 입력창에 배경그림 넣는 방법을 궁금해 하는 분도 계셔서 포스팅을 하게 되었습니다.


이미지 준비하기

다른 블로그 팁에 비해서 비교적 쉬운 팁입니다.
먼저 댓글 입력창에 배경으로 넣을 이미지를 준비를 합니다.
이미지의 크기는 댓글입력창의 크기에 맞추어서 해야겠죠?

이미지 업로드

배경 이미지가 준비가 되었으면 이제 이미지를 스킨 직접올리기를 통하여 블로그에 업로드를 합니다.
업로드하는 방법은

블로그 관리자 페이지에서 스킨>HTML/CSS 편집을 선택합니다.



파일업로드를 클릭하여 파일을 업로드 한다음 적용을 누릅니다.
티스토리는 이미지를 업로드하면 자동으로 images 폴더에 업로드 됩니다.
(제가 업로드한 파일은 ccoma_reply_bg.jpg 입니다.)




skin.html 수정하기

이제 이 이미지 URL을 이용하여 배경을 넣습니다.
관리자 페이지의 스킨페이지에서 HTML/CSS 편집을 누른다음
찾기(Ctrl + F)를 이용하여 rp_input_comment 을 찾은 다음 다음과 같이 수정을 하시면 됩니다.

< 수정전 >

<textarea name="[ ##_rp_input_comment_## ]" rows="5" cols="50">
</textarea>

< 수정후 >
<textarea style="background-image:url(./images/ccoma_reply_bg.jpg);background-repeat:no-repeat; background-position:right" name="[ ##_rp_input_comment_## ]" rows="5" cols="50">
</textarea>

파란색 부분이 미리업로드한 파일을 댓글 입력창의 배경으로 표시하는 부분입니다.

  background-position: right  -> 이미지를 오른쪽으로 표시하는 옵션
  background-repeat: no-repeat  -> 배경이미지가 반복되지 않고 한번만 표시되도록 하는 옵션

위와 같이 수정을 했으면 혹시 오류가 날수도 있으므로 미리보기로 먼저 확인을 해보세요.
정상적으로 나오는것을 보고 저장하기를 클릭하면 끝입니다. ^^

간단하죠?
신고

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. BlogIcon njhlove 2010.03.04 22:17 신고  댓글주소  수정/삭제  댓글쓰기

    이 방법 궁금했었는데... 감사합니다..^^a
    저도 방명록에도 한번 시도해봐야 겠네용 ~

  3. BlogIcon 타사비 2010.03.14 18:51 신고  댓글주소  수정/삭제  댓글쓰기

    이것도 일단 따라해봐야겠습니다 ^^

  4. BlogIcon 피아노블로그 2010.03.26 12:53 신고  댓글주소  수정/삭제  댓글쓰기

    하다가 실패했어요 ㅠㅠ

  5. BlogIcon loveisstory 2010.04.06 02:18 신고  댓글주소  수정/삭제  댓글쓰기

    댓글창에 클릭하면 사진 사라지게 하는방법좀 가르쳐주세요 ㅠ.ㅠ 부탁드립니다.

    • BlogIcon Kay~ 2010.05.06 18:11 신고  댓글주소  수정/삭제

      음.. 그것은 배경을 변경해야 하는데..
      자바스크립트로 해야할것 같습니다.
      제가 지금 시간이 없는관계로 바로 방법을 일러드릴 수가 없을듯 하네요!

  6. BlogIcon 코에도 2010.04.17 16:11 신고  댓글주소  수정/삭제  댓글쓰기

    와 고맙습니다.

  7. BlogIcon lhb1407 2010.04.17 23:39 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보이군요!
    덕분에 개미한마리 키우고있습니다. :)

  8. BlogIcon 베 니 2010.05.03 07:57 신고  댓글주소  수정/삭제  댓글쓰기

    정말 감사해요. 이렇게 좋은 블러그 왜 이제야 보고 있는 건지...

  9. BlogIcon 푸른 마음 2010.05.06 15:46 신고  댓글주소  수정/삭제  댓글쓰기

    아 이렇게 하는 것이었구만...

  10. BlogIcon 코요 2010.05.29 16:38 신고  댓글주소  수정/삭제  댓글쓰기

    오에! 이 글 참고하여 제 블로그에도 적용됬습니다. 감사합니다!
    추신 : 파리

  11. BlogIcon 새벽두시♬ 2010.06.01 23:01 신고  댓글주소  수정/삭제  댓글쓰기

    댓글에 그림을 넣을 수 있다는걸 이제 알았습니다.
    무려 2년전 포스트네요 ㄷㄷㄷ
    블로거 인생 헛살았네요.. ㅠ

  12. BlogIcon 아르센 뤼펭 2010.06.18 21:47 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다.
    당장 키드사진 넣어야지~
    뤼팽사진이 좋은게 없어서...
    명탐정 코난의 키드라도...

  13. BlogIcon Kooby 2010.07.01 07:17 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. ㅅㅅ
    성공했네요 ㅋㅋ;

  14. BlogIcon 마이다스의세상 2010.08.15 23:58 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎㅎ [ ##을 위에 있는데로 띄어쓰기가 있는상태에서
    해놓구 안된다고 이상하다고 생각하고 있었네요 ㅎㅎ
    초보 티 다 내는 마이다스 ㅎㅎ

  15. Min 2010.08.19 23:31 신고  댓글주소  수정/삭제  댓글쓰기

    오...나중에 꼭 해봐야겟네요 ..ㅋ

  16. BlogIcon 출가녀 2010.10.29 17:02 신고  댓글주소  수정/삭제  댓글쓰기

    오호~ 항상 궁금했는데 그 방법이 이렇게 가까운 곳에 있었다니~ㅎㅎㅎ
    시도해 봐야겠어요~ 이미지 고르는게 문제네요~*^^* 감사합니다~*

  17. BlogIcon 싱긋^ 2010.12.08 18:55 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사해요 ㅋㅋ 덕분에 쉽게 따라했어요.
    시험적으로 아무렇게나 만든 이미지 대충 넣어봤는데
    허접해서 나중에 이미지만 따로 수정해봐야겠어요 ㅋㅋ

  18. BlogIcon vita500~★ 2011.03.01 16:42 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다^^ 제 블로그에도 이제 이 그림보고 많은 분들이 댓글을 달아 주시면 큰 힘이 될것같아요^^ 블로그운영 파이팅!!!!

  19. BlogIcon 즐기고마운삶 2011.04.02 16:13 신고  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다:) sorange님의 글을 보고 천천히 따라했더니 정말 손쉽게 되네요^^

    제 것도 한번 구경 하러 오시겠어요??ㅎ

  20. BlogIcon 슬마로72 2011.05.23 21:47 신고  댓글주소  수정/삭제  댓글쓰기

    ^^;;;시간이 나서 댓글창에 이미지를 넣었습니다.
    아주 유용한 팁인데 아직 미숙해서 제대로 사용을 못하네요
    댓글창 항상 오픈 할려면 어떻게 해야하는지 알려주시면 대단히 감사하겠습니다.^^

  21. BlogIcon Wise사툰 2012.02.07 17:13 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다 !