[스킨 가이드] simple gray 무료버전 사이드바에 블로그 이미지 넣기

2015. 1. 29. 18:17, 티스토리/simple gray, wallel

simple gray 2.0+ 사이드바

simple gray 사이드바에 블로그 이미지 넣는 방법을 찾으시는 분이 종종 계셔 가이드를 작성합니다.

※ 스킨 수정은 티스토리 관리자 화면에서 HTML을 직접 수정하는 것보다 텍스트에디터를 사용하여 편집하는 걸 추천합니다.

295번 째 줄의 <div id="right"> 다음에

				<div class="widget">
					[##_blog_image_##]
				</div>

를 추가해주세요.

하지만 이렇게만 추가하게 되면 이미지가 좌측정렬돼서 보기가 안 좋습니다.

이미지를 관리를 수월히 하기 위해 class를 추가해줍시다.

				<div class="widget blog_image">
					[##_blog_image_##]
				</div>

blog_image 라는 class를 추가해주세요.

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 값을 정해주면 됩니다.

기본적으로 이미지 가로 길이는 사이드바에 맞게 자동으로 조절됩니다.

사이드바에 블로그 이미지를 추가한 모습

wallel