| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- 베가아이언2
- 크롬
- 안드로이드 어플 추천
- 다음카카오
- 영화리뷰
- 구글 나우
- 안드로이드 어플
- OTP
- 보안
- 카카오택시
- Windows
- It
- 농구
- 팬텍
- kakao
- 양반탈 이야기
- nba
- 네이버
- 안드로이드
- Google Now
- 구글
- 카카오톡
- Linux
- 페이스북
- 카카오
- 인스타그램
- 아이폰
- Google 피트니스
- 안드로이드 앱
- Today
- Total
아마추어 팀블로그
티스토리 블로그 반응형 스킨으로 순식간에 바꾸는 방법 본문
요즘 관리하는 블로그들의 스킨을 반응형 스킨으로 변경했습니다. 아무래도 모바일이 대세인 세상이기도 하고, 새로운 스킨을 적용하면서 새 마음 새 뜻, 새로운 마음가짐으로 다시 정진하는 느낌입니다. 이 블로그도 2015 공모전 은상 수상작인 Flatinum이라는 스킨으로 변경한지 며칠 되었습니다.
간혹 블로그 스킨이 변경된 걸 보며 스킨 변경 방법을 묻는 분들이 계셔서 몇 번의 조작으로 블로그 스킨을 바꾸는 방법을 소개하고자 합니다. 스킨 바꾸는 방법이야 마우스 클릭 몇 번만으로도 충분합니다. 하지만 스킨을 바꾸면서 놓쳐서는 안 되는 부분이 있어 알려드리고 싶네요.
1. HEAD 태그 속 정보 챙기기
우선 현재 블로그의 스킨에서 긁어올 부분을 챙겨둡니다. 네이버 웹마스터나 구글 애널리틱스 등 meta 태그나 script 태그 형식으로 <head>와 </head> 사이에 정보가 들어가야 하는 서비스들이 있습니다. 티스토리 블로그에서 이런 서비스들을 가져다 쓰시는 분들이 많을 텐데, 전 꼭 스킨 변경할 때 얘네들을 놓쳐서 나중에 따로 추가하게 되더군요.
(단, 네이버 웹마스터는 최초 본인 소유 확인시에만 meta 태그가 필요할 수도 있습니다.)
우선 관리자 화면에서 꾸미기 > HTML/CSS 편집을 클릭하여 수정 화면으로 진입합니다. 예전에는 상하단으로 나뉘어 소스를 수정하게 되어 있었죠. 그 때 버전은 CSS 부분의 텍스트 박스 크기가 너무 작아서 수정에 힘들었었던 걸 기억하시는가요? 지금은 아예 브라우저가 뜨면서 왼쪽에는 미리보기, 오른쪽에는 아래 캡쳐 이미지처럼 HTML/CSS/파일업로드가 각각 제공되는 형태로 바뀌었습니다. 엄청 편해졌죠.
아무튼 HTML 소스에서 필요한 정보를 복사하여 메모장에 붙여넣어 둡니다. <meta>로 감싼 naver-site-verification 정보와 <script>로 감싼 GoogleAnalyticsObject 정보를 복사해두면 되겠네요.
2. 스킨 변경하고 HTML에 똑같이 붙여 넣기
소제목 그대로 관리자 페이지의 꾸미기 > 스킨 메뉴에서 원하는 스킨을 골라 하단의 적용 버튼을 눌러 스킨을 변경해봅시다. 물론 미리보기 버튼을 클릭하여 현재 블로그의 변화될 모습을 미리 확인할 수 있으니 놓치지 마세요.
이렇게 반응형 스킨으로 바꾸고 난 뒤, 메모장에 고이 모셔둔 코드들을 다시 HTML 창을 열어 아래와 같이 붙여넣어 줍니다. 여전히 <head>, </head> 태그 사이에 넣어주어야겠죠.
3. 디테일 챙기기
이제 거의 끝났습니다. 몇몇 디테일만 챙기면 스킨 변경이 완료되는 것이죠.
우선 사라진 Google Adsense를 챙길 차례입니다. 예전 스킨이라면 십중팔구 HTML 페이지에서 일일이 데스크탑 웹용 광고를 넣어주셨을텐데요, 티스토리 플러그인에 Google Adsense (데스크탑 웹용)이라는 이름의 플로그인이 하나 생겼습니다. 즉, 이제 HTML 파일을 따로 수정하지 않아도 넣었다 뺐다, 손쉽게 할 수 있는 것이죠.
관리자 페이지의 플러그인 > 플로그인 설정에서 Google AdSense (데스크탑 웹용)을 클릭 한 뒤, 상단, 하단 광고 설정에서 원하는 광고의 배치를 선택하고 텍스트 박스에 구글 애드센스에서 새로 생성한 광고의 코드(혹은 기존에 사용 중이던 광고의 소스를 불러와서)를 넣어주면 됩니다. 참 쉽죠.
저같은 경우 오늘 스킨을 바꾼 블로그가 티에디션을 사용하고 있었는데, 반응형 스킨과 맞지도 않고 취지에도 어울리지 않았기 때문에 이를 해제해야만 했습니다. 이런 디테일, 제대로 챙겨주어야겠죠.
마지막으로 꾸미기 > 화면 설정 > 화면출력에서 글을 한 개만 출력하도록 설정을 변경했습니다. 한 페이지에 구글 애드센스 광고가 3개 이상 노출되면 안 된다고 하니, 글을 한 개씩만 보여주어야겠죠. 위에서 설정한 광고는 글마다 달리니까요.
지금까지 티스토리 블로그를 반응형 스킨으로 순식간에 바꾸는 방법에 대해 간단히 알아보았습니다. 이렇게 스킨을 반응형으로 변경한다면 일단 가독성이 좋아져서 방문자에게 호평을 받겠죠. 모바일은 모바일 웹버전으로 출력될 거고 어플로 접속하는 분들에게는 반응형으로 바꾸어 봤자 티가 안 날 겁니다. 하지만 태블릿으로 티스토리에 접속하는 경우 디스플레이 크기에 따라 적절하게 화면이 배치되어 보일 것이므로 가독성이 훨씬 좋아지겠죠. 광고 수익 측면에서는 변화가 있을지 모르겠습니다. 갑자기 수익이 뚝 떨어지거나 하면 아무래도 좀 당황하겠죠?
질문이나 제가 놓친 부분, 조언, 모두 환영합니다. 댓글 달아주세요.
