Flatinum 스킨 에디터 입력영역 조절하기 / 티스토리 에디터 가로 넓이 수정

계속해서 Flatinum 스킨 관련 포스팅을 진행하고자 합니다. 요즘 Flatinum 스킨을 제 입맛대로 제 색깔대로 꾸민다고 HTML 자료를 많이 찾다보니 점점 HTML에 대한 지식이 느는것 같아 좋은것 같습니다.

앞으로 Flatinum 스킨을 뛰어넘을 2단형 스킨이 나오지 않는이상 쭉 사용할 계획입니다.

혹시 Flatinum 스킨을 사용하시는 분들 중에 에디터 때문에 당황하신적 있으십니까? 전 엄청 당황했습니다. 이게 Flatinum 스킨을 적용하는 분들 모두 그런지 아니면 저만 그랬는지 모르겠지만 글 입력 공간이 너무 좁았습니다.

▲ 지금이야 상당히 넓어졌지만 제가 처음 Flatinum 스킨을 적용하고 글을 쓰려 했을때 최대 가로 넓이가 저것의 반 밖에 되지 않았습니다. 실제 블로그에 올라가는 글 영역은 1000px 가까이 되는데 에디터상에서는 반밖에 되지 않으니 조절하기가 불편함은 물론이고 글 쓸때에도 불편했습니다.

처음 이 문제를 겪을때는 CSS 안에 들어있나 싶어 처음부터 끝까지 코드를 읽어가며 뒤졌지만 전혀 그런부분은 찾을수가 없었습니다. Flatinum 스킨은 부트스트랩 기반이니까 부트스트랩 코드를 보면 되지 않을까? 싶어서 찾아봤지만 거의 대부분 영어 사이트라... 진이 빠져 포기했었습니다.

그런데 생각보다 너무 쉬운 곳에 존재하다보니 해결방법을 알고 맥이 풀릴정도였습니다. 여러분 이래서 공부해야 하는겁니다..... 머리가 나쁘면 몸이 고생합니다 

에디터 영역 조절방법은 다음과 같습니다.

먼저 블로그 관리 -> 스킨을 눌러주세요.

▲ 그럼 위와 같은 화면이 뜨는데요. 스킨 다운로드 버튼을 눌러서 다운로드 받아주세요. 그럼 압축파일 하나가 받아집니다.

▲ 압축을 풀면 위와 같은 파일들이 나오게 되는데요. 중요한건 XML 문서라 되어있는 index 입니다. index.xml 파일을 수정해야 합니다.

▲ 하지만 그냥 열게 되면 웹사이트 형식으로 열리게 되는데 이렇게 되면 수정을 할수가 없습니다. 수정을 할수 있는 에디터 프로그램이 필요합니다. 무료인 Notepad++ 프로그램을 다운받아서 설치해서 Notepad++을 실행시키세요.

다음 Notepad++을 통해 index.xml 파일을 열어줘야 합니다. 당연하겠지만 Notepad++에서 열기 버튼을 누른다음 index.xml을 더블클릭하면 됩니다.

▲ 그럼 위와 같이 수정을 할수 있습니다. 코드는 그대로 유지가 된채로 말입니다. 여기서 이제 값을 바꾸게 되면 에디터 영역을 조절할수 있게 됩니다. 

▲ 아래로 쭉 내립니다. 그럼 contentWidth 라는 부분을 발견할수 있습니다. 저는 800으로 이미 수정을 했는데요. 아마 보통은 500으로 되어 있을 것입니다. 그럼 에디터 가로 넓이가 겨우 500px 밖에 안된다는 말이 됩니다. 아이폰 가로 영역도 700이 넘는데 500px은 확실히 너무 작습니다. 이 값을 바꿔주면 됩니다. 더 큰숫자로 바꿔주세요.

저는 800으로 했지만 앞으로 블로그 글 영역인 980px과 똑같이 맞추기 위해 980으로 수정할 계획입니다. 값을 수정하고 저장하세요.

▲ 이제 index.xml을 업로드 시켜서 적용을 해야 합니다. HTML/CSS 편집에 들어가서 파일업로드로 간다음 추가버튼을 누르시고 index.xml을 업로드 시킵니다. 

그러면 업로드는 됐다고 뜨는데 어딜 찾아봐도 index.xml은 보이지가 않습니다. 

하지만 이것은 당연한거니 안심하셔도 됩니다. 숨겨져 있는 것이기 때문입니다. 이제 저장 버튼을 누르시고 마지막 단계만 남았습니다.

▲ 지금부터는 에디터 영역이 정상적으로 수정되었다면 할필요가 없습니다. 만약 index.xml을 넣고 저장까지 했는데 에디터 영역이 바뀌지 않았다면 해야 하는 과정입니다.

지금까지 수정한 스킨을 저장해야 합니다. 스킨저장 버튼을 눌러서 스킨을 저장해주시구요.

▲ 다음 PC보관함으로 가서 적용버튼을 누르셔서 스킨을 재적용하시면 모든 과정이 끝이나게 됩니다. 이렇게 하면 에디터 영역을 자유롭게 수정하실수 있습니다.

다른 스킨은 해보지 않아서 어떻게 수정하는지 모르겠습니다만 Flatinum 스킨 같은 경우 index.xml을 밖으로 꺼내와서 contentWidth 영역의 값만 수정한다음 다시 재업로드 하면 아주 간단하게 에디터 영역이 조절됩니다.

Flatinum 스킨을 쓰는 블로거 분들에게 도움이 됐기를 바라며 이것으로 포스팅 마치겠습니다.