스마트폰 구독자를 위한 반응형 스킨적용과 애드센스 반응형 광고 달아 보아요

반응형 웹페이지는 PC와 테블릿 스마트폰 화면 크기에 맞추어 본문과 사이드바의 콘텐츠가 자동으로 아래로 이동됩니다. 가로 화면이 줄어들어도 본문이나 사이드바의 콘텐츠가 아래로 이동되어 계속 표시됩니다.

티스토리 기본 스킨도 곧 반응형이 보급되겠지만 스킨을 무료로 제공해 주시는 분들이 제작한 스킨으로 적용해 보기로 하였습니다. 생각보다 많은 분들이 무료스킨을 제공하고 계십니다.정말 감사한 일입니다.

백전백승님의 스킨을 적용해보겠습니다.

먼저 스킨에 대한 이해를 해야 되니 파일만 다운로드 하지 마시고 꼼꼼하게 읽어 보시길 바랍니다

 http://min-blog.tistory.com/1343

순서를 정하면

1. 반응형 스킨 다운로드 

2. 현재 사용중인 스킨 저장(백업으로 반드시 필요합니다) 관리자/스킨/스킨저장. 보관함에 저장 됩니다.

3. 스킨등록, 관리자/스킨/스킨등록 클릭, 준비한 스킨 파일들을 이곳에 전부 추가합니다.

4. 스킨적용,보관함으로 이동, 3번에서 저장한 이름의 스킨을 적용 클릭 합니다.

5. 위 백전백승님 티스토리 페이지 설명대로 본인의 광고와 설정을 마칩니다.

여기서부터는 애드센스광고 다시는 분들 내용입니다.

6. 애드센스 광고 다시는 분들은 관라자/모바일웹스킨/스킨탭의 모바일웹스킨을 OFF합니다.

7. 웹페이지에 구글 애드센스 광고를 다시는 분들은  반응형으로 변경할수 있습니다.

    반응형 광고 단위를 선택합니다

8. 광고코드를 붙여넣고  본인 스토리의 콘텐츠가 화면 가로의 길이에 따라 광고 크기를 넣어줍니다

<style>

.my_adslot { width: 320px; height: 50px; }

@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }

@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }

</style>

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

<!-- 반응형커피상단스킨 -->

<ins class="adsbygoogle my_adslot"

     style="display:inline-block"

     data-ad-client="ca-pub- 본인 "

     data-ad-slot="본인"></ins>

<script>

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

</script>

본문 위쪽에 광고 하나 다는 조건으로 설정했어요. 스마트폰 종류에 따라 어떻게 현시 되는지 보고 나중에 다시 적용 하기로 합니다

.my_adslot { width: 320px; height: 100px; } =>아이폰 사이즈에 적당

@media(min-width: 336px) { .my_adslot { width: 300px; height: 250px; } }  => 아이폰에 꽉 차지만 적용해도 되고 어중간한 하지만 5.4 인치 이하 스마트폰에서 최적하 되어 보입니다.

@media(min-width: 500px) { .my_adslot { width: 336px; height: 280px; } } =>  5인치 이상 큰 스마트폰에서 인기가 가장 좋은 336*280 을 본문 위쪽에 하나 나옵니다.

9. 반응형 웹페이지 장점은 PC를 비롯한 모든 종류의 기기에 모든 콘텐츠를 보여 줄 수 있습니다. PC나 테블릿에 어떻게 표현 되는지 보고 필요시 페이지의 글을 수정합니다.

본문 위쪽 광고는 스킨에서 적용해서 쉽게 적용했지만 본문 하단은 이전 페이지마다 다수정해야 되어서 우선 새글에만 적용해 보기로 하였어요.

일반적으로 보는 화면 입니다

갤럭시 노트, 아이패드 등 테블릿 사이즈에 맞춤 화면입니다.

사이드바의 광고를 포함한 콘텐츠들이 아래로 이동됩니다.

익숙한 스마트폰으로 볼때 336*280 광고만  상단에 노출 됩니다

더 작은 화면의 스마트 폰에서 보면 300*250이 노출 됩니다

반응형 웹페이지는 콘텐츠가 왼쪽 끝을 기준으로 화면이 줄어들때마다 아래로 이동 되는것을 알수 있습니다.

장점은 위에 설명된 내용들이겠군요..단점은 본인의 웹페이지의 콘텐츠가 반응형 웹페이지에 적당한지 살펴보아야 하고 어쩌면 모든 글의 줄바꿈이나 사진등의 사이즈를 전부 수정해야 될지도 모릅니다.  베타버전에서는 화면 전환시 새로고침해야 새광고가 나옵니다..

구독자 입장에서 새 글들은 반응형 웹페이지에 맞추어서 작성하시길 추천합니다.

애드센스 수익은 검증된 결과가 없습니다. 애드센스에서는 적극 권장하고 있군요. 많이 달려야 많이 클릭 할것 같은데..그래도 모바일에서 효과는 있을것 같아요.