안녕하세요 쩡보귀 입니다^^
티스토리 블로그 글을 길게 쓰다 문단을 이쁘게 나누고 싶을때 어떤 방법을 이용하시나요? 보통 띄어쓰기나 중간에 큰글씨로 소제목을 쓴뒤 문단을 나누시죠? 글의 내용이 아무리 좋아도 보는이가 답답하거나 요지를 알아채기 힘들정도로 붙여서 쓴다면 가독성이 떨어져 금방 글에서 이탈하는 경우가 많습니다. 그래서 제가 추천하는 방법은 인용구 활용입니다.
위 사진의 ▲ 큰따옴표가 인용구 탭입니다. 저도 글을 띄어쓰기만 하고 문단을 엔터로 쳐서 나누기만 했지 활용을 잘 못하고 있었는데 글 잘쓰는 블로거들의 글을 보면 인용구 활용을 하여 보기 쉽게 하더라구요. 저도 활용을 위해 큰따옴표를 클릭하여 글을 작성해보았습니다.
이궁 ㅡ_ㅡ ;; 기본으로 설정되어 있는 인용구는 위 사진과 같이 안이쁘게 나오더군요▲ 스킨과 블로그 스타일에 맞게 수정이 가능하지 않을까? 그래서 쩡보귀가 인용구 수정하는것을 알아내 공유하고 합니다^^
티스토리 인용구 수정하는 방법
인용구를 수정하려면 타스토리 관리에서 html의 css 편집으로 들어가야 합니다. 꾸미기의 스킨편집을 클릭해주세요▲
스킨편집으로 들어가시면 오른쪽 상단에 html편집 탭이 있습니다. 그곳을 클릭해주세요. 기존에는 꾸미기에서 html/css 편집탭이 바로 있었는데 얼마전 티스로리 관리자 화면이 바뀌어 스킨편집으로 들어간 뒤 html편집 탭을 찾으셔야 합니다▲
html의 css 편집으로 들어간뒤 상단에 CTRL +F 를 눌러 article blockquote를 치고 엔터를 눌러 검색합니다▲
검색을 하면 위와 같은곳▲을 찾게 되는데 빨간 박스 해놓은곳이 인용구 수정하는곳입니다. 여기서부터 차근차근 따라오시면 쉽게 수정이 되실겁니다.
⊙ font: 14px/20px
14px -인용구 안의 글씨크기 사이즈입니다. 폰트글씨를 더 작게 하거나 크게 하시려면 이 숫자를 바꾸시면 됩니다.
20px -인용구 위아래 줄사이 크기(간격) 입니다. 글사이 윗줄과 아랫줄 간격의 크기 입니다. 마찬가지로 더 작게 하거나 크게 하시려면 이 숫자를 바꾸시면 됩니다.
⊙ background-color
인용구 안의 색상입니다. 참고로 블로스 스킨 색상에서 조금 연한 색깔로 하는것이 본문에 잘어울립니다. html의 색상표는 https://html-color-codes.info/ 이곳을 참조하셔서 원하는 색깔로 바꾸시면 됩니다.
⊙ background-image : url(images/iconBlockquote.gif);
인용구 안에 큰 따옴표를 사용한다는 소스입니다.
⊙ background-position: top 10px left 10px;*/
인용구 안의 큰 따옴표 위치 입니다( 위 아래)
● 저는 인용구 안에 따옴표가 없는것이 시각적으로 더 이뻐 보여 안보이도록 주석처리 하였습니다. 주석처리는 앞에 /* 뒤에 */ 를 넣어주시면 됩니다.
⊙ background-repeat: no-repeat;
인용구 안의 색상이나 이미지 크기를 반복하느냐 안하느냐에 관한 소스입니다. no-repeat 이므로 반복하지 않는 상태입니다.
⊙ border-left: 10px solid
인용구 왼쪽 앞머리에 정해지는 포인트 두께와 색상입니다. 원하는 두께로 크기를 바꾸고 색상도 블로그와 어울리는 색깔로 바꾸시면 됩니다.
⊙ padding: 23px;
인용구 박스의 글과 내부 여백의 크기간격을 조절하는 소스입니다. 숫자를 높이면 글과 인용구박스의 내부 간격이 커지고 낮추면 작아지니 글쓰기에서 미리보기를 통하여 원하는 크기로 바꾸시면 됩니다.
짜잔! 최종 수정한 인용구 스타일입니다. 블로그 스킨과 어울리는 블루계열로 색상을 바꾸니 너무 이쁘네요
자신만의 인용구 디자인으로 글 쓸때 많이 활용해보세요. 소소한 변화지만 가독성이 높아져 블로그를 찾아오는 분들이 늘어날거에요^^
/다른 사람들이 흥미롭게 읽은 글/
