글쓰기 에디터화면 스킨 변경 (wysiwyg.css)

티스토리 2008 새관리자 페이지가 개편되어 우리에게 새롭게 선을 보였네요. 티스토리 새관리자 페이지는 사용자를 위한 세심한 배려가 여기저기서 눈에 띌정도로 기능과 편리성이 대대적으로 개편이 되었습니다. 그 중에서 가장 눈에 띄는 것은 센터화면과 우리가 가장 많은 시간을 같이 하는는 바로 글쓰기 에디터 화면이라고 할 수가 있는데요. 에디터 화면의 여러가지 기능들에 대한 설명과 사용법에 대한 내용은 이전포스팅 '티스토리 2008 edit의 변화된 기능과 새로운기능'을 참조하면 되고, 여기서는 관리자 페이지의 스킨에 대해서 알아보기로 하겠습니다.

에디터화면 스킨파일 wysiwyg.css

개편된 티스토리 2008 새관리자 페이지의 글쓰기 에디터화면에 스킨을 입히는 기능이 새로 추가 되었습니다. 정해진 글자나 배경등이 아닌 본인 스스로 에디터화면의 글자색이나 배경색, 배경이미지등을 변경하여 사용할 수 있도록 추가된 기능으로 기본적으로 지원되는 스킨이 있고 아직 지원되지 않는 스킨이 있습니다.

에디터화면의 스킨파일명은 wysiwyg.css로 지정되어 있고 에디터화면의 스킨 변경을 하려면 wysiwyg.css 파일의 내용을 수정하거나 새로 만들어 업로드를 하면 되는데, 스킨파일의 이름은 '편집화면에서 보는 내용 그대로 웹에 보여진다'는 의미로 위지윅(wysiwyg; What You See is What You Get)이라는 이름을 사용하였답니다.

스킨 파일을 만들어보자

에디터 화면의 스킨은 일부 스킨에 대해서만 제공이 되므로 대부분의 블로거들이 사용하는 스킨에는 에디터 화면 스킨이 제공되지 않고 있으므로 스킨을 입히기 위해서 가장 좋은 방법은 직접 스킨파일을 만들어서 업로드 하는 방법입니다. (이미 wysiwyg.css 파일이 존재한다 해도 새로 만들어서 업로드 하면 덮어쓰기가 되어 기존 내용은 지위지고 업로든 한 파일의 내용이 적용됨)


* 글쓰기 에디터화면의 스킨 입히는 방법

  • wysiwyg.css 파일을 만들어 변경을 원하는 형태로 style을 지정한다.
    (제목,본문등의 엘리먼트 이름 참조)
  • 작성한 wysiwyg.css 파일을 "스킨>파일업로드"에서 업로드를 한다.
  • 글쓰기 화면에서 적용된 스킨을 확인한다.

나는 Pure 스킨을 사용하는데 글쓰기 에디터화면에 글본문 영역하고 배경이 구분이 되지 않아서 글 작성시 미스클릭도 많이 발생하고 그로 인한 예기치 않는 화면스크롤이 발생하는 등 이만 저만 불편한게 아니어서 바로 스킨 적용을 해봤습니다.

* 변경전 글쓰기 에디터 화면

사용자 삽입 이미지

스킨 변경전 에디터 화면



* 변경후 글쓰기 에디터 화면

사용자 삽입 이미지

스킨 변경 후 에디터화면

이렇게 변경을 하고 나니까 포스트 쓰는 영역과 그외 영영이 딱 구분이 되네요..
자. 그럼 제가 어떤 방식으로 에디터화면 스킨을 변경했는지 볼까요?

스킨파일(wysiwyg.css) 작성하기
사용자 삽입 이미지

메모장에서 스킨파일을 편집하는 화면

스킨파일의 작성 및 수정은 각자 자기가 사용하는 에디터를 이용하면 되는데 저의 경우는 Ultra Edit를 이용합니다. 하지만 파일의 크기도 크지 않고 내용이 간단하므로 메모장을 이용해도 충분하답니다. 여기서는 윈도우가 설치된 컴퓨터라면 언제든지 사용할 수 있는 메모장을 기준으로 설명 하겠습니다.

1. 메모장을 오픈합니다.
윈도우 시작메뉴 - 실행을 선택후 "notepad"를 입력하고 엔터를 치면 메모장이 열립니다.
2. 메모장에 각자가 원하는 에디터화면의 스타일을 입력해줍니다.

   아래 내용은 짬블 블로그 에디터화면 스킨의 내용입니다. 빨강색 부분을 변경하였습니다.

           [wysiwyg.css의 내용]

@charset "utf-8";

/* 바로 아래 내용은 변경하면 안됩니다.
 * FONT_SIZE: 14
 * TITLE_PADDING_TOP: 0,
 * TITLE_PADDING_RIGHT: 2,
 * TITLE_PADDING_BOTTOM: 10,
 * TITLE_PADDING_LEFT: 2,
 * TITLE_MARGIN_TOP: 20
 * TITLE_MARGIN_BOTTOM: 0
 */

body {
 color: #666;
 font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
 background:#FFF  /* 전체 배경색 지정 */
}

a:link          { color:#4E73E4;  text-decoration:none;}
a:visited       { color:#4E73E4;  text-decoration:none;}
a:hover         { color:#4E73E4;  text-decoration:underline;} /* 마우스 롤오버시 밑줄표시 */
a:active        { color:#4E73E4;  text-decoration:none;}

/* 전체 화면 */
#tx_canvas_wysiwyg_holder {
 background: #f0f0f0; /* 포스팅영역을 둘러싸고 있는 영역의 배경색 지정 */
}

/* 제목 입력부분을 감싸는 제목 영역 */
#tx_canvas_subject_holder {
}

/* 제목 입력 부분*/
#tx_canvas_subject {
 color: #000080;                       /* 제목 글자색 지정 */
 font-family: Dotum, Sans-serif;
 font-weight: bold;                  /* 글자를 두껍게 표시 */
 font-size:16px;                      /* 포스트 제목을 크게 표시 */
 border: 2px solid #B8B8B8;     /* 제목의 테두리를 2픽셀크기로 실선(solid)으로 그리되 */
}                                          /* 선의 색깔은 #b8b8b8 색으로 한다. */

/* 본문 포스팅 영역 */
#tx_canvas_wysiwyg {
 /* 변경하면 안되는 스타일 쉬트
 height,padding-left,padding-right
 */
 
 width:620px; /*블로그 포스트영역하고 같은 크기로 지정 */
}

 

3. 위와 같이 입력을 한 후 저장을 합니다.
    메모장의 경우 "파일-저장"을 눌러서 파일이름에 "wysiwyg.css" 라고 입력후 "저장"을 누르면 됩니다.

4. 저장한 에디터 스킨파일(wysiwyg.css)을 업로드 하면 끝입니다.

관리자페이지 파일 직접올리기


  업로드는 오른쪽 그림처럼 스킨- html/css 편집 클릭후 열리는 창에서 상단 탭에서 "파일 업로드"를 선택한다음 작성한 wysiwyg.css파일을 업로드 해주면 됩니다.스킨을 업로드가 되면 바로 적용이 됩니다. 

5. 이제 글쓰기 화면으로 가서 확인을 해보세요. 원하는 모양으로 바뀌어 있나요?
만약에 마음에 들지 않는다면 wysiwyg.css 파일을 열어서 수정한다음 저장한 후 다시 업로드 (위의 3,4번과정)하면 됩니다.

* 스킨작성을 위하여 기본적으로 알아야 할 사항

* CSS에 사용되는 속성 몇가지 알아보기
 
. color : 글자색을 지정하는 것으로 주로 RGB색상을 입력 (예. color:#cccccc)
. font-family : 글자폰트를 콤마(,)로 구분하여 여러개 지정할때 사용
. background : 배경색이나 배경이미지를 지정할때 사용
. font-weight : 글자속성을 지정할때 사용. (예. font-weight: bold)
. font-size: 글자크기를 지정할때 사용 (예. font-size:9px)
. border: 선을 그어줄때 사용 (예. border-bottom:1px solid #f0f0f0, 이예제는 아래쪽에
             #f0f0f0 색의 1픽셀크기의 선을 그리라는 의미)
. width: 넓이를 지정,  height:높이 지정
. padding : 안쪽 여백 지정,   . margin : 공백을 지정(바깥쪽) 

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 재아 2008.08.28 20:37 신고  댓글주소  수정/삭제  댓글쓰기

    제 블로그에서 보여지는 본문 영역은 사진 기준으로 500정도 되고, 본문으로는 520정도 됩니다.

    그리고 본문폭이라 해야 하나 그건 550정도 됩니다.
    근데;

    이 소스를 복사해서 붙여서 그냥 올렸는데요~..

    글쓰기 화면에서는 예를들어

    123456789 에서 8번에서 줄 바꿈이 된다고 치면요
    이걸 미리보기 해보면,,

    블로그 포스팅 된 화면에서는 3번에서 내려가보입니다.

    즉.. 글쓰기 본문폭과, 포스팅된 본문폭이 틀린데요~;;

    뭘 잘못했을까요~


    근데 좀 의아한건,,

    포스팅 제목 쓰는칸이 정해져 있어서 그런지 그 이하로 안줄어 드는것 같더군요~..

    • BlogIcon Kay~ 2008.08.28 21:15 신고  댓글주소  수정/삭제

      음..저와 다른 스킨이라 제가 정확하게 말씀드릴 수는 없지만 참고로 말씀드린다면
      포스팅영역의 크기는 style.css의 ".article"을 찾으면 width가 있습니다.
      그 width옆에 있는 값이 포스팅영역이라고 알고 있으므로 확인해보세요.
      그리고 참고로 에디터 스킨은 블로그 웹페이지와 동일한 환경으로 꾸며서
      웹과 관리페이지 환경이 다름으로 인하여 발생할 수 있는 시행착오를 줄이기위한것입니다.
      그러므로 실제로 보여지는 블로그 포스트 폭하고 달라도 상관은 없습니다.

  2. BlogIcon THEPAULIS 2008.09.27 14:31 신고  댓글주소  수정/삭제  댓글쓰기

    제가 무엇을 만졌는지, 갑자기 글쓰기에 들어가면 글쓰기 화면이 검정색으로 되어있더라고요, 원래는 흰색이였는데말이죠.. 음.. 제가 봤을땐 백그라운드 컬러가 어떻게 해서 바뀌게 된거 같은데,
    원래 글쓰기 대로 돌리는 방법은 어떻게 할수있나요?

    • BlogIcon Kay~ 2008.09.28 20:17 신고  댓글주소  수정/삭제

      wysisyg.css 파일을 수정하셨나요?
      body에 있는 background 컬러나 tx_canvas_wysiwyg 스타일에 백그라운드 컬러가
      변경이 되었는지 확인을 하고 흰색(#FFFFFF)으로 지정해보세요.
      그래도 해결이 안되는 경우 wysiwyg.css 파일을 지우면 해결이 될것 같은데요.

    • BlogIcon THEPAULIS 2008.09.29 02:10 신고  댓글주소  수정/삭제

      wysiwyg.css 파일을 지우면, 그걸 대치하는 파일을 넣어야 하지 않나요?
      아니면, STYLE CSS 에서 background 컬러를 바꾸는 곳이 있나요? 제가 수정한 것이라고는 STYLE CSS 안에 있는것 밖에 없는데. 시간내주셔서 감사합니다 :)

    • BlogIcon Kay~ 2008.09.29 13:01 신고  댓글주소  수정/삭제

      wysiwyg.css를 수정하지 않았다면 삭제하지 마세요.
      그리고 삭제해도 대체파일은 없어도 되고요.
      style.css를 만지셨다고요?
      style.css는 글쓰기페이지가 아닌 블로그웹에 대한 부분인데 영향이 있을지는 모르겠네요.
      참고로 style.css에는 body부분의 스타일과 container, content에서 배경색을 지정합니다.
      한가지 더 글쓰기 화면의 배경색이나 글자색등은 wysiwyg.css에서 컨트롤이 가능하므로
      이 부분을 손을 보시는 것도 해결할 수 있는 방안인것 같습니다.