본문 바로가기

티스토리 기본 편집기 설정

티스토리 기본 편집기를 사용하면서 자주 쓰는 을 정리해봤습니다.(계속 추가 예정)

 

1. 줄간격 조정

티스토리 기본편집기의 줄간격은 150%로 돼있습니다. 이 수치를 바꿔서 기본 줄간격을 조절하려면,

"skin.html" 에서 "

티스토리 기본 편집기를 사용하면서 자주 쓰는 을 정리해봤습니다.(계속 추가 예정)

 

1. 줄간격 조정

티스토리 기본편집기의 줄간격은 150%로 돼있습니다. 이 수치를 바꿔서 기본 줄간격을 조절하려면,

"skin.html" 에서 ""로 검색해서 바로 위에 있는

<div class="article"> 이 부분을

<div class="article" style="line-height:180%; letter-spacing:1px;"> 로 바꿔준다.

 

 

 

2. 포스트 제목/본문 글씨 크기와 색깔 변경

티스토리 기본편집기의 제목과 본문은 기본 9pt(포인트)로 설정돼 있어서 근시가 넘쳐나는 컴퓨터 사용자의 눈을 피로하게 합니다. 포스트의 제목과 본문 글씨의 크기와 색깔을 바꾸려면,

"style.css"에서 ".titleWrap h2 a"로 검색해서 아랫 부분을 찾습니다. 우리가 바꿀 부분을 녹색으로 표시해봤습니다. 눈치 채셨겠지만, .titleWrap h2은 제목, .article은 본문의 글씨체를 설정하는 부분이고, color와 font-size는 각각의 영역에서 폰트 색깔과 크기를 바꿔줍니다. ( /*  */ 이 기호 사이에 있는 모든 문자는 코멘트이니 무시하셔도 됩니다.)

 

*참고 : 색상코드표 바로가기

 

.titleWrap h2 a          {
  /*@post-title-color=color:#333;*/color: #333;/*@*/
  /*@post-title-font-family=font-family:;*/font-family: dotum;/*@*/
  font-size: /*@post-title-font-size=*/inherit/*@*/;
}

 

10여줄 생략 ^^;

 

.article {
  margin: 36px 0 0 0; overflow:hidden;
  /*@post-body-color=color:#666666;*/color: #000000;/*@*/
  /*@post-body-font-family=font-family:;*/font-family: dotum;/*@*/
  font-size: /*@post-body-font-size=*/inherit/*@*/;
}

 

위에서 #333, #000000 은 각각 색상코드이므로, 위 색상코드표를 보고 자신이 원하는 색깔로 대신 넣어주면 됩니다. 저는 각각 진한 파란색과 검은색(디폴트)로 설정했어요.

그리고 글씨 크기는 inherit 대신에 " 숫자px"로 넣어주는데, 티스토리 편집기의 기본 9pt(포인터)가 대략 12px(픽셀)이므로, 12px보다 큰 숫자를 넣어보고 "미리보기"를 통해서 대략 크기를 맞춰봅니다.

 

*후기 : 저는 본문 글씨를 항상 11pt로 쓰지만,  이 크기설정은 기본 "inherit"를 그대로 두었습니다. 이 부분을 15px로 바꾸었더니, 편집기 상에서 위지윅이 안 되는 단점이 있어서 오히려 불편했습니다. 즉 저는 포스트 제목의 크기만 바꿨습니다.


"로 검색해서 바로 위에 있는

<div class="article"> 이 부분을

<div class="article" style="line-height:180%; letter-spacing:1px;"> 로 바꿔준다.

 

 

 

2. 포스트 제목/본문 글씨 크기와 색깔 변경

티스토리 기본편집기의 제목과 본문은 기본 9pt(포인트)로 설정돼 있어서 근시가 넘쳐나는 컴퓨터 사용자의 눈을 피로하게 합니다. 포스트의 제목과 본문 글씨의 크기와 색깔을 바꾸려면,

"style.css"에서 ".titleWrap h2 a"로 검색해서 아랫 부분을 찾습니다. 우리가 바꿀 부분을 녹색으로 표시해봤습니다. 눈치 채셨겠지만, .titleWrap h2은 제목, .article은 본문의 글씨체를 설정하는 부분이고, color와 font-size는 각각의 영역에서 폰트 색깔과 크기를 바꿔줍니다. ( /*  */ 이 기호 사이에 있는 모든 문자는 코멘트이니 무시하셔도 됩니다.)

 

*참고 : 색상코드표 바로가기

 

.titleWrap h2 a          {
  /*@post-title-color=color:#333;*/color: #333;/*@*/
  /*@post-title-font-family=font-family:;*/font-family: dotum;/*@*/
  font-size: /*@post-title-font-size=*/inherit/*@*/;
}

 

10여줄 생략 ^^;

 

.article {
  margin: 36px 0 0 0; overflow:hidden;
  /*@post-body-color=color:#666666;*/color: #000000;/*@*/
  /*@post-body-font-family=font-family:;*/font-family: dotum;/*@*/
  font-size: /*@post-body-font-size=*/inherit/*@*/;
}

 

위에서 #333, #000000 은 각각 색상코드이므로, 위 색상코드표를 보고 자신이 원하는 색깔로 대신 넣어주면 됩니다. 저는 각각 진한 파란색과 검은색(디폴트)로 설정했어요.

그리고 글씨 크기는 inherit 대신에 " 숫자px"로 넣어주는데, 티스토리 편집기의 기본 9pt(포인터)가 대략 12px(픽셀)이므로, 12px보다 큰 숫자를 넣어보고 "미리보기"를 통해서 대략 크기를 맞춰봅니다.

 

*후기 : 저는 본문 글씨를 항상 11pt로 쓰지만,  이 크기설정은 기본 "inherit"를 그대로 두었습니다. 이 부분을 15px로 바꾸었더니, 편집기 상에서 위지윅이 안 되는 단점이 있어서 오히려 불편했습니다. 즉 저는 포스트 제목의 크기만 바꿨습니다.