[#1 스킨] #1 스킨 커스터마이징

안녕하세요 블루이드 입니다.

-----------------------------------------------------------------------------------------------
[2018. 07. 25일 업데이트]

굉장히 늦은 업데이트 입니다. 아래 카톡링크 보내기 내용이 변경되었습니다. 원인은 카카오톡 개발자 사이트에서 링크보내기 방식을 v2 버전으로 업데이트(`17년말인것 같습니다.) 하면서 기존 구현했던 아래 스크립트 파일들이 동작하지 않게 되었습니다. 아마 카톡링크 누르시면 최신버전이 아니라는 팝업이 뜨면서 공유가 불가능했을것 같습니다. 저도 이 문제를 인지한 후 개인적으로 여기저기 찾아보면서 이렇게/저렇게 바꿔봤지만 결국, 컴알못의 한계를 체감하고 코드를 공유해주시는 블로거 분을 검색했습니다.

아래 내용은
IT넘버원 님의 포스팅 내용을 읽어보고 공유해주신 소스코드를 참고하여 적용한 내용입니다.(보러가기 클릭)

만약 제 글을 참고하지 않고 다른 방식으로 구현하셨다면 상기 포스팅을 읽어보시고 자신의 코드에 맞춰서 수정하시면 됩니다.

만약 제 코드를 참조하셨던 분이 계신다면 아래 원문에서 붉은색 글씨로 변경된 부분 표기하였습니다. 
(3. SNS공유 내용을 참조하셔서 기존 카톡 코드를 v2 버전 코드로 교체해주시면 됩니다.)
(Java 키는 자신의 키를 입력하셔야 합니다.)
-------------------------------------------------------------------------------------------------

그동안 사용하던 스파이더웹 3.0.5 버전을 뒤로하고 조금 더 심플한 반응형 스킨을 알아보던 중 티스토리에서 제공하는 기본 반응형 스킨인 #1의 디자인에 눈이 갔습니다. 대략 다음과 같은 이유인데요.

• 에디터를 사용하지 않아도 첫 화면이 썸네일목록형이다.
• UI가 굉장히 심플한 화이트톤이다. 
• 티스토리 기본형 스킨이므로 버그 수정 및 유지보수를 잘 해줄 것 같다.
• 날려먹어도 쉽게 복구가 가능하다. 
• #1이라는 공통 스킨을 커스터마이징 해서 사용하시는 분들이 있어 참고할 블로그가 많다.

별도의 프로세스가 동작하지 않는다면 조금 더 가볍고 빠를것으로 생각했습니다. 그리고 기본취향이 썰렁할 정도로 여백이 많은 것을 좋아하기도 하구요. 티스토리 자체 제작 스킨인만큼 추가될 기능 등에 대한 에프터서비스도 살짝 기대하고 있습니다. 그리고 저보다 먼저 커스터마이징 하신 다른 블로거 분들의 많은 발자취를 보면서 따라배우기도 쉽구요. ㅎㅎ

하지만, 세상 만사가 그렇듯 어디 내맘에 꼭드는 그런 스킨이 있겠습니까? 몇 가지 마음에 안드는점도 있는데요 아래와 같습니다. 이 스킨 변형버전에서 수정하고 싶었던 사항이기도 하죠.

• 기본 사이드바에 카테고리 추가하고 오른쪽 메뉴로 활용.
• SNS공유 아이콘을 추가해서 만들고 싶다.
• 애드센스를 첫 화면에 배치하고 싶다.
• 기타 커스터마이징하고 싶은 내용이 있다. 

기본 사이드바를 큰 화면에서 우측에, 작은 화면에서 아래에 위치시키고 싶은데 이것은 아직 해결책을 못찾았습니다. 계속 찾아볼 예정입니다. 그리고 몇가지 SNS 버튼을 추가하고 싶기도 합니다. 카톡이나 밴드, 라인 같은 SNS들이 추가되면 아무래도 방문자 유입에 긍정적인 효과를 줄 수 있을것 같습니다.

이런 까다로운 입맛을 만족시키기 위해 아주 오~~랫동안 많~~~은 웹 검색을 통해 조금씩 수정해왔던 스킨을 적용시켰습니다. 아직 해결못한 것도 많지만, 또 쓰다가보면 이런저런 오류들이 나올것 같지만 그냥 바닥에 놔두고 수정하는것 보다 고쳐가면서 사용하기로 했습니다. 너~~무 지루지루해서 말이죠. ㅎㅎ

아! 그리고 수정버전을 적용하게 된 데는 애드센스 2차승인 요청 시 tistoryID.tistory.com 의 서브도메인 문제에 여전히 발목이 잡혀있는것도 한 이유입니다. 애드센스를 적용하고나면 되도록 스킨 수정같은 작업은 진행하지 않는 것이 좋다는 글을 어디서 본적이 있어서말이죠. 페이지가 변형된 것으로 인식해서 새로운 로직이 적용된대나 어쩐대나. 하여간 그런 얘기가 있습니다.

#1스킨에 대해 그리고 SNS 연동에 대해 저보다 먼저 깔끔하게 수정해주신 분들의 블로그를 참조했습니다. 반영한것도 안한것도 있지만 기본적으로 #1스킨이 어떤구조로 되어있는지? 소스코드의 특정한 부분의 어떤 의미인지? 어떻게 바꾸는지? 바꾸면 어떻게 되는지? 스킨과 코드에 대한 전체적인 정보를 얻을 수 있었습니다.

다시 한번 감사드립니다. ㅎㅎ

ㅇㅋㅋ두유
ㅇ택대리네
ㅇ기면기의 기억을 걷는 시간
ㅇlife is an egg
ㅇ프로그램 개발자 공간
ㅇ모지모지

요즘 애드센스 인증 요청을 염두에두고 글을 쓰려니까 자꾸 서두가 어마어마하게 길어지네요. 하지만 어쩔수 없습니다. 더이상 콘텐츠 부족으로 승인거절을 받긴 싫어서요. ㅠ.ㅠ 마침표도 따박따박 넣어주고, 사람한테 포스팅하는 것인지 로봇한테 포스팅하는 것인지 저도 헷갈리네요.

이제 드디어 기본 #1 스킨과 비교해서 변경된 부분을 살펴보겠습니다.

그리고 아래 설명에서 ~~라는 부분 할때는 작은따옴표(') 사이 영역을 뜻하는 것입니다.

1. 리스트 영역에 대한 커스터마이징

결과 화면은 PC 기준으로 왼쪽 상단 버튼을 눌러보시면 됩니다.
내 'blogspot' 으로 이동하는 링크와 '이웃추가' 메뉴를 추가하고, 잘 쓰지않는 'tag' 메뉴를 삭제했습니다.
그리고 본문 하단 like 버튼도 가렸습니다. 서치콘솔에서 자꾸 뭐가 뜨더라구요. ㅎㅎ

구글 블로그 연결링크 삽입 코드 (html에서 수정)

<li class="box_division"><a href="http://blueidblues.blogspot.com" class="link_name">Blogspot</a></li>

이웃추가하기 삽입 코드 (html에서 수정)

<li><a href="toolbar/popup/link" class="link_name" target="_blank">이웃추가</a></li>

CSS 제일 하단에 코드 삽입.

/* like버튼 없애기 */

div.daum_like_wrapper {display:none}

2. 애드센스 반응형 광고 삽입

본문 상단/하단 두 곳에 애드센스 광고를 배치했습니다.
(1) HTML에서
상단 광고는 'div id="cMain"' 라는 부분 바로 아래에 삽입합니다.
하단 광고는 'div id="mEtc"' 라는 부분 바로 위에 삽입했습니다.

[상단]

<!-- 티스토리 반응형_테스트영역 시작 -->

<div id="ad_area" class="ad_top"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle" style="display:block" data-ad-client="애드센스 ID" data-ad-slot="슬롯번호" data-ad-format="auto"></ins>

<script>

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

</script>

</div>

<!-- 티스토리 반응형_테스트영역 끝 -->

[하단]

<!-- 티스토리 반응형_테스트영역 시작 -->

<div id="ad_area" class="ad_bottom"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle" style="display:block" data-ad-client="애드센스 ID" data-ad-slot="슬롯번호" data-ad-format="auto"></ins>

<script>

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

</script>

</div>

<!-- 티스토리 반응형_테스트영역 끝 -->

(2) CSS에서는 '/* 뷰 */' 라는 부분을 찾아주시면 됩니다. 두 곳이 나올텐데 위쪽 부분은 PC 영역, 아래쪽은 모바일 영역으로 생각하시면 편합니다. 상단과 하단에 아래 코드를 삽입합니다.

[상단]

.ad_top{width:820px;padding-top:20px;margin:0 auto}

.ad_bottom{width:820px;padding-bottom:20px;margin:0 auto}

[하단]

.ad_top{position:relative;width:100%}

.ad_bottom{position:relative;width:100%}

3. SNS 공유 추가

이제 가장 많은 힘을 뺐던 SNS 공유버튼 추가 부분입니다. 사실 사이드바를 오른쪽으로 옮기는게 처음 시작한 제일 큰 이유였지만 이 작업을 마치고 나니 힘들어서 일단 그냥 적용하기로 마음을 먹었죠.
위젯을 다는 방법, 다른 분이 공유해놓은 코드를 적용하는 방법 등 여러가지 쉬운길이 있지만, 그냥 티스토리에 기본적용되는 페북/트위터/카카오스토리를 그대로 살리는 방법으로 적용했습니다.
추가된 SNS는 카카오톡, 밴드, 라인, 구글플러스 입니다.
이 중 카톡, 라인은 PC에서는 클릭되지 않거나 앱다운 페이지로 연결됩니다.

코드를 찾아보니 SNS관련 링크도 두 곳에 있더군요.
HTML에 두 곳이 있는 이유는 하나는 비공개용, 하나는 공개용이고, CSS의 경우에는 위에서 설명드린대로 PC와 모바일입니다.
(1) HTML에서 'ul class="list_share"'라는 부분을 찾습니다.
그 아래 페이스북 블라블라 써있으면 그곳이 맞습니다.
HTML의 위쪽과 아래쪽 두 군데 모두 아래 소스코드로 변경해줍니다. 범위는 'ul' 아래에서 '/ul' 위까지 입니다.

<ul>과 </ul> 사이에 아래 코드를 삽입해줍니다.

<li><a href="#none" class="ico_skin link_fb" data-service="facebook">페이스북</a></li>

<li><a href="#none" class="ico_skin link_tw" data-service="twitter">트위터</a></li>

<li><a href="#none" onclick="share_googleplus('http://blueidskin.tistory.com/32');" class="ico_skin link_gp" >구글플러스</a></li>

<li><a span id="band" class="ico_skin link_bd" href="javascript:;"></a></span></li>

<li><a href="#none" class="ico_skin link_ks" data-service="kakaostory">카카오스토리</a></li>

<li><a id="kakao-link-btn" href="javascript:;" class="ico_skin link_kt" data-service="kakaotalk">카카오톡</a></li>

카카오톡 변경점 V2 이후 (`18. 07. 25일)
<li><a href="javascript:shareKatalk()" id="kakao-link-btn" data-service="kakaotalk" class="ico_skin link_kt">카카오톡</a></li>
--> 이게 두 군데 있습니다.

<li><span id="line" class="ico_skin link_nl" onclick='window.open("http://line.me/R/msg/text/?["+document.getElementsByTagName("TITLE")[0].text+"]라인 "+location.href+"?","_blank");'></span></li>

(2) HTML에서 '/head' 를 찾아 바로 위쪽에 아래 소스코드를 삽입해줍니다.

[/head] 바로 위에 아래 코드를 삽입해줍니다.

<!-- 카카오톡 공유하기 스크립트 시작 -->

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

카카오톡 변경점 V2 이후 (`18. 07. 25일)
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- 밴드 공유하기 스크립트 끝 -->

<script type="text/javascript" src="//developers.band.us/js/share/band-button.js?v=20150102"></script>

(3) HTML에서 '/body' 를 찾아 바로 위에 아래 소스코드를 삽입해줍니다.
주의할점: 주소는 자신의 블로그 주소로 변경하세요. 카카오톡의 경우 개발자 사이트에서 앱등록이 필요합니다.
관련 포스팅 링크 모지모지님의 #2스킨에 SNS 공유하기(카카오 개발자 부분 참고하시면 됩니다.)

[/body]를 찾아서 바로 위에 아래 소스코드를 삽입해줍니다.

<!-- 구글플러스/네이버 공유하기 스크립트 시작 -->

<script>

function share_googleplus(blueid){

var url = 'https://plus.google.com/share?url='+encodeURIComponent(blueid);

window.open(url,'_blank','width=300','height=480');

}

</script>

<!-- 카카오톡 공유하기 소스 시작 -->

<script>

    var firstImg=$(".imageblock:first-of-type img");

    var contents="";

    if(firstImg.attr("src")){

        var firstImgSrc=firstImg.attr("src");

        var firstImgRatio = parseInt(firstImg.css("height"))/parseInt(firstImg.css("width"));

        if (firstImgRatio <=0.27) var firstImgRatio=0.27;

    }else{var firstImgSrc=location.origin+"/favicon.ico";var firstImgRatio=1}

    Kakao.init('개발자 id');

    Kakao.Link.createTalkLinkButton({

      container: '#kakao-link-btn',

      label: '['+document.getElementsByTagName("TITLE")[0].text+']\n'+contents+'...',

      image: {

        src: firstImgSrc,

        width: '300',

        height: parseInt(300*firstImgRatio)

      },

      webButton: {

        text: '블로그로 보러가기~!',

        url: location.origin+location.pathname

      }

    });

</script>

카카오톡 변경점 V2 이후 (`18. 07. 25일)

<script>

Kakao.init('카카오톡 자바스크립트 API 키');

function shareKatalk() {

Kakao.Link.sendScrap({

    requestUrl: location.href

});

};

</script>

<!-- 밴드 공유 -->

<script type="text/javascript">

$("#band").click(function(e) {

var title = "Blueidblues";

var description = "블루이드 블루스";

var url = $(location).attr("href"); var shareUrl =

"http://band.us/plugin/share?body="+encodeURIComponent(title)+" "+encodeURIComponent($(location).attr("href"))+"&route="+encodeURIComponent($(location).attr("href")); 

window.open(shareUrl, "share_band", "width=410, height=540, resizable=no"); });

</script>

(4) CSS에서 '/* 뷰 */' 를 찾아서 바로 아래 아래 소스코드를 덮어써줘야 합니다.
'/* 뷰 */' 도 두 곳이 있기 때문에 위/아래 모두 찾아 덮여써줘야 합니다. 그리고 카톡과 라인의 경우 PC에서는 SNS전달이 되지 않기 때문에 버튼을 감추었습니다.
주의사항
1. 각 라인을 잘 보고 신중하게 덮어써줘야 합니다. 앞의 '.어쩌구 .어쩌구 .어쩌구' 하는 것을 참고하세요.
2. './images/1_ㅇㅇ.png' 부분은 제가 따로 만든 SNS 이미지 입니다.
   티스토리 관리자 HTML/CSS 수정 창에서 따로 추가하셔야 합니다. png 파일이고 이미지 크기는 30X30입니다.
수정사항 : 상단 하단 모두 같은 코드를 적용하였습니다.

[상단] 

.skin_view .area_etc .list_share{float:none;width:100%;text-align:center;margin-bottom:36px}

.skin_view .list_share li{display:inline-block;float:none}

.skin_view .list_share .ico_skin{width:29px;height:29px;margin-right:6px}

.skin_view .list_share .link_fb{background-image:url(./images/1_fb.png)}

.skin_view .list_share .link_fb{background-size:cover}

.skin_view .list_share .link_tw{background-image:url(./images/1_tw.png)}

.skin_view .list_share .link_tw{background-size:cover}

.skin_view .list_share .link_gp{background-image:url(./images/1_gp.png)}

.skin_view .list_share .link_gp{background-size:cover}

.skin_view .list_share .link_nl{background-image:url(./images/1_nl.png)}

.skin_view .list_share .link_nl{background-size:cover}

.skin_view .list_share .link_bd{background-image:url(./images/1_bd.png)}

.skin_view .list_share .link_bd{background-size:cover}

.skin_view .list_share .link_ks{background-image:url(./images/1_ks.png)}

.skin_view .list_share .link_ks{background-size:cover}

.skin_view .list_share .link_kt{background-image:url(./images/1_kt.png)}

.skin_view .list_share .link_kt{background-size:cover}

[하단]

.skin_view .area_etc{position:relative;height:auto;margin:0;}

.skin_view .area_etc .list_share{float:none;width:100%;text-align:center;margin-bottom:36px}

.skin_view .list_share li{display:inline-block;float:none}

.skin_view .list_share .ico_skin{width:36px;height:36px;margin:0 4px}

.skin_view .list_share .link_fb{background-image:url(./images/1_fb.png)}

.skin_view .list_share .link_fb{background-size:cover}

.skin_view .list_share .link_tw{background-image:url(./images/1_tw.png)}

.skin_view .list_share .link_tw{background-size:cover}

.skin_view .list_share .link_gp{background-image:url(./images/1_gp.png)}

.skin_view .list_share .link_gp{background-size:cover}

.skin_view .list_share .link_nl{background-image:url(./images/1_nl.png)}

.skin_view .list_share .link_nl{background-size:cover}

.skin_view .list_share .link_bd{background-image:url(./images/1_bd.png)}

.skin_view .list_share .link_bd{background-size:cover}

.skin_view .list_share .link_ks{background-image:url(./images/1_ks.png)}

.skin_view .list_share .link_ks{background-size:cover}

.skin_view .list_share .link_kt{background-image:url(./images/1_kt.png)}

.skin_view .list_share .link_kt{background-size:cover}

복잡하죠?
이래서 제가 여기까지로 일단락을 지은겁니다. ㅠ.ㅠ 일단 적용시켜놓고 서치콘솔이나 애널리틱스, 네이버에서 제대로 동작하는지 한번 살펴봐야겠습니다.

[알려진 문제점!!]

1. 비밀 댓글의 비밀
방문하신분들이 비밀로 달아주신 댓글은 주인장이 확인 할 수 있습니다.
하지만, 그 댓글에 주인장이 비밀 답글을 달면 처음 비밀댓글을 남겨주신분이 확인할 수 없습니다.
그렇다고 그냥 답글을 달면 다른분들도 다 보실 수 있는 일반 답글이 달립니다.
뭐 비밀로 많이 얘기할건 없지만 이 부분은 개선이 되어야 할 것 같습니다.

2. 특정 글을 읽는 화면에서는 아래쪽에 좌우 스크롤바가 생겨요.
나만 그런지는 모르겠지만!! 글을 읽는 화면에 들어오면 반응형앱임에도 불구하고 좌우 스크롤바가 생성되네요.;;
뭔가 코드가 어긋난것 같은데 #1 오리지날 버전을 깔아봐도 동일한 현상이 일어납니다.

3. 화면 오른쪽에 빈공간이 나타나고 있습니다. (화면 하단 좌우 스크롤)
제가 수정하다가 뭔가 이상한짓을 한 것 같은데 아직 원인을 모르겠네요 ㅠ.ㅠ
지금 이 원인을 찾고 있습니다. ㅠ.ㅠ

그외 제 블로그를 이용하시다가 뭔가가 이상한 점이 발견되면 알려주세요. ^^