[FastBoot] 티스토리 반응형 애드센스 스킨 적용하기

티스토리 반응형 애드센스 스킨인 Fastboot(패스트부트) 스킨으로 교체 하는 방법에 대해 적어보도록 하겠습니다.

일반 스킨을 적용하고 사용하게 되면 http://mystarlight.tistory.com/m 과 같이 모바일용 웹화면으로 자동 이동 옵션을 사용해서 사용자가 모바일에서 블로그로 접속하면 모바일용 URL로 접속하게 됩니다.
티스토리 모바일 블로그는 커스텀마이징이 불가능하기 때문에 반응형으로 하여 PC 데스크탑이나 태블릿이나 모바일 등으로 접속하더라도 우리가 커스텀마이징한 웹을 원할하게 볼 수 있도록 하기 위함입니다.
FastBoot를 선택한 이유는 다른 스킨보다 모양이 예쁘고 애드센스를 붙이기에 적합해서 FastBoot를 사용중이랍니다.

1. 작업전 현재의 스킨을 백업합니다.
   아래의 그림처럼 티스토리 관리에서 꾸미기의 스킨으로 이동합니다.
   PC보관함 탭으로 이동하고 "스킨저장" 버튼을 눌려 저장합니다. 저장하게 되면 아래에 "fastboot_20170625" 처럼 저장 시 입력한 이름으로 저장되어 언제든지 "적용"버튼으로 스킨을 원복 할 수 있습니다. 
   "스킨 다운로드" 버튼으로 스킨을 PC에 다운로드 저장 할 수도 있으니 참고해주세요.

2. Fastboot(패스트부트) 다운로드 합니다.
   http://blog.readiz.com/214 Fastboot에서 내용 가운데쯤 있는 다운로드에서 FastBoot v1.6.2.zip를 다운로드하고 압축을 풉니다.

3. 티스토리 스킨을 업로드 합니다.
    티스토리 관리 화면에서 꾸미기의 HTML/CSS 편집 메뉴를 클릭합니다.
    아래 그림처럼 편집 화면애 새창으로 열리면 FastBoot의 skin.html 내용을 열어서 HTML에 붙여넣기 합니다. 이때 주의 하실 부분이 메모장으로 열었다면 메모장의 서식 > 자동 줄 바꿈 기능을 해제 한 후에 진행해야 합니다.
   style.css 파일의 내용은 CSS 탭을 누르고 붙여넣기 합니다.

여기까지 되었으면 파일업로드 탭을 선택해서 파일을 업로드 할 차례입니다.
화면 아래에 "전체선택"을 선택하면 기존에 존재하는 파일이 모두 선택 되어 집니다. 그리고 "삭제" 버튼을 눌려 모두 삭제합니다.
"추가"버튼을 클릭해서 두 번에 걸쳐 파일업로드를 해주면 됩니다. 다운로드한 FastBoot 폴더에서 images 폴더를 제외하고 모두 선택한 후 "열기"버튼으로 업로드합니다.
다시 "추가"버튼으로 FastBoot의 images 폴더로 들어가서 모두 선택 후 "열기" 버튼을 눌려 모두 업로드 합니다.
 index.xml, style.css, skin.html 파일은 업로드 안될 것이고 무시합니다.
작업이 완료되었으면 상단 오른쪽의 "저장" 버튼을 꼭 눌려주세요. 그래야 스킨이 적용된답니다.

적용한 화면의 메인화면은 이렇습니다. 저는 별로 마음에 들지 않아 티에디션으로 메인화면을 꾸몁답니다. 애드센스를 적용하면 이렇게 내용에 스크립트도 표시되서 별도로 수정을 해주어야 한답니다.

4. FastBoot 블러그 메인화면 티에디션으로 바꾸기
  HTML/CSS 편집에서 HTML의 다음 부분을 찾아서 "var f_enableTedition = true;"로 수정하고 저장합니다.

---------- T-Edition Enable    false: Use FastBoot Index (Default)    true: Use T-edition ------------------------------- */ var f_enableTedition = true; </script>

꾸미기의 화면 설정 메뉴로 들어가서 티에디션 탭에서 "사용하기"버튼을 누르고 티에디션을 눌려서 티에디션 편집화면으로 들어가서 모양을 꾸며주면 된답니다.

TIP! 오늘 이 글을 포스팅하면서 메인화면을 티스토리 기본 화면처럼 본문 내용이 메인 화면에 출력되게 수정했습니다.
이렇게 할려면 다음과 같이 해주세요~
티에디션에서 FastBoot의 기본 항목을 삭제해줍니다.
그리고 티에디션을 사용 해제해주세요. 꾸미기의 화면설정에서 티에디션 탭에서 "해제하기" 버튼을 눌려주면 된답니다. 메인 화면에 표시되는 글 수는 아래처럼 화면출력에서 글 갯수를 조절하면 그 숫자만큼 블로그 포스팅이 표시된답니다.

 

짜잔~ 모양이 나쁘지는 않네요 기존에 티에디션 모양도 좋지만 이 모양도 마음에 듭니다!

관련 포스팅 :

[티스토리&애드센스] - 티스토리 애드센스 광고 최적화하기