본문 바로가기

Miscellaneous/티스토리

티스토리 Tip!! 스킨 속 폰트크기,두께 등 조절하기!!

반응형

안녕하세요.

 

오늘은 티스토리 Tip 4탄으로

글 제목이 길어져 스킨속 문구가 겹쳐보이거나 문제가 생기시 수정방법에 대하여 포스트를 진행하겠습니다.

(우선 제가 사용하는 스킨 'Whatever'에 대하여 작성하였으며, 만약 스킨이 달라 도움이필요하시면 댓글에 남겨주세요!!)

 

 

인간수업 리뷰 포스트를 작성하고 바로 인기글이 되어 슬라이드 설정에 따라 첫번째로 소개되는 포스트가 되었어요.

하지만 < > 모양과 폰트가 겹쳐지는 문제가 바로 발생하였고 해결하는 과정에서 저와같은 문제로 고민중인

초보 블로거분이 혹시라도 있을까봐 포스트를 해야겠다는 생각이 들었습니다!

 

첫번째 사진과 두번째 사진속 폰트의 차이점이 바로 확인되시죠?

(이렇게 사용하고자 수정한 것이 아니라 설명을 쉽게하기 위해 폰트의 색,위아래 공백,크기를 수정하였습니다.)

사실 대부분의 블로거 분들이 저보다 디자인적 감각이 있으니 방법만 설명하면 예쁘게 꾸밀수 있을 겁니다.ㅎ

 

자 이제 방법적인 설명을 드리자면

자신의 티스토리에서 설정 - 스킨편집 - HTML 편집 - css편집화면 으로 이동하셔야 합니다.

(다음에 전체적은 폰트를 수정하거나 추가하는 Tip을 포스트할 예정으로 그때는 html까지 편집을 해야하지만 

오늘처럼 폰트의 크기,두께,색 정도만 수정하는거면 css만 수정하여도 충분합니다!)

 

 css편집화면에서 'ctrl + f'를 눌러 '.cover-slider ul li .text-box .title' 를 찾아줍니다

(다시한번 말씀드리지만 제가 쓰고있는 Whatever 스킨 기준이며 다른 스킨도 방법적인 부분은 같습니다!)

 

1. font-weight:300;

- 혹시 지금 제 메인화면을 보셨다면 위 사진속 폰트들의 두께가 달라졌다는 것이 보여지실텐데요.

바로 이부분을 수정하면 두께가 변경이 됩니다.

2. font-size: 2.5em;

- 영문 그대로 슬라이더 폰트속의 크기 입니다.

3. line-height:4

- 첫 사진과 두번째 사진을 비교해보시면 위아래 공백의 크기가 달라진것을 확인할 수 있으실텐데요

바로 그 공백으 크기입니다 크기가 커질수록 공백이 커집니다.

4. color:#fff; 

- 슬라이더 폰트 속의 색을 변경하는 부분입니다. 

저는 개인적으로 포토샵이나 일러스트에서 원하는 색의 #문자를 찾아서 적용하시는 걸 추천드립니다!.

 

이 외에도 < >의 간격 크기 등등 티스토리의 이점으로 많은 부분을 

블로거의 스타일에 맞게 설정이 가능합니다.

 

제가 모든걸 설명드리고 싶지만 시간도 능력도 부족하기에 ㅜㅜ

개인적으로 하나씩 수정하고 새로고침으로 자신만의 티스토리를 꾸며보시는 것도

하나의 재미라고 생각합니다.

 

그래도 혹시라도 질문이 있다면 댓글로 문의주세요.

다음편에는 티스토리에 폰트를 추가하는 방법으로 찾아뵙겠습니다.

 

감사합니다!