댓글이미지 - 티스토리 댓글 창에 이미지 넣기, 꾸미기

티스토리 댓글 창에 이미지 넣기, 꾸미기

 

블로그 포스팅을 하다보니, 가끔씩 남겨지는 댓글을 통해서 힘을 얻을때가 간간히 있습니다.
그렇다면, 댓글 창에 이미지를 꾸미면 조금 낳아질까요??

댓글^[각주:1]은 올라오는것은 별반 차이는 없으나, 이미지를 넣어 꾸며놓으니 괜~찮네요 ^^ , 워낙 말주변이 없어서 글을 남겨주셔도 어떤말을 써야할지 고민하고 있을꺼예요 ㅋ

 블로그 댓글창에 배경이미지 처리를 하여 나타낸 모습

그럼 지금부터 티스토리 블로그에 적용해 보도록 하겠습니다. 포토샵을 사용하실 수 있으면 좀더 재미있게 꾸밀수도 있습니다. 혹시 포토샵에 대해서 문의 하시면 잘 모르지만, 포스팅 해보도록 하겠습니다.

관리자 > HTML/CSS 편집을 클릭한 후 '파일 업로드' 탭을 선택을 합니다.

아래 이미지의 추가 버튼을 누르고 작업이 된 이미지를 업로드 합니다.
나의 블로그에 맞는 사이즈는 590x150 px 입니다.

포토샵으로 작업이 완료된 이미지를 업로드 하는 방법.

이미지를 업로드 했으니 이제는 소스코드를 수정 합니다.

HTML/CSS 편집 클릭하시고, Ctrl + F 하셔서 rp_input_comment  입력하고 검색 합니다.

rp_input_comment를 검색해서 찾은 다음 소스코드를 수정한다.

붉은색 박스안의 row="10" cols="50"을 통해 댓글창 사이즈를 조절하시면 됩니다.

아래 소스코드를 다운받아서 <taxtarea name= ............................</textarea>까지를 덮어 씌워줍니다.

<textarea style="background-image:url(./images/comment.png);background-repeat:no-repeat; background-position:left" name="" rows="10" cols="74"></textarea>

빨간색으로 된 부분을 자신의 블로그에 맞게 수정해 주세요!! 저는 이미지 명과 cols의 길이를 수정 하였습니다.

댓글창_html코드.txt

혹시, 소스코드 중에 onClick="this.style.backgroundImage=''" 스크립트가 포함된 경우가 있습니다. 이 코드는 댓글 입력시에도 댓글창 배경 이미지를 보이게 하려면 삭제해 주세요!

여기까지 하시고 적용이 되시는 분들도 있구요. 그렇지 않으신 분들은 style.css 에서 소스코드를 수정해 주셔야 합니다.

Ctrl + F 하셔서 textarea 입력하고 검색 합니다. 아래 코드를 참고해서 이미지 사이즈에 맞게 사이즈를 수정해 주시면 적용이 됩니다.

.article_action .textarea textarea {width:/*@post-width:-48*/590px/*@*/; height:150px; padding-left:5px; border:1px solid #e1e1d5; font-size:1em; font-family:nanum, Dotum, 돋움;}

티스토리 댓글 창에 이미지 적용 성공하시길 바랍니다.

읽어 주셔서 대단히 감사합니다 ^^

 

1. [명사] 인터넷에 오른 원문에 대하여 짤막하게 답하여 올리는 글. [본문으로]