댓글창 이미지 넣기

일반적인 댓글창은 흰색이라 보기에는 그렇게 좋지는 않습니다. 나름대로 깔끔하게 수정한다든지 아니면 이쁜그림으로 수정을 할수도 있어요. 저의 경우 좋아하는 소녀시대 중에서 티파니하고 유리...ㅎㅎㅎㅎㅎㅎ.....사진을 댓글창에 넣었습니다.

한가지더 이왕이면 방문자들이 좋아하는 문구나 , 댓글을 달수밖에 없는 애교 ?? 정도를 넣는것도 댓글을 유발하는 방법중에 한가지라고 생각합니다.

사설접고 시작합니다.
댓글창에 이미지를 넣는것은 두개를 넣을수 있습니다.
평상시 보여주는 이미지와 클릭을 했을때 즉 댓글을 쓸려고 댓글창을 클릭했을때 보여주는 이미지하고 두개가 있으면 좋습니다.

저의경우 평상시 이미지를 보시죠.
오빠 댓글은?  ㅎㅎㅎㅎㅎ 보이시죠?

댓글을 쓸려고 댓글창을 클릭하면 아래처럼 멋쟁이라는 문구와 함께 글씨가 바뀝니다. 물론 이미지도 변경이 가능합니다.

자 이제 수정해보겠습니다.
우선 댓글창에 들어갈 이미지를 먼저 만드세요. 대략 댓글창의 사이즈를 보니 저의경의 360-160 이 나오는군요. 적당한 이미지를 만드세요.
제가 사용한 이미지를 첨부할테니 사용하시려면 사용하세요. 이미지 크기는 알아서 조정하세요.

textarea-on.gif

textarea.gif

이미지가 준비가 됐다면 스킨편집창에서 수정을 합니다.
우선 스킨을 저장하시는거 있지 마세요.
css 편집창에서 textarea 를 찾아주세요. Ctrl + F 아시죠. 스킨을 크게 수정하지 않았으면  .commentWrite textarea 라는것이 있을겁니다. 없으면 만들면 됩니다.
아래 소스를 추가해주세요.

/* 평상시 댓글창 이미지 */
.commentWrite textarea.textarea{
    background:url(./images/textarea.gif) no-repeat; //배경이미지
    height:160px; //이미지 높이
    width:360px; //이미지 너비
}
/* 댓글창 클릭했을경우 보여지는 이미지 */
.commentWrite textarea:focus{
    background:url(./images/textarea-on.gif) no-repeat;
    height:160px;
    width:360px;
}

자 이제 완성입니다. 간단하죠. 평상시 보여지는 이미지와 클릭했을경우는 on의 차이이고 다 같습니다.
보다 멋진 이미지로 댓글창을 꾸며보세요.

관련글
댓글창 위로 올리기 => http://demun.tistory.com/1583