처음 블로그를 만들었을 때는 기존에 사용하던 네이버 블로그와 크게 다를 게 없다는 생각이 들었습니다.
하지만 다른 티스토리 블로그들을 찾아보니, 각양각색의 스킨을 사용하는 것을 볼 수 있었습니다.
문득 '나도 블로그를 더 가독성 좋게 만들면 어떨까?' 하는 생각이 들어 몇 가지 스킨들을 찾아보게 되었습니다!
목차
0. 티스토리 블로그 스킨 찾기
티스토리 블로그 스킨은 기본적으로 무료 스킨과 유료 스킨으로 나눠집니다.
무료 스킨 중에서도 기본적으로 티스토리가 제공하는 7가지 스킨과
유저들이 직접 만들어서 배포하는 스킨들이 존재합니다.
티스토리 스킨 : www.tistory.com/skin
티스토리 유저스킨 : www.tistory.com/userskin
유저들이 배포하는 스킨중에서 일부는 돈을 내고 사용하는 스킨이 존재합니다.
개인적으로 유료 스킨 중에서는 JB SKIN 시리즈가 가장 무난해 보이더라구요! (가격은 5만원입니다)
유료로 배포하는 스킨들의 장점은 확실한 사후 지원, 그리고 관리의 편리함 정도가 있겠네요.
아무래도 돈을 받고 파는 제품(?)이다보니 철저하게 관리가 되겠죠.
하지만 저는 이제 막 블로그를 시작했고, 나름 HTML과 CSS를 어쩌다 맛본 적이 있다보니 굳이 유료 스킨을 쓸 필요가 없다고 생각했습니다. 그렇다고 맨땅에 헤딩하듯 틀을 다 짜는 것은 귀찮기도 하고 못하기도 해서 괜찮은 무료 스킨을 찾다가 발견하게 된 것이 바로 지금 사용중인 고래 스킨 4.0입니다. 선택 이유는 깔끔해 보여서입니다. (스킨 선정에는 1분도 안걸렸던 것 같습니다 ㅋㅋㅋㅋ)
고래 스킨 : privatenote.tistory.com/28
[고래 스킨 4.0] 티스토리 스킨 배포 2020.11.01
티스토리 고래 스킨 4.0 안내 안녕하세요. 고래의 개인 노트입니다. 꼭 필요한 기능과 최소한의 디자인, 깔끔한 스킨을 원하시는 블로거분들을 위해 티스토리 반응형 스킨 고래 스킨을 배포합니
privatenote.tistory.com
1. 티스토리 블로그 스킨 사용
이제 틀이 될 스킨을 골랐으니, 스킨을 업로드해야 합니다. 꾸미기의 스킨 변경 탭에 들어갑니다.
그러면 스킨을 변경할 수 있는 창이 뜨는데, 여기서 오른쪽 위의 스킨등록 + 버튼을 눌러줍니다.
창이 하나 뜨는데, 여기서 추가버튼을 눌러서 파일을 넣어줍니다.
파일을 넣어줄 때는 폴더를 선택해서 넣는 것은 불가능하니
폴더 내부에 들어가서 파일들을 하나하나 추가해줍시다.
그리고 저장버튼을 눌러줍니다.
이 작업이 끝나고 나면 스킨 보관함에 넣은 스킨이 있을 것입니다.
이 스킨을 사용하면 끝입니다.
2. 티스토리 블로그 스킨 입맛대로 수정하기
제가 가장 먼저 바꿔야겠다고 생각한 것은 바로 메인화면의 맨 윗부분(헤더)의 색상과 글씨체입니다.
친절하게도 제작자분께서 따로 html/css를 만지지 않아도 색깔은 바꿀 수 있게 해 놓았습니다.
스킨 변경 아래에 있는 스킨 편집 탭에 들어갑니다.
그럼 화면이 2개로 나뉘는데, 오른쪽에서 맨 아랫부분에 배경색을 변경할 수 있는 부분이 있습니다.
여기서 원하는 색으로 변경하거나 옵션들을 수정해줄 수 있습니다.
저는 처음에 저 부분을 못 찾아서 html로 수정해주려고 열심히 찾아다녔습니다..(뻘짓 ㅠ)
굳이 html에서 수정해 주고자 한다면 저 부분에다가 원하는 색상(색상코드, 혹은 영문 색상명)을 넣어주셔도 바뀝니다! 대신 이렇게 바꾸면 레이아웃 설정에서 헤더영역 배경색 선택에서 바꿀 수가 없게 됩니다. 그렇기 때문에 뻘짓입니다 하지마세요. (?)
추가로 저는 헤더부분의 블로그명 글씨체도 변경해줬는데요, 이 부분은 구글 웹폰트에서 폰트를 불러와 html과 css에 적용하는 방식으로 할 수 있었습니다. (대신 이 폰트를 변경함으로써 제작자분이 해 놓으신 최적화는 조금 깨질 수 있습니다)
구글 웹 폰트(한국어) : fonts.google.com/?subset=korean
위 사이트에 들어가셔서 원하는 폰트를 찾아서 클릭합니다. 저는 나눔 펜 스크립트라는 폰트를 사용했어요.
클릭하면 다운로드 말고 Select this style라는 메뉴가 있습니다. 이걸 눌러주세요.
그러면 사이드에 뭐가 뜨는데, 여기 있는 html 코드를 복사해서 html의 헤더부분에다가 넣어주면 됩니다.
이제 css도 수정을 해줍시다. css탭에 들어가서 ctrl+f 신공으로 header를 검색해서 중간쯤 몰려있는 곳에 보면 header-title이라는 곳이 있습니다. 여기에다가 구글 웹폰트에서 제공하는 CSS rules families를 적어줍시다.
사진상으로는 773줄이네요.
저는 조금 더 자연스럽게 보이게 하려고 폰트 사이즈(font-size)와 폰트 굵기(font-weight)를 수정해줬어요. 이건 여러분들 입맛에 따라 조정하면 되겠습니다! (글씨 색도 똑같이 색상코드나 색상 영문명을 통해 변경할 수 있습니다!)
그리고 적용버튼을 누르고 새로고침을 해서 확인해보면 됩니다. 아래는 수정 완료된 블로그 헤더입니다.
2.0. [20.01.22 추가] 모바일 환경 타이틀 폰트사이즈 수정
반응형 웹이다보니 모바일에서 바꾼 글씨체의 글씨가 작아지는 현상이 있을 수 있습니다! (글씨체마다 다릅니다)
이런 경우에는 따로 모바일 화면의 font-size를 바꿔주면 됩니다.
width가 600 이하인 경우의 header-title a태그의 css에서 font-size를 키워주면 문제가 해결됩니다.
지금까지 간단하게 스킨을 받아서 적용하고 수정하는 방법에 대해 알아봤습니다.
다음에는 조금 더 업그레이드 시킬 부분을 찾아서 또 수정해볼 생각입니다. (벌써 시간이 아침 6시가 가까워지고 있어서 오늘은 여기까지..)
최근댓글