티스토리에서 블로그를 포스팅하기 시작하면서 생겨난 문제 중 하나가 바로 사진과 같은 이미지 파일의 크기문제입니다.
사진을 그냥 올리다보니 프레임의 가로를 넘어가면 사진이 잘려져버려 정확한 사진을 보지 못하는 경우가 많아졌어요.
네이버 블로그 같은 곳에서는 사진을 올릴 때 일괄적으로 네이버 블로그용 사진으로 사이즈를 변환하는 기능이 있어서
클릭 한 번으로 간단히 바꿀 수 있는데, 티스토리에서 사진을 올릴 때에는 제가 아직 잘 몰라서 기능을 활용하지 못하기 때문인지
사진을 올리는 게 많이 번거롭더라구요.
익숙해지면 좀 나아지려나...
특히 티스토리 블로그의 스킨을 바꾸면 본문 프레임의 가로폭도 바뀌어버려서 기존에 올렸던 사진의 크기가 맞지않게 되는데,
기존의 포스팅을 찾아들어가서 일일이 사진의 크기를 수정한다는 건 거의 불가능에 가까운 일이죠.
이 때, 간단히 문제를 해결할 수 있는 방법이 있습니다.
바로 style.css를 수정하는 방법입니다.
하나하나 차근히 시작해 볼까요?
먼저 style.css를 수정하기 위해서는 편집화면으로 진입해야겠지요?
티스토리 블로그의 관리자 ADMIN화면으로 들어갑니다.
좌측에 메뉴가 나타나는데 여기서 HTML/CSS 편집 메뉴로 들어갑니다.
HTML/CSS 편집 메뉴로 들어가면 아래와 같은 화면이 나옵니다.
코드를 수정할 수 있는 창이 두 개 나오는데요, 하나는 skin.html 창이구요.
다른 하나가 바로 오늘 수정할 style.css 창입니다.
이곳에 다음의 코드를 복사해서 넣어줍니다.
===============================================
img {max-width: 100%; height: auto;}
span.imageblock {max-width: 100%; height: auto;}
===============================================
이 코드는 이미지 파일의 가로 길이를 100%로 설정하고 가로세로 비율을 원래 이미지의 비율대로 유지하라는 코드입니다.
그리고 저장을 눌러주면 끝~!
쉽죠?
^^
잘 활용하셔서 좋은 포스팅 많이 작성해 보세요~ ^^
FIN.
'손이 즐거운 이야기(作)' 카테고리의 다른 글
[맥북 사용팁 TIP!] 맥북에서 스크롤 화면캡쳐하기! - 파파라치~! (Paparazzi!) (0) | 2014.10.27 |
---|---|
[수리후기] 아이패드2 Digitizer 터치패널(화이트), 와이파이 안테나(wifi antena) 교체 후기 (0) | 2014.10.26 |
[수리후기] 아이폰4s 디스플레이 패널(LCD+Digitizer) 교체하기 (1) | 2014.10.24 |
[펌글] 윈탭 구매기준 (0) | 2014.10.23 |
아이폰5 깨진 (찌그러진) 백커버 교체기 (iPhone5 silver) (2) | 2014.10.23 |