티스토리 블로그 인용 색상 및 디자인 변경

티스토리는 솔직히 편의성은 빈말으로도 좋다고는 할 수 없는 편입니다.

블로그 포스팅을 보다보면 아래와 같은 디자인의 제목들이 보이는데 처음에는 기본으로 지원하는 인용기능인줄 알았는데 HTML 코드를 수정해서 직접 디자인 해야된다는 걸 알았습니다.

원하는 디자인과 인용 기본디자인

하지만 간단한 포스팅의 경우 그래도 지원하는 기능을 쓰는게 편한데 인용문의 색상과 기본 디자인을 영구적으로 수정하는 방법을 알려드리겠습니다.

- 티스토리 관리 페이지 > 꾸미기 : 스킨편집 > html 편집으로 이동합니다.

- html 탭이 아닌 css 탭을 클릭하여 blockquote(블록 쿼드)를 검색합니다.

- 여러개가 검색이 될텐데 'style'로 지정된 구역을 찾아 이 부분의 코드를 수정해주면 됩니다.

- 스타일 1부터 인용문1,2,3 순서입니다. (아래 이미지 참고)

인용문 1,2,3

<각 요소설명>

• text-align: 텍스트 정렬 방법을 지정. (left는 왼쪽 정렬, center는 가운데 정렬)
• background: 배경 이미지 및 배경 관련 속성. (URL을 사용하여 이미지를 배경으로 설정)
• padding: 요소 내부 여백을 설정. (위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 값을 설정하여 여백을 만듭니다)
• font-size: 글꼴 크기를 설정. (예: 1em은 기본 크기, 2em은 두 배 크기)
• color: 글자 색상을 설정. (RGB 값을 사용하여 색상을 지정)
• line-height: 줄 간격을 설정. (글자 크기의 몇 배로 줄 간격을 넓힙니다)
• border: 테두리의 스타일, 두께 및 색상을 설정.. (solid는 실선, none은 테두리가 없음)
• font-family: 글꼴을 설정. (글꼴 이름을 지정)
• border-color: 테두리 색상을 설정.
• border-width: 테두리의 두께를 설정.
• border-style: 테두리 스타일을 설정.
• background-color: 배경 색상을 설정. (색상 코드를 사용하여 배경색을 지정)

- 위 요소들을 원하는 디자인으로 적절하게 조절해주면 됩니다. 색상은 컬러코드를 클릭하면 자동으로 색상도구가 나오니 즉석으로 고를 수 있습니다.

- 저는 위 코드로 비교적 색깔부분만 수정해봤습니다.

• 1번 인용문 : 텍스트 색상을 검정으로 변경
• 2번 인용문 : 텍스트와 블록 색상을 검정으로 변경, 글자 크기를 2배로 변경
• 3번 인용문 : 배경색은 유지, 텍스트 색상만 더 진하게 변경

- 이후 적용을 누르면 이후 사용하는 인용문들의 디자인이 변경됩니다. 글 작성중에는 동일하게 보일 수 있지만 실제 포스팅 이후에는 변경된 디자인으로 표시됩니다.

변경 전 인용문

변경 후 인용문

- 비교를 위해 변경전 인용문과 변경된 인용문 디자인입니다.

이 글이 도움이 되셨길 바라며, 앞으로도 많은 유용한 정보가 있으면 소개하겠습니다.

감사합니다.