티스토리 댓글박스를 배경이미지로 꾸며보자 - 블로그스킨

티스토리 댓글박스를 배경이미지로 꾸며보자 - 블로그스킨

밋밋한 블로그 댓글박스에서 깔끔하고 개성있는 댓글박스를 꾸미는 블로그 스킨만들기

티스토리 블로그의 댓글박스에 간단한 HTML소스 편집으로 배경이미지를 넣어 꾸며보자~

일단 티스토리 블로그의 댓글박스를 살펴봅시다. 댓글박스는 말그대로 자신의 포스트 최하단에 있는 댓글을 담는 박스폼으로 방문자들이 자신의 포스트를 읽고 댓글을 쓰는 곳입니다. 여기서 단순한 댓글박스보다는 호소력있거나 개성있는 이미지를 넣어 꾸민다면 좀 더 댓글을 쓰고 싶어지지 않을까요?

내 블로그스킨에 어울리는 나만의 티스토리 댓글박스 배경이미지를 만들어 봅시다.

▲ 상단에 보이는 이미지는 제가 직접 그린 단순한 그림입니다. 특별한 뜻은 없지만 나만의 댓글박스 스킨을 만들었다는데 의의가 있지 않겠습니까^^위와 같이 자신만의 이미지를 준비하고 등록하도록 합니다.

일단 티스토리 블로그의 댓글박스 규격을 알아야합니다. 블로그 스킨마다 댓글박스의 크기가 다르기 때문에 몇번의 테스트를 통해 크기를 짐작하는 것이 좋습니다. 저 같은 경우는 가로 690px  세로 100px를 썻는데 위가 조금 잘리더군요.

블로그 댓글박스의 가로규격은 블로그스킨의 가로규격보다 -10 정도가 적당한 것 같군요. 제 블로그스킨 가로는 700px 입니다. 포토샵이나 이미지툴을 이용해 댓글박스 규격에 맞도록 이미지 디자인을 합니다.

▲ 이미지작업이 끝났다면 자신의 블로그 관리자페이지로 이동합니다. 티스토리 새 관리 모드입니다. 이전관리 모드를 쓰시는 분들이라면 이미지가 조금 다를수도 있습니다. 상단메뉴에 스킨 -> HTML/CSS 편집을 클릭합니다.

▲ 그럼 티스토리 블로그에 이미지업로드를 해보도록 하겠습니다. 티스토리를 어느정도 운영해 보신 분이라면 다 아실테지만 티스토리에는 웹FTP와 같은 별도의 이미지업로더가 있습니다. HTML/CSS편집 내에 파일업로드라는 메뉴가 보이시나요?

HTML소스 편집중에 파일업로드를 눌러 이미지를 등록하더라도 HTML소스가 그대로 유지됩니다. 소스편집 중에 꼭 저장을 누르고 파일업로드로 넘어가고 하실 필요는 없습니다.

▲ 이제 파일 업로드를 누르고 자신이 준비한 댓글박스 배경이미지를 등록합니다. 위 이미지에 보이는 파일업로드 버튼을 클릭하면 익숙한 이미지 등록창이 뜹니다. 저는 comment_bg.jpg 로 이미지명을 정했습니다.

어렵지 않게 이미지를 등록할 수 있습니다. 이제 이미지의 주소는 images/comment_bg.jpg 가 됩니다.

▲ 이제 이미지도 웹에 올렸으니 다시 HTML/CSS 편집으로 넘어옵니다. 수정할 부분은 skin.html 입니다. HTML소스 편집이 어렵다고 생각하지 마시고 천천히 따라해 봅시다^^

▲ skin.html 안에 마우스 커서를 놓고 단축키 CTRL+F(찾기)를 누릅니다. 그럼 위와 같이 작은 창이 뜨게 되겠죠? 이제 댓글박스에 관련된 소스를 찾아야 합니다. 이 소스 역시 티스토리 블로그스킨마다 위치나 모양이 다르더군요~ 공통적인 부분을 찾아봤더니 input_comment 입니다. 위와 같이 입력하고 다음찾기를 클릭합니다.



기존소스

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



기존 소스에서 이 부분에 소스를 삽입하면 됩니다.

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


붉은색으로 표시된 부분은 필수입력사항이며, 보라색으로 표시된 부분이 이미지 주소입니다. 자신이 업로드한 이미지의 주소를 그대로 적으면 됩니다. 말씀드렸듯이 블로그스킨마다 소스가 다르기 때문에 잘 확인하고 수정해야합니다. 간단히 보자면 rows 와 cols 부분이 끝나는 부분에 넣으시면 됩니다.

항상 skin.html 을 이용해 소스를 편집할 경우 미리보기를 생활화합시다.

▲ 이렇게 수정되었습니다. 수정 전과 후의 이미지를 확인하시고 어떻게 삽입되었는지 어떤 부분에서 수정이 된 것인지 잘 확인하시고 적용하도록 합니다.



새벽에 글쓰고 있네요ㅜㅜ 졸립고 피곤합니다..혹시 괜찮은 내용이었다면 댓글과 추천을 부탁드립니다.
마우스 한번 까딱..세상을 가져라-꽁기