즐거운 게임과 쉬운 앱테크

표나 박스를 삽입할 경우 별도의 설정을 해두지 않았다면 자동으로 배경색이 회색으로 나타납니다. 기본적인 설정값이 회색으로 나타나도 상관이 없거나, 작성할때마다 원하는 색으로 수정을 하고 싶지 않다면, 아래의 방법으로 기본색상을 원하는 색으로 나타나게 할수가 있습니다. 본문 내 표나 박스내부의 배경색을 원하는 색상으로 변경하는 방법에 대해서 소개해 드리겠습니다.

표나 박스의 배경색 바꾸기

 
표나 박스는 보통 table 이란 태그로 지정되는데 블로그 포스트 본문 부분의 table 속성을 변경하는 방법은 관리자 페이지의 [꾸미기] 에서 [HTML/CSS 편집] style.css 에서 소스값을 수정해 주시면 간단히 해결이 됩니다.

style.css 내에 커서를 위치하고 Ctrl+F 를 눌러 검색창에 'article table' 을 입력하여 해당 위치를 찾습니다.

아래와 같은 부분이 나오는지 확인합니다.

▶ .article table th {background-color:#ccc; } /* 스킨디자인에따라 색상 변경 */

▶ .article table td {padding:2px; background-color:#eee; } /* 스킨디자인에따라 색상 변경 */

background-color:#ccc 부분의 #ccc를 원하는 색깔로 변경합니다.

배경색으로 지정되는 부분이라 무난하게 #fffff (흰색), transparent (투명), none (없음) 등으로 바꿔주시는게 좋습니다.

.article table th {background-color:#ffffff; }

.article table td {padding:2px; background-color:#none; }

위와 같이 수정을 완료하게 되면 색상이 변경되어 나타나게 됩니다.

위 설정은 전체 표나 박스에 적용이 되므로 기존에 소개해 드린 [ 카테고리의 다른 글 보기 - 배경색 바꾸기 ] 의 설정도 포함이 됩니다. 해당 포스팅에서 소개해 드린 소스값을 삭제하게 되면 위 설정값과 동일하게 설정이 되며, 별도로 관리하고 싶다면 기존의 소스를 그래도 두고 원하는 색상으로 별도로 관리하시면 됩니다.

[ 관련 글 : 티스토리 꾸미기 - [카테고리의 다른 글] 배경색 바꾸기 ]

[카테고리의 다른 글] 바탕화면을 수정하였고, 이제 목록 개수와 색상을 수정해 보도록 하겠습니다.

목록 개수와 색상(글자색)은 스킨위자드를 사용하여 쉽게 변경할수 있습니다.

관리자모드 ▶ 플러그인 ▶ 플러그인설정 으로 이동합니다.

꾸미기 - 카테고리 글 더 보기 항목에서 설정을 누릅니다.

해당 설정화면에서 목록 개수와 글자의 색상을 선택하고 미리보기로 확인을 합니다.

확인후 마음에 들면 저장을 합니다.

이상 [카테코리의 다른 글 더 보기] 설정 방법에 대해서 소개해 드렸습니다.

기본적인 티스토리 스킨에서는 [카테고리의 다른 글] 이 본문 하단 태그 상단에 위치하는데 신규로 광고코드를 skin.html 에 삽입하게 되면 [카테고리의 다른 글] 아래에 위치하게 되어 보기에 좋지 않습니다. 그래서 [카테고리의 다른 글]을 본문 하단 태그 원하는 위치에 위치하게 할수 있는 방법에 대해서 소개해 드리겠습니다.

[카테고리의 다른 글] 위치를 수정할수 있도록 소스를 삽입해 놓으면 본문 하단 태그에서 원하는 위치로 쉽게 이동이 가능하기 때문에 광고의 형태와 크기에 따라서 본문 하단에 예쁘게 배치를 할수가 있습니다.

아래는 [카테고리의 다른 글]의 위치를 변경하지 않고 광고코드를 삽입했을때의 배치 모습입니다.

본문과 광고 중간에 [카테고리의 다른 글] 이 자리하고 있어 어색해 보입니다.

[카테고리의 다른 글]의 위치를 " 본문 하단 태그 하단 " 으로 위치를 변경한 후의 모습입니다.

별 차이를 못 느끼시겠다면 아래와 같이 여러개의 광고를 삽입했을때의 모습을 보시면 차이를 느끼실수 있을것입니다.

여러개의 광고를 삽입하려고 할때 [카테고리의 다른 글]의 상단에 위치하는 것이 훨씬 보기 좋은것 같습니다.

배치 전후의 모습을 보시고 수정을 하시려고 한다면 아래와 같이 수정하시면 됩니다.

[카테고리의 다른 글] 위치 변경하는 방법

1.  " 카테고리의 다른 글" 고정을 해제하여 원하는 위치로 이동할수 있도록 명령어 삽입

<!-- 카테고리 다른글 위치 변경 시작 -->
<div id="MF_Reference" class="another_category another_category_color_gray"></div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MF_Reference = document.getElementById('MF_Reference');
MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
MF_Reference.className = "another_category another_category_color_gray";
var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
MF_Reference.innerHTML = ref_source;
MissFlash_Div_Num += 1;
//]]>
</script>
<!-- 카테고리 다른글 위치 변경 끝 -->

skin.html 에서 </title> 을 찾아서 바로 아랫줄에 소스를 붙여넣기 합니다.

카테고리위치고정해제.txt

2.  " 카테고리의 다른 글" 을 원하는 위치에 삽입

<!-- 카테고리 다른글 위치 변경 시작 -->
<div id="MF_Reference" class="another_category another_category_color_gray"></div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MF_Reference = document.getElementById('MF_Reference');
MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
MF_Reference.className = "another_category another_category_color_gray";
var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
MF_Reference.innerHTML = ref_source;
MissFlash_Div_Num += 1;
//]]>
</script>
<!-- 카테고리 다른글 위치 변경 끝 -->

skin.html 에서 [ ##_article_rep_desc_## ] 을 찾아서 바로 아랫줄에 소스를 붙여넣기 합니다.

카테고리위치변경.txt

[ ##_article_rep_desc_## ] 아래 배치하는 순서에 따라 광고와 "카테고리 다른 글" 의 위치 순서가 결정이 됩니다.

상기와 같은 방법으로 "카테고리 다른 글" 과 광고의 위치를 마음대로 변경할수가 있으니 삽입하려는 광고의 형태 및 크기등을 고려하여 멋지게 배치하시기 바랍니다.

* 작업하시기전에 반드시 skin.html 원본은 별도로 저장해서 잘 보관해 두시기 바랍니다.

지금은 애드센스가 최종승인이 되어 광고를 게재하고 있지만 저도 승인과정에서 두번의 거절을 당했습니다. 

아래는 제가 애드센스를 신청하면서 두번의 미승인된 내역입니다. 혹시나 애드센스를 준비하고 계시다면 승인 거절된 내용을 보시면서 자신의 블로그를 다시 검토해보시면 도움이 되실것 같이 올려 드립니다. 참고만 해주시기 바랍니다.

1. 접수거절

Google AdSense에 관심을 가져주셔서 감사합니다. 귀하의 신청서를 검토한 결과 귀하의 웹 사이트는 Google 프로그램 기준에 부합하지 않는 것으로 확인되었습니다. 따라서 Google 프로그램에 대한 귀하의 신청을 접수할 수 없습니다.

Google은 Google 광고주뿐 아니라 게시자를 위해서도 Google 광고의 효과를 보장하기 위한 정책을 시행하고 있습니다. Google은 모든 게시자를 검토하고 있으며, 부적합한 웹 사이트를 거부할 권리를 보유합니다. 프로그램이 점차 성장해 감에 따라 더욱 다양한 웹 사이트에 저희 프로그램을 제공해 드릴 수 있도록 노력하고 있습니다.

Google은 자사의 의사 결정에 대한 구체적인 이유와 관련된 질의에는 응답해 드릴 수 없습니다. 양해해 주셔서 감사합니다.

감사합니다

네이버블로그를 하고 있다가 티스토리 블로그를 개설한후 작성된 포스트도 작고 개설된 기간도 얼마 되지 않았는데 무작정 신청을 했다가 보기 좋게 거절 당했습니다. 아예 접수 거절입니다. 너무 욕심을 부린것에 대한 당연한 결과인것 같습니다.

안녕하십니까,

가입축하 이메일에 나와 있듯이 사이트에 애드센스 코드를 삽입하시면 애드센스 신청서의 2차 검토가 진행됩니다. 검토 결과 다음과 같은 위반사항이 발견되어 귀하의 계정이 승인되지 않았습니다.

문제:
-
콘텐츠 불충분

---------------------

세부 정보:

콘텐츠 불충분: 애드센스에서 승인을 받고 귀하의 사이트에 관련 광고를 게재하려면 웹페이지에 있는 텍스트의 양이 Google 전문가가 검토하고 Google 크롤러가 페이지의 주제를 파악할 수 있을 만큼 충분해야 합니다.

이 문제를 해결하는 방법은 다음과 같습니다.

- 페이지에 충분한 양의 텍스트가 있는지 확인하세요. 콘텐츠의 대부분이 이미지, 동영상 또는 플래시 애니메이션인 웹사이트는 승인되지 않습니다.
- 콘텐츠에는 완전한 문장이나 구문이 있어야 하며 제목만 나열하는 것은 허용되지 않습니다.
- 애드센스 신청서를 제출하기 전에 귀하의 웹사이트가 제작이 완료되어 게시된 상태인지 확인하세요. 사이트가 베타 테스트 또는 '공사 중' 단계에 있거나 웹사이트 템플릿만으로 구성되어 있다면 신청서를 제출하지 마세요.
- 웹사이트의 라이브 페이지에 광고 코드를 삽입하세요. 메인 페이지가 아니어도 무방하지만, 애드센스 광고 코드만 삽입되어 있고 다른 콘텐츠가 전혀 없는 테스트 페이지는 승인되지 않습니다.- 방문자가 웹사이트의 모든 섹션과 페이지를 쉽게 찾을 수 있도록 분명한 탐색 방법을 제공해야 합니다.
- YouTube 동영상에서 수익을 올리려면 YouTube 수익 창출 프로그램(http://support.google.com/youtube/bin/answer.py?&answer=2490020&hl=ko)을 신청하세요. 단, 동영상만 게시된 블로그와 웹사이트는 승인되지 않습니다.

필요한 변경을 해주시면 신청서를 바로 다시 검토해 드리도록 하겠습니다.

두번째 신청할때는 어느 정도 포스팅한 글이 많아진 상태에서 신청을 했습니다. 거의 100개정도의 글이 작성되어 있었던것 같습니다.

하지만 접수후 2차 검토에서 거절당했습니다. 거절 사유는 콘텐츠 불충분 입니다.

콘텐츠 불충분이라는 거절사유가 발생하였는데 처음에는 많은 고민을 했습니다. 어떤 내용일까 떠오르지를 않았는데, 메일 하단의 텍스트에 대한 부분을 생각하게 되었습니다. 제 글들을 살펴보니 사진만 있고 텍스트가 거의 없는 글이 20여개 정도가 있었습니다. 처음에는 글을 더 입력하려고 했는데 엄두가 나지 않아 전체 삭제를 해버렸습니다.

나머지 글들도 하나씩 보면서 글을 추가로 입력하고 다시 재신청을 하였습니다. 전체 포스트수는 100여개에서 80여개로 줄었지만 결국에는 승인이 되었습니다.

거절 사유가 발생을 하게 되면 많이 알아보시고 해당 사유를 해소하시면 다시 승인이 가능하실것 같습니다.

이상으로 구글 애드센스 가입하게에 대한 소개는 마치겠습니다.

구글 애드센스 가입을 위한 사전 준비를 모두 하시고 난후 하루정도 지나면 최종승인에 대한 결과가 메일로 접수됩니다.

최종 승인이 되었으니 이제 신규 광고도 등록하고 자신의 블로그에 맞는 위치를 선정하여 광고를 게재하시면 됩니다.

저도 광고 단위 새로 만들고, 블로그에 어디에 위치시킬까 고민도 해보고 하면서 아래와 같이 설치해 두었습니다.

애드센스를 설치하면서 기존보다 가로폭을 넓게 하였습니다. 광고 설치하는것 때문에 기존 포스팅한 글도 전부 조정을 해야 할것 같습니다. 처음에 티스토리 스킨 설정할때 가로폭은 신중하게 결정해야 하겠습니다.

다음뷰 애드박스 위치를 변경하지 않으면서 상단에 두개의 애드센스 광고를 설치하기 위해 광고의 크기는 250*250 으로 조금 작은 사이즈로 선택하였습니다. 상단 3개의 광고를 배치한 모습입니다.

하단에는 한개의 광고만을 배치하였습니다. 도합 총 3개의 애드센스 광고를 배치하였습니다.

애드센스는 콘텐츠광고는 총 3개까지만 게재가 가능합니다. 추가로 링크광고나 검색광고를 추가로 게재할수도 있는데 이부분은 조금 익숙해지면 설치해볼 생각입니다.

애드센스 하단 광고 밑에 타사이트 3군데의 광고를 설치해 놓았는데 이부분운 3월 수익을 보고 배치여부를 다시 생각해볼 예정입니다. 조금씩 해보면서 광고 크기나 유형, 위치에 따른 수익성 변화도 검증해 보려고 합니다.

이제 본격적으로 애드센스를 시작하면서 여러가지 공부를 더 해야할것 같습니다.

광고배치를 위한 html/css 적용하는 방법도 필요하고, 벌써부터 할 걱정은 아니지만 부정클릭을 예방하기 위한 제트센스 적용법, 그리고 수익확인을 쉽게 할수 있는 방법등을 추가로 소개해 드리도록 하겠습니다. 

구글 애드센스 최종승인을 받기 위한 광고 코드 삽입과 관련하여 기존에 단위 광고를 생성하는 방법을 소개해 드렸습니다.

이번에는 만들어 놓은 광고 코드를 블로그 페이지에 삽입하는 방법을 소개해 드리겠습니다.

3단계: 페이지에 광고 코드 삽입

구글 애드센스 홈페이지에서 내광고로 이동하여 만들어 놓은 광고 단위를 확인합니다.

만들어 놓은 광고 단위의 코드 가져오기 를 클릭합니다.

선택된 광고 코드를 복사하여 본문 상단이나, 하단에 일괄적용을 원하시면 티스토리 관리페이지의 html/css 편집창에서 원하는 위치에 붙여 넣기 합니다.

구글 애드센스 승인을 받기위한 사전단계로 광고 코드를 삽입하고 최종 승인을 받아야 합니다.

광고코드를 삽입하는 과정중 2단계 애드센스 광고 단위 만들기를 알아보겠습니다.

2단계: 애드센스 광고 단위 만들기

먼저 애드센스 홈페이지로 이동하여 로그인합니다.

'내 광고' 탭에서 '콘텐츠'를 선택하고 '+새 광고 단위'를 클릭합니다.

설정값에 대한 설명

이름 - 나중에 확인 및 구분이 가능하게 알아볼수 있는 이름으로 등록합니다.

광고크기 - 블로그 본문에 배치할 위치를 고려하여 크기를 선택합니다.

광고유형 - 텍스트, 이미지, 리치미디어중 원하는 유형을 선택합니다.

대체광고 - 광고가 나타나지 않을때 광고위치에 표시되는 형태를 선택합니다. (승인전에는 빈칸으로만 나옵니다.)

저장 - 설정값을 저장하여 새로운 광고 단위를 생성합니다. (바로 코드를 삽입하시려면 저장 및 코드 생성을 누르시면 됩니다.)

승인을 얻기 위한 사전단계로 광고 단위를 생성을 하였습니다.

승인이후에는 별도 신청없이 광고 단위를 만들어서 블로그에 광고를 게재할수 있습니다.

광고 게재후 미승인이 되는 경우도 있으므로, 포스트 본문에 개별로 삽입하는 것은 안좋습니다.

html/css를 편집하여 일괄 적용이 되도록 해두어야 나중에 수정하기가 쉽습니다.

광고 단위의 수도 승인전에는 한가지정도만 등록해 두시고 나중에 승인후 실제 광고를 삽입할때 추가로 생성하시면 좋습니다.

지금까지 구글 애드센스 승인을 위한 사전 준비로 애드센스 광고 단위 만들기를 소개해 드렸습니다.

다음은 만들어 놓은 광고 단위를 블로그 페이지에 삽입하는 방법을 소개해 드리겠습니다.

구글 애드센스 가입하기 [1차승인]

구글 애드센스 가입신청서를 제출하면 최종승인을 위한 전단계로 블로그 광고게재에 대한 안내메일이 옵니다.

안내메일에 따라 광고게재를 하면 애드센스에서 블로그에 대한 검토후 최종승인이 이루어 집니다.

아래는 제가 받은 광고게재에 대한 안내메일입니다.

한통의 메일이지만 해야 할것이 많습니다.

다음 단계에 따라 사이트에 광고 코드를 삽입하고 애드센스에 최종승인을 받습니다.

1단계: 계정 액세스

신청서에 기재한 이메일 주소와 비밀번호로 애드센스 홈페이지(https://www.google.co.kr/adsense)에서 로그인합니다.

비밀번호를 잊어버린 경우 아래 사이트로 이동하셔서 확인하시면 됩니다.

https://www.google.com/adsense/support/as/bin/static.py?page=ts.cs&ts=1054302&sct=app-api&hl=ko

또한 계정에 유효한 연락처 정보를 등록해야 합니다.

2단계: 애드센스 광고 단위 만들기

'내 광고' 탭에서 '콘텐츠'를 선택하고 '+새 광고 단위'를 클릭하거나 둘러보기(http://goo.gl/umUzL)를 사용합니다.

3단계: 페이지에 광고 코드 삽입

광고 단위를 만든 후 '코드 저장 및 생성'을 클릭하여 광고 코드를 생성하고 웹사이트의 HTML 소스에 붙여넣습니다.

상기 내용과 관련하여 2단계 애드센스 광고 단위 만들기와 3단계 페이지에 광고 코드 삽입에 대해서는 추가로 소개하겠습니다.

중요사항

사이트에 실제 광고가 게재된 후, 테스트 목적을 포함하여 어떠한 목적으로든 자신의 사이트에 게재된 광고를 클릭하는 것은 애드센스 프로그램 정책에 위배됩니다

Google의 프로그램 정책을 준수하는 웹페이지 또는 웹사이트에는 언제든지 애드센스 코드를 추가할 수 있으며, Google에 알리거나 새로 계정을 신청하지 않아도 됩니다. Goolgle 크롤러가 광고 코드를 삽입한 모든 웹페이지에 액세스할 수 있어야 합니다.

현재 신청서의 일부만 검토가 완료된 상태이지만 이제 사이트에 광고 코드를 삽입할 수 있습니다. 그러나, 사이트에 대한 검토가 완전히 끝날 때까지는 smart-m.tistory.com에 실제 광고가 게재되지 않습니다. 대신 빈 광고만 사이트의 배경과 섞여 표시됩니다.

사이트에 애드센스 코드를 추가하고 Google에 광고 요청을 보내야만 신청서 검토가 완료됩니다. 검토가 완료되면 귀하의 신청서에 대한 최종 승인 또는 비승인 여부가 결정됩니다. 승인되는 경우 실제 광고가 게재되기 시작합니다.

사이트에 실제 광고가 게재된 후에도 귀하의 계정이 애드센스 정책을 준수하는지 여부가 지속적으로 검토됩니다. 위반사항이 발견되면 귀하의 페이지에서 광고 게재가 중단되거나 계정이 비승인될 수 있습니다. 사이트에 광고가 보이지 않을 경우 애드센스 계정에 로그인하여 수신된 알림이 있는지 확인하시기 바랍니다.

티스토리 블로그를 스킨위자드로 기본적으로 꾸몄다면 세부적인 항목에 대한 설정 변경을 해주어야 합니다.

꼭 필요한 설정도 있을것이고, 개인적인 취향에 따라 변경을 하는 경우도 있을것입니다.

이번에 소개해 드릴 티스토리 꾸미기 내용은 블로그 하단에 위치한 [카테고리의 다른 글] 박스에 대한 설정 변경입니다.

초기에 블로그 스킨을 선택했을때의 모습입니다.

회색바탕에 회색글씨로 되어 있어 별로 마음에 들지 않네요. 개인적으로 깔끔하고 단순한 것을 좋아해서 색상을 바꾸고 싶어 졌습니다. 오른쪽의 날짜도 자리만 차지하고 어수선하기만 하네요. 이제 변경하기로 하였다면 그 방법에 대해서 알아보겠습니다.

먼저 HTML/CSS 편집에서 바탕색상을 변경하겠습니다.

관리자모드 ▶ 스킨 ▶ HTML/CSS 편집으로 이동합니다.

style.css 맨아랫줄에 아래 첨부파일의 소스를 붙여넣기 합니다.

아직 HTML 을 완전히 사용할줄 모르기 때문에 해당 변경 내용은 검색으로 구해서 이상유무를 테스트 했습니다.

인터넷상에 동일한 내용의 많은글과 변경코드가 있으며, 실재 적용시 문제가 없음을 확인하였기에 첨부로 올려 드립니다. 

.another_category table th, .another_category table td {background-color: white;}
.another_category td {display:none;}       

카테고리의 다른 글 바탕색 바꾸기.txt

티스토리 꾸미기 - 스킨위자드

티스토리 블로그를 개설하셨다면 이제 스킨위자드를 이용하여 쉽게 자신만의 멋진 블로그를 만들어 봅니다.

최적화된 멋진 블로그는 나중에 각종 설정 및 편집기능을 익히고 난후 만들어 보시고 일단 스킨위자드를 이용해서 쉽게 나만의 블로그를 만들어 보겠습니다.

블로그 스킨은 자신의 블로그를 나타낸주는 대문의 역활을 하므로 공을 들여 만들어 놓아야 하지만, 아무리 공을 들여 만들어 놓아도 100% 만족하지는 못하는 것 같습니다. 여유을 가지고 조금씩 보완해 나가는게 좋을것 같습니다. 처음부터 무리하게 되면 지쳐서 금방 흥미를 잃게 되니 마음을 비우시고 조금씩 나아지는 내 블로그의 모습을 보면서 기쁨을 느껴보시기 바랍니다.

[스킨위자드] 는 만들어져 있는 여러가지 스킨들을 블로그에 쉽게 적용할수 있도록 해주는 기능입니다. 여러가지 스킨의 선택, 선택한 스킨의 색상이나 크기등의 간단한 수정이 가능합니다.

1. 스킨 선택

자신의 블로그에서 관리자 모드로 들어갑니다.

관리자모드 꾸미기에서 스킨을 선택합니다.

나와있는 스킨중 마음에 드는 스킨을 선택합니다.

스킨위자드가 적용되는 스킨인지 확인하고, 적용을 눌러 자신의 블로그에 스킨을 적용합니다. 

2. 스킨위자드 실행 (스킨 꾸미기)

스킨위자드를 실행합니다.

배경, 타이틀, 게시글의 이미지 및 크기, 색상을 원하는 스타일로 변경하고 완료되면 적용을 눌러 변경을 합니다.

블로그에 적용된 스킨이 마음에 들지 않는다면 다시 위의 순서대로 실행하시어 변경하시면 됩니다.

TIP) 블로그의 글자크기와 색깔은 주의 깊게 보셔야 합니다. 글자크기는 일반적으로 10-12PX 이며 이보다 작으면 읽기가 힘들수가 있습니다. 또한 글자색은 지나치게 화려한 색을 선택한다면 글을 읽을때 어지러워 보일수 있으니 주의하셔야 합니다.

티스토리 블로그 개설에 이어 스킨설정으로 내 블로그를 기본적으로 꾸몄다면 이제 포스팅을 하면서 더 자세히 꾸미는 방법을 배워 적용하시면 됩니다.