티스토리 스킨 변경후 이미지 사이즈 자동 조절하기

티스토리 스킨 변경후 이미지 사이즈 자동 조절하기

티스토리 스킨을 변경할때마다 날 귀찮게 하는 것이 한가지 있다. 바로 본문에 삽입된 이미지 사이즈에 대한 것이다. 스킨마다 본문 영역 크기가 다른것에 비해서 이미지 리사이징에 대한 대책도 없이 만들어진 스킨들이 많다. 이런 스킨을 적용한뒤 기존에 작성한 포스트들을 확인해보면 영역을 넘어가는 이미지들은 죄다 한쪽 옆이 짤려있는것을 볼 수 있다.

해결책은 2가지가 있다. 본인처럼 기존 스킨을 하나씩 뜯어고쳐 본인의 취향에 맞게 만들어서 적용하는 무식한 방법 한가지와 이미지 리사이징 코드를 삽입해서 본문 영역 크기에 상관없이 자동으로 크기가 맞춰지도록 하는 방법이 있다. 스킨을 뜯어고치는것이 시간과 노력이 수십배로 들어가지만 대부분의 스킨들은 내가 선호하는 영역이 몇가지씩 빠져있는터라 개인적으론 선호하는 방법이지만 정말 간편하면서도 합리적인 방법은 두번째이다.

적용 방법은 간단하다.

1. 아래 파일을 다운받는다.

imagefix2.js

자바스크립트 출처 : http://oloklir.tistory.com/

2. 위에서 받은 imagefix2.js 파일을 HTML/CSS 편집 -> 파일업로드 항목에서 업로드 한다. 기존 파일을 지우지 않아도 동일 파일명으로 업로드 하면 알아서 덮어쓰기 된다.

3. skin.html 안에 아래 코드 한줄을 삽입한다. 주의할것은 타 코드를 침범하지 않게 < /> 이후에 넣을것.

<script src="./images/imagefix2.js" type="text/javascript"></script>

 

</div> 와 <div> 사이에 삽입해야 한다. 그것만 지키면 소스의 어디에든지 넣어도 상관없다. 물론 head 와 /head 사이에 위치해야함은 기본이다.

적용 후 웹브라우저에서 F5를 눌러서 Reload 해준다. 위 스크립트가 적용되고나면 이후 그림 사이즈가 틀린 글을 볼때 이미지 크기가 자동으로 조절되는것을 볼 수 있다. 변환시 약간의 딜레이가 생길수 있으니 그정도는 감수하도록 하자. 딜레이라기 보다는 이미지가 리사이즈 되는 과정이 순간적으로 보이는 정도다. 본인의 필요에 의해서 포스팅한 글이지만 필요하신 분들도 많으리라 생각한다.

출처 http://www.coolwarp.net/1142