티스토리 반응형 스킨 FastBoot 적용하기

[애드센스-중급강의]반응형 스킨 FastBoot 적용하기

요즘들어 티스토리 도메인을 가진 블로그 중에 아래와 같은 형태의 디자인을 가진 블로그가 많이 보일 것이다. 기존 티스토리의 디자인과는 확연히 다른 디자인을 가지고 있다. 

이런 스킨을 반응형 스킨이라고 부른다. 

아래와 같이 카테고리 목록을 갤러리 형태로도 보여줄 수 있다. 

반응형 스킨은 모바일, 태블릿, PC 가리지 않고 블로그를 기기에 최적화시켜 출력해는 특징을 가지고 있다. PC에서 보는 화면이나, 스마트폰에서 보는 화면이 같다는 것을 의미한다. 대신 창크기의 변화에 따라 텍스트와 사진 등의 크기가 최적의 비율로 보여지게 된다. 

이번 포스팅에서는 반응형 스킨인 FastBoot의 설치 방법에 대해 알아보자. 

설치하기

http://blog.readiz.com/214 로 이동하여 FastBoot v1.6.1.zip을 다운 받는다. 

다운로드 위치 밑에 라이센스에 대해 표시되어 있으니, 꼭 읽어 보기 바란다. 

FastBoot v1.6.1.zip을 다운받도록 하자. 1.6으로 설치할 경우 추가적인 작업을 해주어야 하므로, 꼭 1.6.1을 다운 받도록 한다. 

압축을 풀면 아래와 같이 보인다.

티스토리 스킨 메뉴로 이동하여 스킨등록 버튼을 클릭하여 위의 파일들을 등록한다. 

붉은색의 파일 먼저 올리고, images 폴더의 파일을 다음에 올린다. 

스킨명을 입력한 후 저장 버튼을 클릭한다. 

저장이 되면 아래와 같이 보관함에 보일 것이다. 이 때 주의 사항이 있다. 

.

현재 사용중인 스킨을 꼭 저장시켜두어야 한다. 그리고 html/css 메뉴에 있는 구글 아날리스트 소스, 애드센스 소스, 네이버 신디케이션 소스 등이 있다면 그 부분을 복사해 놓는다.

복사를 해두었으면 반응형스킨을 적용한다. 

다음으로 화면 설정 메뉴에서 선택화면을 목록만을 선택 후 저장한다. 

모바일웹 스킨 메뉴로 이동한다. 위에서 설명했듯이 어떤 기기에서든 동일한 화면을 보여주는 반응형 스킨이기 때문에 모바일웹 스킨을 OFF로 해놓는다. 기존 스킨과 같은 모바일웹을 보여주고 싶다면 ON으로 해놓는다.  

이제 반응형 스킨의 설치 및 설정이 완료되었다. 

위에 복사해 놓은 기존 스킨의 html/css를 참조해서 애드센스 소스, 구글 아날리스트, 네이버 신디케이션 소스 등을 반응형 웹스킨의 html/css에 복사해 놓으면 모든 작업은 완료된다. 

스마트폰에서도 꼭 확인을 해야 한다. 

.