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

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;}

네이버에서 검색되도록 하는 법

네이버에서 내 티스토리가 검색되게 하고 싶다면

네이버 웹마스터도구를 사용합니다.

링크는 아래와 같습니다.

https://webmastertool.naver.com/board/main.naver

현재 가지고 있는 네이버 아이디로 로그인을 누르면 됩니다.

그리고 나서 사이트 추가 버튼을 누르면

사이트 소유 확인 절차 창이 뜹니다.

티스토리에서

관리자설정 - 꾸미기 - 스킨변경 - 스킨편집 - html 을 눌러서

head 쪽에 위 메타태그를 붙여넣습니다.

그리고 위 설정을 저장합니다.

위 메타태그를 넣었다면 정상적으로 확인완료 될 것이다.

사이트 등록 후 이제 사이트의 페이지를 수집해가라고 해야한다.

웹 페이지 수집을 게시물의 웹페이지 주소를 등록한다.

수집은 조금만 기다리면 금방 완료된다.

네이버에서 검색되도록 하는 법은 여기서 끝이다.

티스토리 스킨 변경하는 법

https://www.tistory.com/skin

여기서 자신이 원하는 티스토리 스킨을 다운 받습니다.

그리고 다운 받은 압축파일을 풉니다.

그리고 나서 블로그 설정 페이지에 들어가서

꾸미기 - 스킨 변경 - 스킨 등록을 클릭합니다.

그러면 스킨 등록창이 나오는데,

아까 압축풀었던 파일안의 파일들을 모조리 등록해주면 됩니다.

등록 완료 후 스킨 보관함에 들어가시면

이렇게 등록된 스킨이 보입니다.

등록된 스킨를 클릭해서 적용하면 끝입니다.

처음에 네이버블로그와 달리 티스토리 스킨 변경하는 법이 하질 않았는데 이렇게 쉽다니^^;;

진작에 할 걸 그랬어요 ㅎㅎ

티스토리 스킨 변경하는 법 포스팅이 많은 도움이 되었길 바랍니다.