또 다시 블로그 스킨 변경, CCZ-CROSS 스킨

#티스토리 블로그 스킨 1차 변경 후기 보러가기

#티스토리 블로그 스킨 1차 변경 1주일 뒤 후기 보러가기 : 발생한 문제점

지난번 스킨 변경의 여파가 너무나 컸습니다. 네이버 유입은 거의 없어지다시피 떨어졌고, 구글과 다음마저 떨어지더니 썸네일이 나오지 않는 사태까지.. 전날까진 잘 나오던 썸네일이 나오지 않자 스킨을 바꾼 의미가 없어지더군요. 분명 포스팅만 쓰고 아무것도 건들지 않았는데도 불구하고 말이죠. 그래서 고민 끝에 예전부터 눈여겨보았던 CCZ-CROSS 스킨으로 변경하기로 결심했습니다.

  1. CCZ-CROSS 스킨 소개

처음엔 유료 스킨인 줄 알았던 너무나 깔끔한 CCZ-CROSS 스킨은 너무나 감사하게도 제작자인 흉내쟁이님께서 무료로 배포해주시고 계셨습니다. 본문을 읽으며 스크롤을 내리면 상단바가 사라졌다가 다시 스크롤을 올리면 원래대로 나타나는 특징을 가졌는데요. 전체적인 느낌이 워낙 좋아서 블로그를 시작하기 전부터 '저 스킨은 블로그를 운영하게 된다면 한 번쯤은 꼭 사용해보고 싶다'는 생각을 하고 있었습니다.

  CCZ-CROSS 스킨 제작자 흉내쟁이님 블로그 링크

위의 스크린샷이 원래 CCZ-CROSS 스킨인데요. 필자의 취향에 맞추어 약간 변경을 하다 보니 어제 포스팅을 건너뛰어 버렸습니다.(...) 그래서 오늘은 CCZ-CROSS 스킨을 커스터마이징한 내용에 대해서 포스팅을 해보고자 합니다.

  2. 무엇이 바뀌었나?

원래 스킨에서 크게 7가지를 변경하였는데요. 일단 가장 먼저 상단바의 폭과 색상을 수정하였습니다. 혹시나 사고가 발생할 수도 있기 때문에 여러분들도 따라 하실 때에는 항상 기본값을 따로 주석처리하여 옆에 기록해두시고 진행하시기 바랍니다.

CCZ-CROSS 스킨 상단바 배경 색상 변경 방법

꾸미기-스킨편집-CSS로 들어가주세요. 그리고 Ctrl + F를 눌러 #site-header를 검색해주세요.

위의 스크린샷의 background-color를 변경하시면 되는데요. 자신이 원하는 색상 코드를 찾는 방법은 네이버에 색상표라고 검색하시면 됩니다.

CCZ-CROSS 스킨 왼쪽 상단 배너  및 전체적인 색상 변경 방법

위의 내용을 작업했던 부분에서 약간만 위로 올리시면 되는데요. ci-color라고 검색하시고 조금만 내리셔도 괜찮습니다.

 

이렇게 총 4군데 색상을 바꿔주시면 됩니다. 전부 똑같은 색으로 할 필요 없이 원하시는 색으로 조합하셔도 무방합니다.

CCZ-CROSS 스킨 포스팅 썸네일 위치 바꾸기

이번에는 꾸미기-스킨편집-html 수정으로 들어가주세요. 그리고 list-row pos-right라고 검색하신 뒤 right를 left로 바꾸어주시면 썸네일이 포스팅의 왼쪽에 위치하게 됩니다.

CCZ-CROSS 스킨 사이드바에 이미지 넣기

역시 위와 마찬가지로 html 수정에서 진행합니다. s_sidebar라고 검색하시면 사이드바에 대한 코드들이 나열되어 있는 것을 보실 수 있는데요. 맨 위에 다음과 같은 코드를 삽입해주시면 됩니다.

<s_sidebar_element>   

<!-- 블로그 이미지 -->

<div class="module main_image hidden-xs hidden-sm">

<a href="자신의 블로그 주소"><img src="표시할 이미지 주소"></a>

</div>

</s_sidebar_element>

CCZ-CROSS 이미지 관련 스크립트.txt

<s_sidebar> 바로 아래쪽에 붙여 넣으시고, 저장하신 뒤 꾸미기-사이드바에서 순서 및 사이드바 요소를 원하시는 대로 수정하시기 바랍니다. 그다음 꾸미기-스킨편집-CSS로 들어가신 후 맨 아래쪽에 .main_image {margin: 숫자px 숫자px;}를 한 줄 적어주시면 끝입니다. 이 코드는 여백을 주는 코드인데 자신이 올리려는 이미지와 사이드바 상단 공간에 맞도록 임의로 숫자를 넣어 조정하시면 되겠습니다.

CCZ-CROSS 스킨 사이드바에 애드센스 넣기

위의 내용에 바로 이어서 붙이시면 됩니다. 애드센스 광고는 큰 스카이스크래퍼 광고로 새로 생성하여 적용해주시면 되겠습니다.

<s_sidebar_element> 

<!-- 구글 애드센스 --> 

<div class="module module-ad hidden-xs hidden-sm"> 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 사이드바 광고 -->

<ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px"

     data-ad-client="자신의 data-ad-client 코드"

     data-ad-slot="자신의 data-ad-slot 번호"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div> 

</s_sidebar_element>

CCZ-CROSS 사이드바 애드센스 스크립트.txt

이 코드 역시 적용하시고 꾸미기-사이드바에서 순서와 요소를 수정해주셔야 합니다. 그리고 꾸미기-스킨편집-CSS의 맨 밑에 .module-ad {margin: 15px 10px;} 한 줄을 추가해주세요.

CCZ-CROSS 스킨 사이드바 카운터 글자색 수정

다시 꾸미기-스킨편집-CSS로 들어가셔서 방문자를 검색하시면 그 아래로 color가 보이실 겁니다. 이것을 수정해주시면 됩니다. 

CCZ-CROSS 스킨 본문 공감 버튼 가운데로 옮기기

위의 내용에 이어서 CSS의 맨 마지막에 두 줄을 추가해주시면 됩니다.

.container_postbtn {text-align:center;} 

.container_postbtn .postbtn_like{display:inline-block;float:none!important}

CCZ-CROSS 공감 버튼 스크립트.txt

이렇게 모든 수정을 마치고 구글과 네이버 각각 웹마스터 도구에 사이트맵을 다시 제출한 뒤 현재 포스팅을 쓰고 있습니다. 하는 김에 카테고리 이름도 스킨에 알맞도록 깔끔하게 바꾸었는데요. 어떤 결과가 나올지는 모르겠으나 홀가분한 기분이 듭니다. 다시 재미있게 블로그 포스팅을 하면서 1주일 뒤에 블로그 경과에 대해 말씀드리겠습니다. 

그리고 이 스킨의 제작자 흉내쟁이님과 다양한 분들의 블로그를 참조하며 작업을 했는데요. 정보를 공유해주시는 여러분들 모두 정말 감사드립니다.