티스토리 북클럽 스킨 글꼴 변경하기 - CSS 수정
애드센스에 최적화 된 기본스킨 《북클럽》에 대한 아쉬움 날려보자.
《북클럽》은 티스토리에서 기본으로 제공하는 스킨 중 하나다. 애드센스에 최적화 되어 있어 수익화 블로그를 운영하는 유저들이 애용하는 스킨이다. 기본으로 제공되는 디자인이라 사용하는데 큰 지장은 없지만, 뭔가 조금 아쉬운 분들을 위해 내 입맛에 맞는 글꼴을 적용하는 방법을 알아 본다.
Step1 : 스킨 편집 → html 편집으로 이동
티스토리 블로그 관리자 페이지 [꾸미기] 메뉴에서 [스킨 편집] 메뉴를 클릭하면 스킨 편집 팝업창이 나타난다.
화면 우측 상단의 [html] 편집을 클릭하여 스킨 편집 메뉴로 이동 한다.
Step2 : CSS 변경 메뉴로 이동
[html 편집]을 클릭하면 아래와 같은 편집창이 나타난다. 우리가 수정할 부분은 CSS이므로 'CSS' 메뉴를 클릭한다.
북클럽 스킨을 적용하고 아무 편집도 하지않은 상태라면 아래 화면의 좌측 하단에 노란색으로 표시된 영역이 수정해야할 부분이다. (23번째행 ~ 32번째행)
수정해야 할 부분을 번호 순서대로 수정한다.
① 구글 웹폰트에서 찾은 글꼴 URL 주소 import (구글 웹폰트에 대한 내용은 아래에서 추가 설명)
② 폰트 변경
③ 폰트 색상 변경
Step3 : 본문 및 나머지 글꼴 수정
<body> 부분만 수정하면 모든 글꼴이 적용되는 줄 알았는데, 본문 글꼴이 변하지 않았다.
그래서 'font-family'로 된 모든 부분을 다 'Gowun Dodum'으로 수정했더니 본문 글꼴도 변경되었다!
자 이제 여러분도 함께 해볼 차례다.
CSS 편집 화면의 빈 공간을 클릭하고 'Ctrl' + 'F'를 누른다. 우측 상단에 작은 탐색창이 나오는데 거기에 'font-family'를 입력하면 10개가 일치한다고 나온다. 'font-family' 뒤에 나오는 내용을 모두 'Gowun Dodum' 또는 원하는 글꼴로 변경하면 본문 및 기타 글꼴도 내가 원하는 글꼴로 적용된다.
구글 폰트 검색 및 적용
구글에서 '구글 폰트'로 검색 후 https://fonts.google.com 로 이동한다. language를 ;'korean'으로 변경하면 구글에서 제공하는 글꼴을 확인할 수 있다. 마음에 드는 글꼴을 찾아서 클릭하면 해당 글꼴 페이지로 연결되는데, 여기서 'Get font'를 클릭 한다.
'Get font' 페이지로 이동하면 '다운로드'와 'Get embed code'를 선택할 수 있다. 우리는 블로그에 적용하는 것이 목적이므로 'Get embed code'를 클릭한다. CSS에 'import' 방식으로 적용하므로 '@import' 버튼을 선택한다.
그러면 이제 다 왔다. 노란색 음영으로 표시된 '@import ~~~' 이 부분을 복사해서 CSS 스킨 편집 23번째 행 밑에 붙여 넣으면 된다.
축하한다!
여기까지 완수 했다면 우리는 기본 스킨에서 벗어나 유니크한 나만의 글꼴로 블로그를 할 수 있게 되었다!!!
