티스토리 블로그 <댓글입력창>에 배경 이미지를 넣어보자.

오늘은 티스토리 블로그의 <댓글입력창>에 배경 이미지를 넣는 방법에 대해 알아보겠습니다. 티스토리 블로그는 꾸밀 수 있는 구석이 많아 참 맘에 든다. 저는 네이버 블로그도 있지만 손쉬운 방문객은 네이버를 따라갈 수가 없긴하지만 ㅎㅎㅎ. 처음 티스토리 블로그를 개설하고 좀 헤깔린 부분이 바로 댓글창이 2개라는 점이였다. 티스토리 댓글창도 있고 LiveRe SNS 댓글창도 있고 헤깔린다. 저의 네이버 이웃이 2,700명 가량 되는데 하나 같이 "어디다가 댓글을 달면 되나요?" "여기 글 남기면 되나?" 이런 식으로 댓글이 제대로 달렸는지 확인하시는 분들이 많다. 그래서 아예 댓글창에 배경이미지를 넣어서 설명을 하려고 만들었다. 물론 댓글구걸이나 깜찍한 분위기연출 또는 재밌는 문구로 분위기 전환 등의 용도로 쓰일 수도 있으니 아직 달지 않으신 분들은 달아보시길 추천드립니다. 자 들어갑니다~

 

 

 

 

☆ 댓글 입력창 크기 확인 및 이미지 만들기 

 

먼저 자신의 블로그 댓글창의 크기를 알아야 한다. 초보분들은 캡춰를 해서 잘라내 보면 크기를 알 수 있으니 그렇게 해보시기 바란다. 참고로 필자의 댓글창 크기는 870*95다. 왜 크기를 알아야하냐면 만약 댓글창 보다 큰 이미지로 사용할 경우 글자나 이미지가 잘려 보일 수가 있기 때문이다. 그래서 댓글창 보다 약간 작게 만드는게 가장 좋다.

 

 

 

 

 

 

아래는 내 블로그에 적용되어 있는 이미지다. 무료 사진보정 프로그램인 포토스케이프를 사용해서 만들었다. 참고로 아래 이미지를 만드실 때는 투명배경으로 하고 png 타입으로 저장하시기를 추천드린다. 왜냐면 댓글창 배경을 흰색으로 고정해 버리면 다음에 블로그 배경색을 바꾸거나 댓글창 배경에 색을 약간 넣고 싶으면 다시 만들어야하니 처음 만들 때, 투명배경으로 만들어 버리면 두번 작업하지 않아도 되고 좋다. 포토샵을 쓰지 않으시는 분들께 투명배경을 만드는 방법은 앞선 포스팅(아래 링크)을 참고하세요.

 

2013/01/09 - [블로거를 위한 강좌] - 10초만에 사진에 투명한 이미지 서명을 예쁘게 넣어보자.

 

 

 

 

 

 

☆ 배경 이미지 업로드 / Skin.html 코드편집

이미지를 다 만들었으면 블로그 업로드를 해야한다. 파일 업로드는 관리자->꾸미기->HTML/CSS편집 탭으로 들어가면 아래 그림처럼 화면이 뜬다. 자신이 만든 파일을 업로드하고 업로드가 정상적으로 되었는지 확인하자. 그리고 이미지 경로를 확인하자. 자신의 블로그에 파일을 업로도 했기 때문에 http:// 처럼 절대경로로 할 필요 없이 상대경로로 하면된다. 아래 그림의 경로는 ./images/rp.png 되시겠다.

 

 

 

 

 

이제 skin.html 에서 댓글창 부분의 코드를 찾자. Ctrl+F 를 이용해서 rp_input_comment 를 검색하자. 검색결과 아래처럼 댓글입력창 코드를 찾았다. 이제 저 코드에 이미지 경로를 지정해주고, 클릭했을 때 어떤 효과를 줄 것인지를 지정하면 된다.

 

 

 

 

 

☆ 클릭하면 이미지가 사라지고 다른 곳을 클릭하면 다시 이미지가 나타나게 해보기.

아래 코드에서 붉은색 파일이름 부분을 자신이 업로드한 파일의 이름으로 바꾸면된다. 아래 코드를 복사해서 위 그림의 밑줄 친 부분의 코드와 바꿔주면 된다. 아래 코드를 직접 입력하기 귀찮으니 '댓글창.txt' 파일을 다운받아 복사해서 쓰시면된다. 참고로 아래 코드는 댓글창을 클릭하면 이미지가 사라지고 다른 곳을 클릭하면 다시 이미지가 나타나는 코드다.

 

댓글창.txt

 

<textarea name="[@@_rp_input_comment_@@]" rows="6" cols="50" style="background:url(./images/파일이름) no-repeat right; background-color:#FFFFFF;" onFocus="this.style.backgroundImage='';" onBlur="if(this.value==''){ this.style.backgroundImage='url(./images/파일이름)'; }"></textarea>

※ 위 코드에서 @를 #으로 바꿔야합니다.

 

 

아래 그림은 skin.html에 위 코드를 적용한 화면이다. 밑줄친 분은 자신이 업로드한 이미지 경로니 참고하시기 바란다.

 

 

 

 

 

 

☆ 다른 곳을 클릭했을 때 이미지가 다시 나타나지 않게 하려면?

 onBlur="if(this.value==''){ this.style.backgroundImage='url(./images/파일이름)'; }" 부분을 지워주면 된다. 코드는 아래와 같다. 필요한 분은 아래 txt 파일을 받으시면된다.

 

사라지고 다시 나타나지 않는 댓글창.txt

 

<textarea name="[@@_rp_input_comment_@@]" rows="6" cols="50" style="background:url(./images/파일이름) no-repeat right; background-color:#FFFFFF;" onFocus="this.style.backgroundImage='';" ></textarea>

※ 위 코드에서 @를 #으로 바꿔야합니다.

 

 

 

 

 

하나 더, 댓글 입력창을 클릭해도 이미지가 사라지지 않게 하려면?

그럴 때는 위 코드에서 다음 코드를 삭제해 주면된다. onFocus="this.style.backgroundImage='';" onBlur="if(this.value==''){ this.style.backgroundImage='url(./images/파일이름)'; }" 이 부분을 삭제해주면 된다. 코드는 아래와 같다.

 

클릭해도 사라지지 않는 댓글입력창.txt

 

<textarea name="[@@_rp_input_comment_@@]" rows="6" cols="50" style="background:url(./images/파일이름) no-repeat right; background-color:#FFFFFF;" ></textarea>

※ 위 코드에서 @를 #으로 바꿔야합니다.

 

 

 

 

최대한 쉽게 적으려 했지만 더 헤깔리게 하지 않았나 모르겠다. 댓글창 이쁘게 꾸며보세요.