티스토리 인용구 색상과 폰트 설정하기

오늘은 티스토리에서 지원하는 인용구 blockquote를 수정하여

인용구에 폰트와 디자인을 입맛대로 설정해 봅시다

 

 

해당 인용구를 사용했을 때 폰트와 디자인을 변경할 겁니다

 

1. 인용구에 적용할 색상을 선택하자

 

구글에 '색상 선택 도구'를 검색하여 인용구에 적용할 색깔을 선택해 주세요

HEX 값을 복사하여 티스토리 css 편집에서 사용할 겁니다

 

2. 인용구에 적용할 폰트를 선택하자

 

눈누

적용할 폰트를 눈누 사이트를 통해서 선택하시면 됩니다

상업적 무료로 사용할 수 있습니다

 

전 '넥슨 배찌체' 를 선택했습니다

여기서 오른쪽 부분에 [웹폰트로 사용] 항목을 복사해 주세요

 

3. 티스토리 인용구(blockquote) 수정하기

 

[블로그 관리 홈] > 꾸미기-스킨 편집 > html 편집을 클릭해 주세요

 

 

CSS 항목을 클릭합니다

ctrl+f 단축키를 이용하여 'blockquote'를 입력해 주세요

 

.article-view blockquote {
    margin: 0;
    padding-left: 19px;           #인용구 위 아래 간격 폭
    border-left: 1px solid;       #인용구 글자 옆 두께
    font-size: 16px;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.54);   #인용구 글씨 색깔
}

오디세이 스킨 기준 초깃값입니다

이 코드를 변경하겠습니다

.article-view blockquote {
    margin: 0;
    padding-left: 10px 15px;               #인용구 위 아래 간격 폭
    border-left: 10px solid #b30b0b;       #인용구 왼쪽 두께
    border-bottom: 1px solid #b30b0b;      #인용구 밑줄 두께
    font-size: 22px;
    font-family: 'Bazzi';                  #글씨체  
    color: #01030a;                        #글씨 색깔
}

여기서 #b30b0b 값은

색상 선택 도구에서 선택한 HEX 값을 적어주시면 됩니다

font-family는 눈누 사이트에 선택한 폰트를 적용한 겁니다

 

font-family에 적용하기 전에 눈누 사이트에서 복사한 

@font-face 값을 붙여넣기 해주세요

수정이 끝났으면 [적용] 버튼을 눌러 주세요

 

이렇게 예쁜 인용구를 사용할 수 있습니다

 

오늘은 인용구에 폰트와 디자인을 변경해 봤는데

수정한 인용구를 사용하여 좀 더 예쁜 글을 작성해 보세요!