A. 스타일시트 수정(블로그 본문 폭 넓히기)
스타일시트 수정해서 본문 폭 넓히기
블로거 꾸미기 메뉴 > html편집 > 스킨수정 내용 중에서, 스타일시트 부분을 고칩니다.
테마(스킨) 마다 모두 조금씩 다릅니다.
보통 wrapper 부분 크기를 늘리면 됩니다. 사이드바 부분은 내버려 둡니다.
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% 'Times New Roman', Times, FreeSerif, serif;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
을
#outer-wrapper {
width: 1200px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% 'Times New Roman', Times, FreeSerif, serif;
}
#main-wrapper {
width: 950px;float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
하면 거의 최대화 됩니다. 1200은 임의지정 폭이고, 950은 outer-wrapper늘어난 만큼(540)
main-wrapper도 늘려준 겁니다.
이렇게 되면, 최대 사진 가로폭은 main-wrapper를 따라서 920px~950px 정도가 됩니다.
이전의 410px 에서 920px 면 매우 커진 거죠.
개인취향이지만, outer-wrapper가 1200px면 너무 클 수도 있으니까, 적당히 줄이면 좋습니다.
B. 이미지 배치
방법 1. 직접 업로드하고, html 소스 수정
글쓰기에서, 1600 x 1066px 사진을 올리고 나서, HTML 편집에 보시면
1600 x 1066px 사진을 올리고 나서, HTML 편집에 보시면
(글쓰기에서 이미지 클릭하시고, 원본 크기로 지정 하시면 1600px 로 넓게 나와서 안됩니다.
크게나 x라지로 지정한 다음, html편집 소스를 봅니다. )
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGUCuOo-iX40zdcwq479-IisCm9V-o137rg-9rnUaqYbg8OPI4tnbh_3S271Ibxc8TV2HXW8LxCEhWh-h9JZrp9Jo93JL2GzHgoC6L_KvKLz1KuGhZvnMzF4FFI5EvRoVJ8c6gjdF6QVu/s1600/test.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="266" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGUCuOo-iX40zdcwq479-IisCm9V-o137rg-9rnUaqYbg8OPI4tnbh_3S271Ibxc8TV2HXW8LxCEhWh-h9JZrp9Jo93JL2GzHgoC6L_KvKLz1KuGhZvnMzF4FFI5EvRoVJ8c6gjdF6QVu/s400/test.jpg" /></a></div>
<img border="0" height="266" width="400" ~~~ 이렇게 되어 있습니다.
여기서 height 부분 없애고, width="넓이" 로 바꿔준 다음,
img 주소 끝부분 즈음을 보시면, s400 부분을 s넓이 로 바꿔줍니다.
* 넓이는, 위 A번의 스타일시트 수정에 따라서 달라집니다.
이 블로그는 좁은 블로그라서, 550px넓이로 했습니다.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGUCuOo-iX40zdcwq479-IisCm9V-o137rg-9rnUaqYbg8OPI4tnbh_3S271Ibxc8TV2HXW8LxCEhWh-h9JZrp9Jo93JL2GzHgoC6L_KvKLz1KuGhZvnMzF4FFI5EvRoVJ8c6gjdF6QVu/s1600/test.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" width="550" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGUCuOo-iX40zdcwq479-IisCm9V-o137rg-9rnUaqYbg8OPI4tnbh_3S271Ibxc8TV2HXW8LxCEhWh-h9JZrp9Jo93JL2GzHgoC6L_KvKLz1KuGhZvnMzF4FFI5EvRoVJ8c6gjdF6QVu/s550/test.jpg" /></a></div>
방법2. 이미지호스팅에서 링크
다른 방법으로는, flickr 이나 photobucket 을 이용해서, 곧바로 링크하는 법입니다.
글쓰기나 HTML편집에서, 이미지삽입을 URL 에서 하기 를 쓰지 않고,
http://www.flickr.com/photos/shironekoeuro/4938398232/ 에서 공유하기 > html/bbcode 보기에서
html 부분을 복사해 온 다음, height="xxx" 부분을 없애고, width="지정넓이" 로 바꾼 겁니다.
그 소스를 그냥 HTML편집에서, 붙여넣은 겁니다.
바로 위 이미지의 소스는
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.flickr.com/photos/shironekoeuro/4938398232/" title="Flickr에서 ShironekoEuro[away]님의 Free Texture 29"><img alt="Free Texture 29" src="http://farm5.static.flickr.com/4100/4938398232_55a2b6d50d_z.jpg" width="340" /></a></div>
입니다. Read More »
About