하츠의 꿈

[블로그팁] 댓글 박스에 이미지 넣기 - 티스토리/텍스트큐브 본문

엔지니어스 마인드

[블로그팁] 댓글 박스에 이미지 넣기 - 티스토리/텍스트큐브

명섭이 2009. 7. 4. 23:50

어떤 블로그를 방문해서 댓글을 쓰려고 보면 박스 안에 그림이 있는 경우가 있다.
어떻게 넣었을까? 신기하네?

blog.bsmind.co.kr의 댓글입력 박스

Web2.0에 맞춰서 코딩이 되어 있기에 소스에서 댓글박스(textarea)를 찾기가 어려울 줄 알았다. 하지만 찾아보니까 쉽게 눈에 띄어서 내 블로그에 이미지를 넣었고 그 방법을 설명하려고 한다.

일단, 박스에 넣을 이미지를 구해야 한다.


blog.bsmind.co.kr의 댓글입력 박스의 이미지는 어딘가에서 퍼온 이미지이며, 원저작자가 누구인지 몰라서 허락을 받지 못한 이미지이다. 텍스트큐브의 댓글입력 박스의 높이는 약 126px이며, 티스토리의 댓글입력 박스의 높이는 130px 이다. 높이는 각자의 블로그마다 다를 수 있다.

1. 텍스트큐브

관리자화면 -> 꾸미기 -> 스킨편집 화면으로 이동한다. 하단의 [파일 업로드]에서 구한 이미지를 업로드한다. 

텍스트큐브의 파일 업로드 부분

[텍스트큐브의 파일 업로드 부분]

파일명의 경로는 "./images/업로드파일명" 이다.
만약 파일명을 "comment_bgimage.jpg" 라고 해서 업로드했으면, 경로는 "./images/comment_bgimage.jpg" 가 된다.

이제 업로드한 파일을 [style.css]에서 댓글입력 박스에 적용하면 된다.
[style.css]에서 .tt-input-div textarea 부분이 댓글 입력 박스 부분이다. 눈으로 찾기가 어려우니까 Ctrl-f 해서 익스플로러의 [찾기]를 이용하면 편리하다. 조금씩 다를 수 있지만 대부분 아래와 같이 내용이 기재되어 있을 것이다. 

.tt-input-div textarea {
  width:75%;
  height:120px;
  overflow:visible;
}

여기에 아래와 같이 백그라운드 이미지로 넣으면 설정이 끝난다.

.tt-input-div textarea {
  width:75%;
  height:120px;
  overflow:visible;
  background:url(./images/comment_bgimage.jpg) no-repeat right;
  background-color:#FFFFFF;
}

위에서 말한 것처럼 이미지 파일은 자신이 올린 이미지 파일명으로 넣어야 한다. 또한 올린 이미지에 맞게 박스의 배경색도 맞춰 주면 더 깔끔하다.

(background-color:#FFFFFF;)

style.css 영역에 적용한 화면

[style.css 영역에 적용한 화면]

 

 

2. 티스토리

관리자화면 -> 스킨 -> "HTML/CSS 편집" 화면으로 이동한다. 텍스트큐와 마찬가지로 댓글입력 박스에 넣을 이미지를 [파일 업로드] 탭에서 업로드한다. 

[티스토리의 파일 업로드 부분]

텍스트큐브와 마찬가지로 파일명의 경로는 "./images/파일명" 이 된다. 만약 파일명을 "comment_bgimage.jpg" 라고 해서 업로드했으면, 경로는 "./images/comment_bgimage.jpg" 가 된다.

이제 업로드한 파일을 [skin.html] 영역에 적용하면 된다. 텍스트큐브는 style.css 파일에 적용했지만, 티스토리는 [skin.html]에 적용을 해 보자

[skin.html] 편집영역에서 "##_rp_input_comment_##" 라고 된 부분을 찾는다.
티스토리는 댓글 입력 박스의 이름의 치환자를 "##_rp_input_comment_##"으로 사용한다. 눈으로 찾기가 어려우니까 Ctrl-f 해서 익스플로러의 [찾기]를 이용하면 편리하다. 조금씩 다를 수 있지만 대부분 아래와 같이 내용이 기재되어 있을 것이다. 

<textarea name="" rows="10" cols="50"></textarea>

여기에 style 형식으로 이미지를 넣으면 된다.

<textarea name="" rows="10" cols="50" style="background:url(./images/comment_bgimage.jpg) no-repeat right; background-color:#FFFFFF;"></textarea>


끝~~!

Comments