2011년 5월 16일 월요일

구글 블로그스팟 이미지 리사이즈 하기!

구글 블로그스팟 이미지 리사이즈 하기!

구글 블로그에 둥지를 틀고 이미지 업로드를 하니 대부분 작에 출력이 되고 원본크기로 늘리면 화면을 벗어나는 현상이 생기더라구요.
그래서 원본으로 출력을 했을때에도 화면밖으로 벗어나지 않도록 하기위해 간단한 CSS추가로 해결을 하실수있습니다.

구글블로그 블로그스팟에 로그인을 하신후 디자인을 - 템플릿디자이너 - 고급 - CSS추가로 들어가셔서
.Header {
text-align: center;
}
.post-body img{
margin:0px 0px;
max-width:710px;
cursor: pointer;
}
.post-body img {
 background-color:#fff;
 padding:6px;
 border:1px solid #ddd !important;
 vertical-align:middle;
 }
.post-body .box{
padding:0px;
margin:10px 0;
border:1px solid #ddd;
background-color:#f7f7f7;
}
이코드를 넣어주시면 되겠습니다.
제일위에 상단에 있는 코드는 블로그 메인 제목 헤더부분을 센터로 잡아주는 태그입니다.
필요하지 않으신분들은 저코드를 빼고 입력을 하시면 되겠네요~!

max-width:710px;<-- 710숫자가 이미지가 출력될 사이즈 입니다. 구글블로그 에서 너비조정을 805로 할때 710이 딱 맞더라구요. 각각에 사이즈는 여러분이 원하시는 사이즈로 하시면됩니다^^

1.구글블로그 블로그스팟에 로그인후 디자인 클릭!

2. 디자인 - 템플릿 디자이너 클릭!

3. 고급클릭!

4. 고급 - CSS추가 클릭후 해당 코드입력!

하지만 글쓰기 모드에서는 아래보이는 스샷과 같이 화면이 외곡되는 현상이 일어나는데요~
이건 어떻게 잡을수가 없더군요! 하지만 발행하시거나 미리보리를 클릭해보시면 회면이 외곡되지 않고 이미지가 출력되는것을 보실수있습니다.
이상으로 구글블로그 이미지 리사이즈하기를 알아봤는데요. 저도 초보라 제가 아는한도에서 여러분들에게 알려드리고 있습니다.

이와 같은 방법보다 더 좋은 방법을 알고계시는 분들은 저에게도 공유좀 해주세요^^
서로서로 도와 가면서 이쁜블로그 환경을 만들어 가보자구요^^*

댓글 없음:

댓글 쓰기