티스토리 스킨 변경 전과 후에 해야할 일, 티스토리 블로그 3단 스킨으로 바꾸다~

티스토리 스킨 변경 전과 후에 해야할 일, 티스토리 블로그 3단 스킨으로 바꾸다~

 꼬박 하루 정도 열심히 노가다를 한 끝에 티스토리 블로그 스킨 변경을 완료 했습니다. ^^
기존 Life in Mono 2단 스킨에서 가볼래 닷컴의 Mr. DJ 님이 배포하신 Let's Dream 이라는 3단 스킨으로 변경했습니다.

스킨 변경 작업을 시작하기전에 큰맘 먹고 시작했습니다. 이게 정말 보통 일이 아니라서 결단을 쉽게 못내렸지요.
고민끝에 스킨 변경하자!!! 용의자님 스킨 이벤트는... 저로서는 꿈도 못꾸고.. 포기했고 어떤게 좋을까 하고 무지 찾아헤메다 가볼래 닷컴의 배포 스킨을 찾았습니다.

2proo.net 티스토리 스킨 변경 작업

스킨을 변경하기전에 나름대로 준비를 잘 했다고 생각했는데도 막상 변경하고나니 할일이 더욱 많았습니다.

티스토리 스킨 변경전에 할 일

스킨 변경전에 챙겨야 할 것들이 있습니다.
이것은 Kay~ 님의 "티스토리 스킨" 생각없이 변경하면 개고생한다. 포스트를 참고하시길 바랍니다.


그리고 참고로 어드민 메뉴의 스킨저장 메뉴를 잘 활용하시길 바랍니다.
어드민 ㅡ> 스킨 ㅡ> 스킨선택 ㅡ> 스킨저장 메뉴를 잘 쓰면 안심하고 스킨 변경 작업을 진행 할 수 있습니다.

혹시 모르니까 스킨도 다운받아놓고, HTML 소스와 CSS 소스, 그리고 사이드바 소스 등을 미리 받아놓습니다.
저는 티스토리 이미지 업로드에 이메일 네임태그와 다음을 비롯한 메일 서명 이미지도 올려놓고 썻는데.......
이건 미처 생각못하고 다운을 못받아놔서 하드 찾아 삼만리... ㅠ_ㅠ

스킨 변경전의 준비작업은 Kay~ 님의 포스트를 참조하시길 바랍니다.

2proo.net 스킨 변경후 추가된 작업

1. 각종 메타태그 다시 삽입
Google, Yahoo, MSN Bing 검색엔진용 메타태그를 찾아서 다시 삽입시켜줍니다.
작업전에 미리 html 소스를 미리 챙겨놓으면 일일이 작업 안해도 되겠지요.
메타태그는 검색엔진과 웹툴즈를 사용할때 인증키 비슷한 역활을 하니 head 태그 사이에 넣어주도록 합니다.
그리고 메타태그는 SEO 에도 영향을 미치니 꼭 써두는게 좋습니다.

2proo.net meta tag

2. 카테고리 더보기 플러그인 위치 수정
카테고리 더보기 플러그인은 무조건 본문 바로 아래에 나오도록 되어있습니다.
이 플러그인의 소스와 수정 방법은 Miss Flash 님의 http://blog.missflash.com/543 글을 참조하세요.

카테고리 더보기 플러그인 위치 수정

3. 다음 뷰 추천버튼과 믹시 추천버튼 정렬하기
이것 역시 Miss Flash 님의 http://blog.missflash.com/543 글을 참조하세요.
소스와 함께 설정하는 방법을 알기 쉽게 설명해놓으셧습니다.

Style.css 에 다음 소스를 추가하는데 저의 경우는 두번째 다음 뷰 버튼 왼쪽 & 오른쪽으로 여유를 10px 주었습니다.

/* 추천버튼 일렬로 정렬 */
.MF_Left_Float {float:left; margin-bottom:5px; }
.MF_Right_Float {float:left; margin-bottom:5px; margin-left:10px; margin-right:10px;}

4. 맥 스타일 매타사이트 추천 버튼, RSS 피드 아이콘 추가
예전에는 다음 뷰, 믹시, 트위터, 구글 FEED 아이콘 4개만 있었는데 이번 스킨 변경작업을 하면서 아래와 같이 바꿨습니다.

이 아이콘들은 Krang 님의 http://krang.tistory.com/415 포스트를 참조하세요 ^^
Krang 님의 또다른 예쁜 아이콘도 있습니다.
아래와 같은 아이폰 스타일의 매타사이트 아이콘은 http://krang.tistory.com/378 글을 참조하세요.
음... 이제보니 아이폰 스타일 아이콘도 이쁘네;;; 바꿀까;;;

메타사이트 추천버튼, 피드 아이콘 추가

5. ReTweet 버튼 추가
이번 블로그 스킨 변경으로 새로이 추가된 리트윗 버튼입니다.
이 버튼을 누르면 해당 포스트 내용과 제목, 해당 URL 을 포함해서 트위터로 전송합니다. 일명 리트윗 기능...
티스토리 연동 리트윗 버튼은 http://rasso.co.kr/207 글을 참조하세요 ^^ 소스와 함께 설치 방법이 설명되어 있습니다.

6. 이미지 자동 리사이징 자바스크립트 삽입
기존 770 스킨에서는 큰 사이즈의 사진도 마음대로 올렸으나 현재는 710으로 변경되었습니다.
그래서 기존의 큰 이미지들은 이 스킨에서는 오른쪽이 다 잘려나옵니다.
하지만 이 자바스크립트를 삽입하게되면 자동으로 리사이즈 시켜서 온전한 상태로 보여주게 됩니다.

큰 이미지를 리사이즈하여 잘려보이지 않게...

이것때문에 고민을 많이 하고 어떻게 하나... 걱정이었는데 다행히 능력자 분이 계셔서 쉽게 처리했습니다.

티스토리 스킨변경후 사진크기 맞추기

자바스크립트 파일을 이미지폴더에 업로드하고 아래처럼 한줄만 HTML 소스에 추가하면 간단합니다.

iQuery 를 이용하여 스킨 크기와 이미지 크기를 계산하고 소스 삽입하는 방법도 있는데 이 방법이 훨씬 간편하더군요.


7. 검색용 애드센스 출력창 변경
기존의 스킨에서는 Location 영역에 구글 검색이 출력되도록 하였으나
이번 스킨 리뉴얼 후에는 Search 영역으로 변경하였습니다.

윤초딩님의 검색용 애드센스 사용방법 - 구글 애드센스 방법을 보시면 쉽게 설치하실 수 있습니다.


8. 통계 집계 태그 및 부정클릭 방지 태그 삽입
이 블로그는 Quantcast, 구글 Analytics, 다음 웹인사이드 등의 방문자 통계 툴을 사용하고 있습니다.
이런 소스들은 HTML 소스의 가장 맨 마지막에 넣어둡니다.
그리고 구글 애드센스 부정클릭 방지용 소스도 가장 마지막에 넣어둡니다.


9. SEO 최적화 수치
http://domaintools.com 에서 조회해보는 SEO Score가 80% 를 기록했습니다. (SEO = Search Engine Optimizer)

SEO Scrore 80%

기존 스킨에서 78% 정도를 기록했는데 이번에 스킨 바꾸고 조금 더 신경 썻더니 80% 를 기록했습니다.
저도 이제는 80% 대에서 놀아야겠습니다. ^^;;

스킨을 바꾸고 나서...

이상... 스킨 변경 후 작업들에 대해서 대충 열거해봤습니다.
열거해보니 별거 없지만 px 을 1 씩 변경하면서 미리보기, 저장, 수정 이걸 엄청나게 반복했습니다..ㅠ_ㅠ
사이드바에도 손을 좀 댓는데 아직 맘에 들지는 않네요.
무엇보다 스킨 본문 기본 사이즈가 560px 이라 여기저기 무지 손봤습니다. 좀만 계산이 어긋나면 스킨이 망가져요...

현재 익스플로러 7, 파이어폭스 3, 구글 크롬에서 테스트해봤는데 틀은 잘 잡혀서 나오네요.
다만 글꼴이 나눔고딕이 기본이다보니 폰트가 잘 안맞는거 같기도 하고..
나눔고딕이 없는 컴퓨터에서 보면 굴림체로 나오게 되어있습니다. 나눔고딕이 있는 브라우저에서는 잘 보입니다~

그리고 스킨 수정하다보니 드디어 방문자수 500만을 돌파했네요. ^^;;

2proo.net 방문자수 5백만명 돌파

이벤트를 할까 말까 하다가 아직 동시나눔 이벤트에 대한 공지가 없는 터라 기다려보겠습니다.

정말 스킨 변경 작업은.... 사람이 할 일이 아닌것 같습니다. 꼬박 하루를 이것때문에 하얗게 불태웠습니다...