[스킨 가이드] simple gray 무료버전 사이드바에 블로그 이미지 넣기
simple gray 2.0+ 사이드바
simple gray 사이드바에 블로그 이미지 넣는 방법을 찾으시는 분이 종종 계셔 가이드를 작성합니다.
방법은 '[스킨 가이드] simple gray v1 - 본문 우측 사이드바 수정'과 거의 같습니다.
※ 스킨 수정은 티스토리 관리자 화면에서 HTML을 직접 수정하는 것보다 텍스트에디터를 사용하여 편집하는 걸 추천합니다.
skin.html 파일 편집
295번 째 줄의 <div id="right">
다음에
<div class="widget"> [##_blog_image_##] </div>
를 추가해주세요.
하지만 이렇게만 추가하게 되면 이미지가 좌측정렬돼서 보기가 안 좋습니다.
이미지를 관리를 수월히 하기 위해 class를 추가해줍시다.
<div class="widget blog_image"> [##_blog_image_##] </div>
blog_image 라는 class를 추가해주세요.
style.css 파일 편집
blog_image class를 추가했으니 해당 class 속성을 style.css 파일에 넣어줘야합니다.
style.css 파일 89번 째 줄을 보시면 #container #content #right .widget div li { list-style: none; padding: 0; font-size: 12px; line-height: 220%; }
속성이 있습니다.
이 소스 다음 줄에 아래 소스를 추가해주세요.
#container #content #right .blog_image { text-align: center; line-height: 100%; }
text-align: center;
속성으로 이미지를 가운데 정렬 시켜주고, line-height: 100%;
속성으로 이미지 하단에 여백이 추가되는걸 막습니다.
만약 이미지 크기를 임의로 조절 하고싶다면,
#container #content #right .blog_image img { width: 값; height: 값; }
위 소스를 새로 추가하여 width와 height 값을 정해주면 됩니다.
기본적으로 이미지 가로 길이는 사이드바에 맞게 자동으로 조절됩니다.
사이드바에 블로그 이미지를 추가한 모습