티스토리 사이드바에 이미지 배너 넣기

기존 사용하던 스킨에서는 사이드바에 아이디와 블로그 소개가 떠 있었는데 다른 블로그들은 배너같은게 떠 있길래 편집을 해보기로 했다.

일단 사이드바에 넣을 이미지의 디자인을 해 보았다. 블로그 이름은 She in the blog 이지만 블로그 주소는 sheblog.tistory.com 이므로 she blog가 강조되도록 만들었다.

그림의 크기가 주어진 너비보다 크면 잘려서 나오기 때문에 파일을 만들 때 크기도 고려해서 만드는게 좋다.

내 스킨에서는 그림 크기는 가로가 240 px 정도면 적당했다.

사이드바에 배너를 넣는 방법은 여러가지가 있는데 나는 html 을 편집해서 넣었다.

[관리] - [꾸미기] - [HTML/CSS 편집] 을 누르면 아래와 같은 화면이 나온다.

<s_sidebar> 를 찾는다. 여기서부터 사이드바에 대한 코드가 시작된다.

지금 이미 코드를 넣어놓았는데 <!-- 이미지 배너 --> 라고 되어 있는 부분이 넣어야 할 코드이다. 나는 사이드바에 제일 위에 배너를 집어넣고 싶기에 <s_sidebar> 바로 아래에 코드를 삽입했다.

◎ 삽입 코드

<s_sidebar_element>

<!-- 이미지 배너 -->

<div class="sidebox">

<div align="center">

<a href="http://sheblog.tistory.com/">

<img style="WIDTH: 238 px; HEIGHT: 164 px" src="https://t1.daumcdn.net/cfile/tistory/99A4A23359944D2E11" type="w2&quot;" border="0" />

</a>

</div>

</div>

</s_sidebar_element>

노랗게 강조한 부분이 수정해야 할 부분이다.

제일 첫 수정할 곳은 배너를 클릭했을때 이동할 주소를 넣어주면 된다.

두 번째와 세 번째는 내가 넣은 이미지의 가로와 세로 크기를 넣어준다.

네 번째 부분에는 내가 넣을 이미지가 저장된 주소를 넣어준다. 나는 이미지를 포스팅 한 후 포스팅 된 이미지의 주소를 복사해서 넣어주었다. 이미지의 주소는 글 발행 후 <마우스 우클릭>을 통해 알 수 있다.

<s_sidebar_element>는 사이드바에 넣을 모듈의 코드를 감싸서 위 아래에 넣어주면 된다.

<div class="sidebox">는 내가 이용한 스킨에서 모듈마다 적당한 공간을 주도록 되어있길래 사용했는데 <div id="imageBanner" class="widget"> 로 넣어도 되더라.

<div align="center">는 이미지 가운데 정렬. 꼭 넣을 필요는 없다.

참고한 블로그는 Unikys 님의 블로그로 <http://unikys.tistory.com/365> 여기에 더 다양한 방법이 나와있으므로 위의 방법이 원하는 방법이 아닌 경우 이 글을 참고해도 좋을 것 같다.