티스토리 인용구 기능 색 상및 두께 변경 및 수정 방법

티스토리 인용구 기능 색 상및 두께 변경 및 수정하기

 

티스토리 블로그에 글쓰기 기능 중 인용구 기능이 있습니다.

 

인용구란 신문기사나 다른 글을 인용할 때 인용임을 표시 하는 것으로 뭔가 중요한 내용을 넣는다던지, 관련 글을 작성할 때 사용합니다.

저 같은 경우 제목을 넣을 때 주로 사용합니다.

 

물론 다른 기능으로 관련글, 핵심 내용 또는 제목 등 디자인해서 이쁘게 또는 멋지게, 눈에 확 들오게 만들 수 있습니다.

 

하지만 번거롭기도 하고 수정하는 시간이 길어 블로그 글 작성시간이 길어지게 됩니다.

 

티스토리에서 제공되는 인용구는 CSS에서 개인 취향대로 수정 가능합니다.

 

그럼 인용구를 어떻게 수정하는 지 알아보도록 하겠습니다.

 

인용구 수정 방법

 

인용구기능은글쓰기기능중“(큰따옴표) 모양으로되어있습니다.

 

먼저 Tistory관리 -> HTML/CSS 편집 클릭 후 CSS에 들어갑니다.

CSS에서 CTRL + F를 누른뒤 blockquote를 검색합니다.

 

blockquote를 찾았으면 이제 개인취향에 맞게 수정 해 주시면됩니다.

 

수정전에 빨간네모박스에 보시면이해가 안되는 분들이 있어서 설명 먼저 드리겠습니다.

 

Font:14px/20px

14px는 인용구 안에 들어 갈 폰트의 사이즈이고, 20px는 줄 사이 간격(크기) 입니다. 두줄의 글이있으면윗줄과아랫줄사이의간격을조절하는것이 20px 입니다. 만약오른쪽의 20px를 14px보다낮으면글이겹쳐보이게되니주의하세요.

 

Background-color: #EEEEEE;

인용구의 배경에 들어 갈 색상입니다. 보통 기본 설정으로 #EEEEEE 회색으로 설정 되어 있습니다.

이 색상 설정은 16진수 숫자의 색상이 사용됩니다.

원하는 색상을 16진수 숫자로 확인하는 방법은 아래 사진을 참고하시기 바랍니다.

 

background-image:url(images/iconBlockquote.gif);

이 부분은 인용구에 큰 따옴표의 이미지를 사용한다는 의미입니다. 저는 불필요해서 주석처리 (/* ~~ */) 하였습니다. 다른 이미지를 넣어서사용하실 수 있습니다.

 

background-position:top 10px left 10px;

인용구의 따옴표 포지션입니다. 저는 사용하지 않기에 주석처리하였습니다.

 

background-repeat :no-repeat;

인용구에 배경을 사용했을 때 배경 색상이나 설정한 인용구(이미지)의 크기를 반복하는 지에 대한 설정입니다.

 

가로, 세로로 반복하게도 설정할 수 있습니다만, 계속 반복할 경우 크기가 계속커지므로 no-repeat로 설정하였습니다.

border-left: 10px solid #F5A431;

인용구 포인트(머리말 부분 네모난 색상) 10px두께와 #F5A431은 색상 코드입니다.

padding:23px

인용구의 글자와 전체 상자와의 간격을 조절 / 설정할 수 있습니다.

 

위의 내용을 참고해서 개인 취향에 맞게 인용구를 수정해보세요.

 

그리고 글쓰기 화면에는 수정한 인용구로 적용이 안되어있습니다.

 

하지만 미리보기를 하시거나 글 발행을 하시면 수정하신대로 변경되어 있습니다.

이 블로그 글보고 많은 도움이 되셨으면 좋겠습니다.