'블로그에 어떠한 컨텐츠를 담고 있는가'도 물론 중요하지만, 아무래도 블로그의 첫 인상에 가장 큰 영향을 주는 것 중에 하나가 바로 스킨입니다. 따라서 방문자에게 좋은 인상을 남기고 싶다면 블로그 스킨도 신경써야 합니다.
며칠 동안 블로그 스킨을 바꾸기 위해 마음에 드는 디자인을 여기저기 검색을 하다가 괜찮은 반응형 스킨을 발견했습니다. 스킨의 이름은 FastBoot이고, 2017.03월 현재 1.6.2 버전까지 나와있네요. 무료스킨인데 퀄리티가 상당히 우수한 것 같습니다. 주의할 점은 스킨을 사용하려면 페이지 하단에 저작권 표시는 그대로 두어야 합니다. 스킨을 요리조리 살펴보니 <상단 메뉴바 + 우측 사이드바> 조합의 가장 일반적인 형태의 UI를 깔끔하게 표현해 낸 스킨 같네요.
오늘부터 옷을 하나씩 바꿔입히는 기분으로 새로운 스킨을 적용한 뒤에 하나씩 커스텀해볼까 합니다. 최대한 쉽게 이해할 수 있도록 설명하려고 하니, FastBoot 스킨을 적용하고 싶으신 분들은 그냥 천천히 따라오시면 됩니다. 하나씩 파보자구요~!
설치파일 다운로드 및 압축풀기
일단 설치파일을 다운로드 하기 위해 아래의 제작자의 블로그를 방문합니다. (아래 링크)
▲ 제작자 홈페이지
다운로드가 완료되면, 다운로드 받은 파일의 압축을 풀어줍니다. (폴더의 경로를 잘 기억해 두세요.)
▲ 압축풀기
티스토리에 스킨파일 업로드하기
자신의 티스토리블로그 < 관리자 페이지 >로 접속한 뒤, 왼쪽 < 네이게이션 > 메뉴 중 < 꾸미기 > 영역에 있는 < 스킨 > 메뉴를 클릭합니다.
스킨 페이지에서 상단에 < PC > 나 < PC보관함 >을 누르면, 오른쪽 상단에 < 스킨등록 >이라는 버튼이 있습니다. 이 버튼을 클릭하여 스킨등록을 계속 진행합니다.
새로운 스킨을 적용하는데 필요한 파일들을 업로드 하는 곳입니다. 페이지 하단에 있는 < 추가 > 버튼을 클릭합니다.
파일을 추가할 수 있는 팝업창이 뜨면, 스킨파일을 다운로드 받아서 압축을 풀었던 경로를 찾아갑니다. 경로를 찾아가면, <images 폴더>와 몇몇 파일들이 보입니다. < images 폴더 >를 제외하고, 나머지 파일들을 드래그(Drag)해서 전부 선택해 줍니다. 그리고 우측아래에 있는 < 열기 > 버튼을 눌러서, 파일들을 업로드해 줍니다.
※ 파일이름에 preview가 들어가는 gif, jpg 등의 이미지 파일 3가지는 빼셔도 됩니다. 스킨 확인용 이미지이며 스킨 작동에는 불필요한 파일입니다.
업로드가 완료되면, 위와 같이 업로드가 완료된 파일들이 보입니다. 다시 한번 하단에 있는 < 추가 > 버튼을 클릭합니다.
이번에는 < images 폴더 > 안에 있는 모든 파일을 드래그(Drag)하여 선택한 뒤에, < 열기 > 버튼을 클릭해서 모두 업로드 합니다.
업로드가 완료되면, 우측 상단에 < 스킨 저장명 >란에 스킨의 이름(보관용 이름)을 적어줍니다. 그리고 하단에 있는 < 저장 > 버튼을 클릭해서, 스킨을 저장합니다.
스킨저장이 완료되면, 아까 추가했던 파일들이 사라지게 됩니다. 이 때 좌측 메뉴바에서 < 스킨 > 메뉴를 클릭합니다.
스킨 페이지에서 상단 탭 중 < PC보관함 >을 클릭하면, 위와 같이 새롭게 등록한 스킨을 확인할 수 있습니다.
업로드한 반응형 스킨적용하기
스킨을 적용하려면, 스킨페이지의 < PC보관함 > 탭에서, 원하는 스킨의 < 적용 > 버튼을 누른 후에, 적용이 완료될 때까지 기다리면 됩니다.
여기까지가 일차적으로 새스킨 파일이 적용된 모습입니다. 일차적으로 손봐야 할 곳이 몇 군데 눈에 띄네요. 차차 하나씩 손보기로 하고 일단 여기서 2가지 더 해주어야 할 것이 있습니다. 바로 스킨 제작자가 권하는 추가적인 세팅입니다.
추가적으로 세팅할 것들
1. 모바일 스킨 끄기
2. '꾸미기 ▶화면설정 ▶ 화면출력 ▶ 선택화면' 을 '목록만'으로 설정
기본적으로 카테고리가 갤러리형태로 되어 있습니다. 카테고리가 보여지는 형태는 크게 3가지 입니다.
(1) 갤러리형 (기본)
(2) < 이미지+글 > 리스트형
(3) 심플리스트형
이렇게 3가지 입니다. 이 3가지 형태 중에 (1)과 (2)의 형태로 사용하고자 할 때에는, 꾸미기 ▶화면설정 ▶ 화면출력 ▶ 선택화면 을 '목록만'으로 설정해주어야 합니다.
이제 원하는 모습대로 하나씩 바꿔나가면 됩니다. 일단은 폰트부터 바꿔주고, 레이아웃도 조금씩 변경해볼까 합니다.
# 코드강조의 대명사 SyntaxHighLighter 최신버전 설치 및 사용방법
'Blog > 스킨관련' 카테고리의 다른 글
| FastBoot 타이틀 제목 링크걸기 (2) | 2017.03.13 |
|---|---|
| FastBoot 블로그스킨 상단메뉴바 커스텀하기 (0) | 2017.03.13 |
| 블로그폰트 무료 웹폰트로 적용하기 (2) | 2017.03.12 |