이번 티스토리 개편에서는 글을 쓸 때에도 자신의 스킨 디자인과 동일하게 보여질 수 있도록 에디터 CSS (즉, WYSIWYG.CSS) 라는 스펙을 추가하게 되었습니다. 귀찮으시더라도 제작 또는 새로 적용된 스킨에 따라 적용해주시기 바랍니다. WYSIWYG.CSS가 존재하지 않을 경우에는 기본 에디터 화면이 보여지게 되오니 참고해주세요!
WYSIWYG.CSS 적용된 스킨에서 글쓰기시
블로그모습 |
글쓰기 에디터 모습 |
에디터에 스킨이 보여진다구요?
위 스크린샷은 티스토리에서 제공하고 있는 Moving Box 라는 스킨을 적용한 뒤, 글쓰기로 이동한 화면입니다. 티스토리에서는 그동안 각각 다른 블로그의 폭넓이, 스타일을 에디터에서 지원하지 않아 글을 작성할 당시와 저장한 모습이 많이 다른 모습을 보실 수 있었으나 앞으로는 볼 때 그리고 작성할 때 모두 거의 동일한 환경을 제공합니다.
※ 주의사항:
- 스킨위자드를 이용할 경우, 스킨의 폭 및 글자색 등의 기본 정보만 반영됩니다.
- wysiwyg.css가 적용되어 있지 않은 스킨일 경우, 기존 스킨에서 사용되고 있는 index 파일의 정보에 따라 기본 에디터 화면이 구성됩니다.
- index.xml을 비롯하여 wysiwyg.css가 정상적으로 업로드 되지 않은 스킨일 경우에는, 티스토리에서 제공하는 기본 에디터 화면이 보여지게 됩니다.
WYSIWYG.CSS 만드는 법
먼저 wysiwyg.css 를 만들기 위해서는 약간의 html과 CSS에 대한 지식과 정보가 필요합니다. 혹시 어려우신 분들은 티스토리 스킨을 새로 적용해 주시면 스킨이 입혀진 에디터를 만나실 수 있습니다.
1. wysiwyg.css 파일의 속성
- 제작 후 반드시 파일명은 wysiwyg.css 로 저장해 주셔야 합니다.
- 파일의 위치는 스킨의 최상단 디렉토리로 자동 지정됩니다. (즉, skin.html, style.css 파일이 있는 위치)
2. 글쓰기 에디터의 기본적인 레이아웃 이해하기
에디터는 아래 그림과 같은 레이아웃으로 구성되어 있으며, 4개의 엘리먼트에 적당한 스타일을 정의합니다.
- 에디터 전체를 감싸고 있는 div 엘리먼트
- 배경색, 배경 이미지를 놓거나 안쪽에들어가는 엘리먼트들을 정렬하는 용도로 쓴다
- 변경되면 안되는 스타일 속성은
- width
- height
- overflow
B. 제목 영역 : div#tx_canvas_subject_holder
- 제목 입력 박스를 감싸고 있는 엘리먼트
- 제목 영역에 배경 이미지를 놓는 등의 제목 입력 박스를 꾸미기 위한 용도로 쓴다
C. 제목 입력 : input#tx_canvas_subject
- 제목이 입력되는 텍스트 박스
- 제목 글자의 모양을 꾸미기 위한 용도로 쓴다
- 아래 메타 데이터 부분에 정의한 7가지의 속성이 이곳에 inline style로 적용된다
- 텍스트 박스에 커서가 가면 tx-focused 클래스를 가지고 최초에 출력되는 '제목을 입력해주세요' 메시지가 수정되면 tx-modified 클래스를 가집니다.
- 변경되면 안되는 스타일 속성은
- padding
- font-size
- margin-top
- margin-bottom
D. 본문 에디팅 영역 : iframe#tx_canvas_wysiwyg
- 실제로 에디팅이 이루어지는 디자인 모드의 iframe 엘리먼트
- 변경되면 안되는 스타일 속성은
- height
- padding-left
- padding-right
WYSIWYG.CSS 파일 만들어보기 (예제)
1. 레이아웃 스타일
#tx_canvas_subject_holder { text-align: left !important; }
#tx_canvas_subject {
color: #333;
border: none;
border-bottom: 1px dashed #ccc;
font: bold 15px "돋움","Dotum", Sans-serif;
padding: 0 2px 10px 2px;
margin-top: 20px;
margin-bottom: 10px;
}
#tx_canvas_subject { ... } 에 필수로 지정해야 하는 스타일
- font-size
- padding-top
- padding-right
- padding-bottom
- padding-left
- margin-top
- margin-bottom
2. 에디팅 레이아웃 스타일
color: #656565;
font: 12px/1.3em "돋움","Dotum", Sans-serif;
background-color: #1F1F1F;
}
a { color: #757575; text-decoration: none; }
a:hover { text-decoration: underline; }
body { ... } 에 필수로 지정해야 하는 스타일
- color
- font-family
- font-size
- background-color
최종 샘플 (레이아웃 스타일 + 에디팅 레이아웃 스타일)
body {
color: #666;
font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
background-color: transparent;
}
a { color: #333; text-decoration: none; }
a:hover { color:#7870ab; text-decoration: underline; }
#tx_canvas_wysiwyg_holder { background: url("./images/bg_wysiwyg.gif") repeat-y center 0 !important; }
#tx_canvas_subject_holder { text-align: left !important; }
#tx_canvas_subject {
color: #333;
border: none;
border-bottom: 1px dashed #ccc;
font: bold 15px "돋움","Dotum", Sans-serif;
padding: 0 2px 10px 2px;
margin-top: 20px;
margin-bottom: 10px;
}
위 샘플내용처럼 CSS를 만든 후, WYSIWYG.CSS 이름으로 저장하여 스킨>직접올리기를 통하여 업로드 하시면 글쓰기 에디터에 지정하신 모습으로 나타나게 됩니다. 조금 어려울 수도 있지만 한번 따라해보는 것은 어떨까요?
감사합니다.
