티스토리 댓글창에 사진넣기

티스토리 댓글창에 사진넣기


1. 댓글창의 사이즈를 확인 한 후 본인이 원하는 이미지를 제작. 

댓글창의 사이즈는 각각의 블로그마다 조금씩 다르게 적용하는 경우가 있으니 
화면캡쳐프로그램을 이용해서 댓글영역의 정확한 사이즈를 확인합니다.
 
제 블로그의 댓글창크기는 660*168로 기본사이즈입니다.  
일단 짤방사진을 이용해서 아래처럼 댓글창 이미지를 급조하였습니다.

2. 제작한 이미지 업로드 및 주소확인

저는 개인계정이 있기때문에 계정에 만든 사진을 업로드하였는데 계정이 없으신 분들은
[html/css편집]에서 [파일업로드]로 사진을 올린 후 업로드된 파일목록에서 방금올린 사진파일을 찾은 후 [마우스 우클릭]-[속성]을 통해서 주소를 확인해줍니다.



3. html/css 편집에서 소스삽입.

ctrl+F 키를 이용해서  "##_rp_input_comment_##   <- 내용을 찾습니다. (한군데밖에 없습니다)

위 내용이 포함된 소스   <textarea~~> 에서부터   </textarea>까지를 아래의 소스로 바꿉니다.

<textarea style="background-image:url(본인이만든사진주소);background-repeat:no-repeat; background-position:center" onClick="this.style.backgroundImage=''" name="" rows="10" cols="50"></textarea>

* 위 빨간글씨에는 당연히 사진주소를 입력해주시면 됩니다.
* 위 소스는 onClick 이벤트를 통해서 댓글창에 마우스를 클릭하면 사진이 없어지도록 한 것입니다.
* 위소스는 방명록에서도 동일하게 적용됩니다.

사진이 없어지지않도록 하기위해서는
onClick="this.style.backgroundImage=''  를삭제해주시면 되고 

다른사진이 나타나게 하기위해서는
onClick="this.style.backgroundImage=''  에서 ''따옴표사이에 또다른 이미지주소를 입력해주시면 됩니다.

---

완성된 작품을 한번 볼까요?
ㅠㅠ 우측으로 살짝 여백이 존재하네요ㅎㅎ 다시 만들어야겠습니다~