티스토리 이전 글 넣기 인용구로 적용 해 색변경 하기

안녕하세요. 자유로운호걸입니다. 티스토리에서 제공하는 '이전 발행 글 링크 삽입' 플러그인을 적용해서 이전 글을 넣을 때마다 드는 생각이 기본적인 서식이 마음에 들지 않는 것이었다. 항상 크기와 색을 변경해줘도 눈에 띄지 않을뿐더러 매번 설정해줘야한다는 것이다. 그래서 이전 발행 글을 방문자의 눈에 확 띄고, 간편하게 예쁘게 설정 할 수 없을까 하고 이곳저곳 뒤적여 보았다. 그래서 오늘은 이전 글 넣기를 티스토리에서 제공하는 인용구를 사용해서 눈에 확 띄게 변경해 볼 것이다. 

티스토리 이전 글 넣기 인용구로 적용 해 색변경 하기

티스토리의 이전 글 넣기를 사용했다면 기존 글과 큰 차이가 없이 나타날 것이다. 그리고 이전 글 넣기를 인용구에 넣는다고 하더라고 모양이 별로 이쁘지 않을 것이다.

아래 그림은 이전 글 넣기를 사용해 Test 카테고리의 abc라는 제목의 글을 넣은 모습니다.

아래 그림은 위의 내용에 티스토리 글쓰기에서 제공하는 인용구를 적용시킨 모습이다.

두가지 모두 별로 마음에 안든다. 좀 더 눈에 띄고 예쁜 서식으로 변경해보자. 그러려면 우선 CSS를 수정해야한다. 크게 어렵지 않으니 따라하면 된다. 일단 티스토리 관리에서 HTML/CSS 변경을 눌러 CSS코드를 수정하자.

필자는 인용구를 설정해서 서식을 변경해 보겠다. FastBoot 스킨을 사용하면 동일하게 하면된다. 스킨이 다르더라도 변경하는 것은 거의 유사하니 따라하면 된다. Ctrl+F로 검색창을 활성화시켜 'blockquote' 로 검색을 한다. 그러면 .article blockquote{} 을 볼 수 있을 것이다. 이 부분이 본문 내용의 인용구에 관한 내용이다. 

font 는 인용구의 글자크기, background-color는 배경 색, background-image는 배경 이미지, background-position은 배경 위치, border는 인용구 왼쪽에 나오는 굵은 선, padding은 글자와 인용구 박스와의 간격이라고 보면된다.

필자는 위와 같이 인용구 설정을 수정했다. font는 24px/34px로   앞의 숫자는 글자 크기이고 뒤의 숫자는 줄간격이다. 그리고 background-color 배경색은 흰색으로, background-image는 주석처리를 해서 적용을 하지 않았다. 그리고 Border-left 사이즈를 20px으로 키워 더 굵게 했고 색은 연한 보라색을 주었다. padding 값을 줄여 박스와의 간격을 줄였다.

위와 같이 수정을 하고 저장을 하면 인용구를 적용한 이전 글이 더욱 눈에 띄게 나타날 것이다. 아래 이전 글 넣은 모습이 인용구 서식을 설정한 모습이다.

티스토리 이전 글 넣기

티스토리 카테고리의 글 더보기 없애기

FastBoot 본문 글자 크기 변경하기

여기서 언급하지 않은 부분은 링크가 걸린 url의 색 지정과 마우스를 올렸을때 밑줄 색 변경이 있다. 이것은 이후에 다루도록 하겠다.