티스토리 인용구 활용하기

티스토리를 하다보면 인용구를 사용해야 할때가 있다. 처음에는 이 기능을 정말 인용으로만 사용했으나 현재는 본문내용의 타이틀을 표시하는 용도로 사용중에 있다.

하지만 사용하다보면 눈에 거슬리는 부분이 있는데 바로 인용구 옆에 붙어 있는 큰 따옴표의 존재이다. 이 녀석은 왠지 본문의 내용의 타이틀로 사용하지 말고 순수하게 인용구로 사용해 달라고 항변해 오는 느낌이기에 살짝 감추어 보고자 한다.

인용구의 큰 따옴표 없애기

아래 이미지를 보면 유독 좌측 상단에 큰 따옴표가 보인다. 자신의 역활과 존재이유를 명확하게 하고 있지만 눈에 거슬리니 없애보자

.

관리자에서 HTML/CSS 편집모드로 들어가서 css 부분을 선택하여 편집모드로 진입한다.

이 상태에서 ctrl+f를 눌러서  article blockquote 를 검색하면 아래와 같은 소스코드가 있다. 찾은 내용이 아래와 동일해야 한다.

검색한 코드 아래줄에 보면 

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

background-position: top 10px left 10px;

라고 쓰여진 부분을 찾을 수 있다 예외처리를 하자 /*  */ 를 하면 주석을 막을 수 있다. 

.

추가팁

인용구의 큰따옴표를 조정했던 소스코드는 좀더 다양한 기능을 발휘할수 있다. 즉 인용구안의 폰트 사이즈조절, 간격조절, 색상조절등이 가능하다는 말이다.

.article blockquote {

  font: 28px/28px italic Times, serif;

  background-color: #f2f2f2;

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

  background-position: top 10px left 10px; */

  background-repeat: no-repeat;

  border-left: 20px solid #0fc938;

  padding: 10px;

}

817번째 줄 "font: 14px/20px → font: 폰트사이즈/줄사이간격" 이다.

818번째 줄 "background-color: #EEEEEE; → 인용구의 백 그라운드 색상이다.

822번째 줄 "border-left: 20px → 인용구 좌측의 포인트 넓이를 조절한다.

822번째 줄 "solid #0fc938; → 포인트 색상을 변경한다.

823번째 줄 "padding: 8px; → 글과 인용상자와의 간격을 조절한다.

.

한번씩 조정해 보면서 결과를 보면 어떻게 작용하는지 쉽게 알수 있다.

※조정하기 전에 현재 코드에 대한 백업은 필수 입니다.