티스토리 블로그스킨 변경후 이미지크기 맞추기

블로그 스킨을 바꾼지 하루정도 지났는데요. 드디어 문제를 찾아냈습니다. (응?)

다른게 아니고 블로그 이사한지 얼마안되서 올린 글들의 이미지가 짤리는 현상이 있더군요. 이미지가 오른쪽으로 튀어나가 버립니다. 이 문제는 보통 본문 가로크기가 큰 스킨을 쓰다가 작은 스킨으로 바꾸었을때 발생하는 문제입니다.

이미지가 오른쪽으로 탈출해버렸다.

스킨을 백업하면서 깜박했던 내용인데 이번에 새로이 적용하면서 정리해봅니다. 이를 해결하는 방법에는 여러가지가 있으나 제가 사용하고 있는 방법은 자바스크립트를 이용한 것입니다. 저말고도 아주 많은 분들이 사용하고 계시는 스크립트로 아주 유용합니다. 이걸 몰랐을때는 저도 일일히 포스팅을 수정하는 노가다를 했습니다;;

코드를 짠 원작자님의 링크는 다음과 같습니다. (원작자님께서 직접 제보를 주셨네요! 자세한 질문은 아래 링크를 참조하시면 될 거 같습니다.)
http://oloklir.tistory.com/127

혹시 저처럼 스킨변경후 이미지 출력이 제대로 안되서 머리가 아픈 분이 계시다면 아래의 방법으로 쉽게 해결할 수 있습니다. 스크립트 파일의 다운로드는 아래의 첨부파일을 클릭하세요.

imagefix2.rar

설치방법은 간단하나 그래도 혹시 모를 초보자분들을 위해서 적어보도록 하겠습니다.

여기서 잠깐!

스킨변경후 본문 가로크기가 제대로 적용이 되어 있는지 확인해보세요. 간혹 수정된 스킨에서 추출된 값이 잘못되어 이 수치가 너무 크게 설정되어 있는경우가 있습니다. 본문출력시에는 아래의 방법으로 해결이 가능하지만 미리 설정해두어야 글쓰기창에서도 이미지가 제대로 보입니다.

1. 스크립트 다운로드 후 압축해제
위 링크로 이동하여 스크립트를 다운로드 합니다. 그럼 두개의 파일이 보입니다.

imagefix2.js는 스크립트 파일이고 code.txt는 스킨에 적용할 코드입니다.


2. 스크립트 파일 업로드 및 코드적용
두개의 파일중 중 imagefix2.js를 파일을 업로드 시켜줍니다.

업로드 방법은 스킨 - HTML/CSS 편집 - 파일업로드를 누르면 들어갈 수 있습니다.

그런다음 HTML/CSS탭으로 넘어옵니다.
code.txt파일을 열어 그안에 있는 내용을 복사해 skin.html의 아무곳이나 넣어주면 됩니다.

보통의 스킨에서는 위와 같은 과정을 거치면 별문제없이 이미지가 출력됩니다. 하지만 저처럼 이미지에 테두리가 한개더 생기는 스킨에서는 좌우 폭을 조금더 줄여야 하더군요. 그래서 imagefix2.js를 메모장으로 열어 아래 100%부분을 97%로 바꿔줬습니다. (625px 이런식으로 절대값으로 적어줘도 상관이 없습니다.)

덧글) 수정한 코드는 제공해드리지 않습니다. 수정이 별로 어렵지 않으므로 위 방법대로 따라해 보세요~

아래는 최종결과물입니다. 문제없이 테두리 안으로 이미지가 출력됩니다. 소스를 만들어주신 분께 다시한번 감사드립니다~ 혹시 스킨수정후 이미지크기때문에 고민이시라면 이 방법을 이용해보세요!

이미지가 정상적으로 출력된다.