#1 티스토리 블로그 타이틀 폰트 변경하기!

 

무작정 티스토리로 넘어와서 뭔지 모를 깔끔함도 좋지만 아무래도 꾸미는데 네이버블로그보다 제약이 느껴진다...ㅠ

네이버보다는 아무래도 html과 css쪽에 기본 지식이 있어야 꾸미는게 좀 더 수월한 구조이다보니 어쩔 수 없을 듯.

그래도 마냥 낯설지는 않은 html과 항상 프론트엔드에서 웹개발 관련 내용을 들을 때면 등장하는 css 구경이라도 해보자는 느낌으로 하나씩 뜯어고쳐보기로 해본다.

 

우선 스킨은 아무래도 글이 위주다보니 '북클럽' 스킨으로 선택했는데, 이래저래 검색하다보니 가장 많이들 선호하는 스킨이라고 한다. 역시 사람 눈이 다 똑같지.. 우선 다 괜찮고 딱 맘에 안드는게 타이틀 폰트..인데 각종 블로그 및 유튜브를 참고하여 아래와 같이 변경하였다!

 

 

디폴트 폰트

폰트 수정 후

 

1. https://fonts.google.com/?subset=korean 

Google Fonts

 

우선 위 사이트에 접속하면 한국어 지원되는 폰트들을 확인해볼 수 있다.

상단에 원하는 글자를 입력해보면 아래와 같이 해당 폰트를 선택했을 때 미리보기가 가능하다.

원하는 폰트를 골랐으면 해당 폰트를 클릭.

 

 

폰트 테스트 입력 화면

 

폰트 화면으로 들어오면 아래의 경우는 Regular 400 하나만 있는 경우인데,

Thin 등 옵션이 여러 개가 있는 경우가 있으니 원하는 옵션의 + 부분을 클릭하고 우측 상단 네모 4개짜리 버튼을 클릭!

 

링크 확인을 위한 폰트 선택

 

클릭하면 아래와 같이 우측에 사이드화면이 뜨는데, @import로 클릭한 후 아래 네모친 두 텍스트를 복사해놓는다.

이제 거의 70%쯤 다 왔음!

 

url 복사 화면

 

2. 티스토리 블로그 관리 메뉴로 이동

 

블로그명.tistory.com/manage 입력하거나 관리메뉴를 누르면 블로그 관리메뉴로 이동할 수 있다.

우측 메뉴 중 아래의 '스킨편집' 메뉴로 이동.

 

 

스킨 편집 선택

 

우측 상단에 html편집을 클릭.

 

html 편집 선택

 

타이틀 폰트 변경을 위해 건드려야 하는 부분은 CSS에서 찾을 수 있다.

디테일한 정의는 나도 잘 모르지만 HTML은 홈페이지의 뼈대, CSS는 뼈대에 살을 붙이는 기능을 한다고 보면 된다.

폰트는 후자에 가까우므로 CSS..인 것으로 대충 결론지음..!

 

복사1

 

위에 복사했던 상단 텍스트에서 <style> </style> 만 제외한 부분을 아래 CSS의 23행에 붙여넣었다. 

 

CSS화면

 

그리고 하단 텍스트를 통채로 아래 128행에 붙여넣었다.

127 ~ 133행까지 수정을 통해 타이틀의 폰트 외에 크기(font-size)나 색상(color), 두께(font-weight) 등을 추가로 변경해볼 수 있으니 디테일한 수정을 원하면 조금씩 숫자를 변경해보면 원하는 스타일을 만들 수 있다.

 

복사2

 

CSS화면

 

막상 이곳저곳 참조하며 작업했음에도 UI가 변경되었는지 조금씩 막히는 부분들이 있어 처음 수정해보는 입장으로 다시 재작성해보니 내가 다시 변경할 일이 있을 때도 참조해볼 수 있을 것 같다.

 

확실히 커스터마이징이 가능하다는 면이 네이버 블로그와 비교해보면 나름의 재미가 있는 영역인 것 같고, 어렵지만 하나하나 수정해서 완성된 블로그에 아무래도 애착이 많이 가지 않을까 싶은 생각이 든다.