티스토리를 기본 폰트가 가독성도 너무 낮고(?) 개발자 입장에서 많이 사용하게 되는 코드블록도 잘 안보이고, 전체적으로 마음에 안들어서 폰트와 기존에 있는 요소들을 바꾸고 싶어졌다. 그런데 아무리 찾아봐도 폰트를 바꾸는 기능이 없길래 찾아봤더니, HTML, CSS를 직접 바꿔야하는 문제가 있었다.😂
개발자가 아닌 사람은 헤맬수도 있을것같아서 차근차근 정리하려고 한다.
티스토리 블로그 폰트 변경하는 방법
📍 참고로 윗줄 단락으로 구글링을 하면 최상단에 나오는 블로그가 있는데, 그분이 쓰신거를 기반으로 했다. 다만 나의 경우만 그런건지....아니면 티스토리가 업데이트가 되어서 그런건지 약간(?) 다른 부분이 있어서 추가적으로 정리한다는 느낌으로 적어본다.
1. 내가 원하는 폰트를 가지고 온다(어디서 가져오느냐!)
일단 여기서 아래의 폰트들을 사용했다. (해당 사이트로 들어가서, gmarket이라고 검색하면 종류별로 나온다.)
선택했으면, 내가 원하는 폰트를 클릭해준다. 그리고 '웹폰트로 사용'에 있는 부분을 복사해두자! 이러면 1단계는 완료가 되었다. 2단계로 넘어가자
2. 티스토리의 관리자 페이지(어드민 페이지)로 접속한다. 어드민 페이지는 티스토리 메인 페이지를 접속했을때, 내 프로필을 클릭하면 톱니바퀴(?)가 있는데 그걸 말한다. 그럼 이제 관리자 페이지가 나오고, 좌측에 보면 스킨 편집이라는 부분을 확인할 수 있다. 클릭!
클릭하면 이런 페이지가 나오게 되는데 우측에 스킨 편집이라는 곳 아래에 보면 html편집이라는것이 보인다. 이 부분을 클릭해준다.
클릭하게 되면 상단에 HTML로 들어가게 되는데, 이 부분을 먼저 CSS로 옮겨준다. 그리고 눈누 사이트에서 우리가 복사해둔 글꼴을 textarea 아래에 복사해주고, textarea에 있는 font-family에 우리의 font-family를 추가해준다.
추가적으로 특정 요소 요소들을 커스텀하고 싶을 수도 있으니, 간단한 꿀팁(?)😁을 주자면, F12를 눌러서 개발자 도구를 사용하는것이다.
예를 들어보자 만약 아래와 같이 카테고리의 크기만 줄이고 싶다던지,, 뭐 카테고리만 특색있는 글꼴을 쓰고 싶을때를 말한다.
이럴때 바로 F12를 눌러서 저 부분이 어떻게 구성되어 있는지만 알면 수정할 수 있다. 잘 안보일 수 있는데, 자세히 보면 우측 상단에 파란색으로 동그라미 쳐둔곳이 있다
저 부분을 클릭하고 내가 수정(?)하고자 하는 부분에 가져다댄다. 개인적으로 나는 방문자 숫자가 너무 작아서 키우려고 한다. 아래와 같이 방문자수쪽으로 가져다대고, 관리자도구를 확인하면 font-size에 대한 정보를 얻을 수 있다. 내 경우는 #sidebar .counter라는 곳에 font-size가 13px로 되어있다. 이 다음에 여기서 저 폰트를 수정해보면 실제 사이트상에서 폰트가 커지고 작아지는것을 볼 수 있다. 그럼 #sidebar .counter를 실제 수정작업을 해서 블로그에 적용시켜보자!
다시 티스토리 스킨편집>html편집>CSS로 돌아와서, 위에서 찾아낸 #sidebar .counter 이 이름을 가진 녀석(?)을 찾아준다! 그럼 아래와 같이 개발자도구에서 본 font-size가 있는데, 이 부분을 수정해주면 내가 원하는 크기 혹은 폰트로 수정할 수 있다.
두서없이 적은거 같은데,,,글쓰는 연습좀 더 열심히 해야겠다..😂😂😂😂