티스토리 에드센스에 좋은 스킨으로 바꾸는 법

feat. 오른쪽 메뉴 너비 늘리는법, 포스트 크기 늘리는 법

(사족이 깁니다^^;; 바쁘신 분들은 바로 아래로 가시면 됩니다)

직장일 때문에 일주일간 티스토리에 한번도 들어가질 못했다.

정신없는 평일을 보낸 후 일요일이 되어서야 티스토리에 들어왔는데

전에 신청해놓은 애드센스가 승인이 되어있었다!

(애드센스 광고 승인이 어렵다고 들었는데 쉬운것인지??

아무튼 1000자 넘는 50개의 포스팅을 안써도 되니 다행이다^^)

그리고 애드센스 승인 후에야 왜 사람들이 오른쪽메뉴바를 선호하는지 깨닫게 되었다.

마우스커서가 오른쪽에 있어야 편해서 광고 클릭을 잘하니까..

그걸 깨닫고 부랴부랴 애드센스에 알맞는 광고를 찾았다.

최소 조건은 반응형, 2단, 오른쪽이 너비가 넓을 것 3가지 조건이었다.

그런데 메뉴 넓이가 넓은건 단 한개도 없었다..

다행히 HTML, CSS는 대략 알았다.

그래서 HTML CSS 스킨 편집으로 가서 그럴듯한 이름?을 가진 스타일에 weith = 1000px; 를 넣으며

한땀한땀 노가다했다^^;;;

그리고 드디어 광고가 잘 보이기 위해

오른쪽 메뉴 너비를 크게 수정하는 법을 알았다!

수정 결과는 이렇다.

아래는 바꾸기 전

바꾸고 난 후

프로필 사진의 크기로 메뉴바 너비가 확실히 넓어진 것을 알 수 있다.

오른쪽 메뉴 너비 늘리는법

블로그 관리 - 꾸미기 - 스킨편집 - 사용중인 스킨 편집 - html 편집을 누른다.

아래와 같은 화면에 들어왔을 것이다.

여기서 HTML을 누르지말고 CSS를 누른다.

왠 이상한 영어들이 보일 것이다.

이 모든 영어를 복사해서 메모장에 붙여넣는다.

**잠시 알아야 할 것**

이제부터 영어 단어로 메뉴와 콘텐츠를 유추해야한다.

(내가 사용하는 스킨은 만든사람이 포스트 스타일을 .contentArea 라고 썻지만 당신이 사용하는  스킨의 포스트이름은 다를 수 있다)

이걸 만든것도 사람이 만든것이다. 그렇기 때문에 스타일(글자특징. 핑크색, 크기... 특징의 집합)이란것에 이름을 부칠 때

사람들은 비슷한 생각을 한다.

예를들어 티스토리 블로그 이름 크기 스타일을 만들고싶다... 만든사람은 스타일 이름을 뭘로 지을까?

아마 HeadName 이나 Ttitle 로 이름을 짓지 않을까??

그런식으로 메뉴와 포스트의 스타일 이름이 무엇일까 유추를 해야한다

그리고 유추된 스타일 이름에 width을 하나씩 바꿔본다!!

만약 메뉴 너비가 바뀌면? 그 스타일이 내가 수정하고 싶던 메뉴 너비에 관한 스타일이다!

내가 찾은 포스트 스타일은 contentArea 이다.

.contentArea 와 width: 가 같이있는 문장을 찾는다.

.contentArea {float:left; width:60%; margin:20px 0; padding:0 20px 20px 10px; font-size:12px; font-size:1.2rem; box-sizing:border-box; border-right:1px solid #dfdfdf;}

.sidebarArea {float:right; width:40%; margin-top:20px; padding:0 10px 20px 20px; font-size:12px; font-size:1.2rem; box-sizing:border-box;}

여기서 contentArea는 포스트 너비 sidebarArea는 메뉴 너비이다.

반응형이라서 그런지 퍼센트로 되어있다.

둘을 합쳐서 100%가 되게하고, 광고가 잘 나올것 같은 알맞은 비율을 주면된다.

(나는 위와 같이 했다)

포스트 너비 늘리는 법

근데 메뉴가 엄청 넓어져서 그런지 콘텐츠 영역은 쪼그라들어 보인다.

그럼 포스트 너비를 늘려야한다. 

포스트 너비를 늘리는 법은 간단하다.

.containerArea 를 찾는데 width 와 같이 있는 문장을 찾으면 된다.

나는 아래처럼 1000px로 변경했다. 훨씬 넓어보인다.

/* LAYOUT */

.menuS {position:absolute; top:0; list-style-type:none; width:430px; margin:0; padding:0 10px;}

.menuS li {display:inline; margin:0; padding:0; font-size:12px; font-size:1.2rem; color:#000;}

.menuS a {position:absolute; top:-200px; left:0; display:block; padding:5px 10px 7px; background-color:#dfdfdf;}

.menuS a:focus {top:0; left:0;}

.containerArea {width:100%; max-width:1000px; margin:40px auto 15px;}