티스토리 블로그 POSTER 스킨 꾸미기[1탄 : 레이아웃]

 꿍스뿡이의 드림빌더 

티스토리 POSTER 스킨 꾸미기[1탄 : 레이아웃]

안녕하세요. 꿍스뿡이입니다!

오늘은 티스토리에 있는 POSTER 스킨을 바꾸는 방법에 대해 설명해보도록 하겠습니다!

티스토리의 매력은 바로 직접 스킨들을 꾸밀 수 있다는 점이죠!

그러나

말이 쉽지~ 꾸미는거 쉽지 않습니다요 ㅠ.ㅠ

그래서 오늘과 내일에 걸쳐 제가 설정한 POSTER 스킨에 대해 공유해보려고 합니다. 

오늘은 레이아웃에 대한 설명 위주로 하고, 다음포스팅에서는 직접 소스를 적용해보는 시간을 가져보도록 하겠습니다.

레이아웃설명 - 메인화면 및 공통기능(인디케이터, 광고, 이웃추가)

[메인화면]

지금 보는 화면은 제 블로그의 메인화면입니다. 

저는 현재는 지금처럼 단순 리스트형의 메인화면만을 구성해봤는데요~ 

꼭 저처럼 구성을 맞추실 필요는 없으니깐 그 부분은 감안하고 봐주시기 바랍니다. 

메인화면과 게시글로 진입했을때 모두 왼쪽에 대형광고와 이웃추가 버튼이 계속 노출되도록 구성했습니다. 

[공통(메인, 게시글)화면]

그리고 화면의 크기가 일정크기 이하로 줄어들게 되면 광고가 우선 제거되고, 모바일 화면과 같이 화면이 더 줄어들게 되면 이웃추가 버튼도 노출되지 않도록 조치했습니다. 

PC화면으로 블로그를 보는 사람의 경우 가로폭이 충분하기에 광고와 이웃추가 버튼을 노출해도 크게 문제는 없습니다. 그러나 모바일과 해상도가 낮은 노트북 사용자의 경우에는 광고와 이웃추가 버튼이 거슬릴 수 있습니다. 

만약 설정을 하지 않으면 게시글 전체가 광고로 가려질 수 있으니 노출에 대한 설정은 조절하시는것이 좋을듯 합니다. 

[공통 - 인디케이터]

인디케이터는 스크롤을 보이시는 검은색 바가 내리면 점점 올라가고, 스크롤을 올리면 점점 줄어들면서

내가 현재 어느정도까지 글을 보고 있는지를 보여주는 역할을 합니다. 

전 이 부분이 마음에 들어서 추가했습니다.

레이아웃설명 - 메뉴부분(구글번역, 광고)

[메뉴부분 - 구글번역]

메뉴를 클릭하게 되면 상단에 구글번역 select박스가 보입니다. 이 버튼은 구글에서 직접 코드를 받아서 적용하면 되는데, 해당 내용은 다음에 따로 포스팅하도록 하겠습니다. 

처음 블로그를 시작하시는분들께는 상관없을 수 있으나 해외유저분들을 생각하시는 분들은 넣으시면 좋을듯 합니다. 

해당 버튼은 게시글에 직접 넣으시는분도 있기도 하니 버튼을 넣는 방법만 알아가셔도 좋을듯 합니다. 

[메뉴부분-하단광고]

해당광고의 위치는 메뉴구조 바로 밑에 나타나게 됩니다. 메뉴호출시에만 보이기 때문에 해당 위치는 노출로만 보면 메뉴를 클릭하기 전까지는 노출이 되지 않는 위치입니다. 메뉴구조가 길어서 방문자분들이 메뉴를 잘 누르실거 같으면 넣으시면 되고, 그럴필요는 없을거 같다면 넣지 않으셔도 될듯 합니다.

레이아웃 - 게시글

[게시글]

게시글 부분에 들어가는 광고 위치입니다. 광고수익은 아무래도 게시글에서 많이 발생하죠.

게시글 내부의 광고는 각자의 생각하신대로 추가하시면 되고, 여기에서는 게시글을 글릭했을때 공통적으로 보이는 광고 고만을 다루겠습니다. 

① 해당 부분은 위에서도 말씀드린 부분입니다. 메인화면과 게시글 모두 보여지는 화면이며, 크기는 300*600입니다. 

    보통 세로 이미지 위주의 광고가 주로 노출됩니다.

② 일치하는 콘텐츠 형식의 광고로 작은광고와 제가 작성한 글이 함께 노출됩니다. ②과 ③의 위치는 게시글 제일 하단에 위치하며 태그와 댓글 사이에 노출되어 집니다. 

③ 해당 부분은 일치하는 콘텐츠 광고 바로 밑에 노출되며 광고 크기는 850 * 250입니다. 

    보통 가로 이미지 위주의 광고가 노출됩니다.

④ 해당 부분은 이웃추가를 할 수 있는 버튼입니다. 티스토리 측에서 2019년부터 구독버튼을 신설한다고 합니다. 

    아마 이 버튼은 구독버튼이 어떤식으로 구현되느냐에 따라 계속 사용할지 폐기할지 정해야 할듯 합니다.

정리 - 사전 준비사항 및 다음 포스팅 예고

해당 포스팅은 다음과 같은 사람들을 위해 작성했습니다.

1. 애드센스 광고자격이 있는 사람 기준의 포스팅입니다.

해당 스킨을 보면 아시겠지만 해당 포스팅은 애드센스 광고를 추가할 수 있는 사람들을 위한 포스팅입니다. 

따라서 광고가 없으신 분들은 인디케이터와 이웃추가 버튼만 적용할 수 있습니다.

2. 애드센스 광고 추가에 대해 어느정도 알고 계신 분

따로 광고단위를 만들고 추가하는 내용은 이번 포스팅에 없습니다. 따라서 본 포스팅은 광고를 만든 경험이 있는 사람들을 기준으로 작성되었으며, 방법을 모르시는 분들을 위해 추후 광고를 추가하는 방법에 대해 포스팅 하도록 하겠습니다.

다음의 광고단위가 있어야 합니다.

250*600광고 : 메뉴 하단에 실릴 광고(저는 그냥 300*600짜리로 사용하고 있어요. 귀찮으신 분은 안하셔도 됩니다.)

300*600광고 : 왼쪽 이웃추가 버튼 위에 실릴 광고

850*250광고 : 게시글 하단에 실릴 광고

일치하는 콘텐츠 : 해당 광고는 조건이 되야 열리는 광고로 알고 있습니다. 없으신 분은 생략해주세요.

다음 포스팅 예고

1. 다음 포스팅에는 실질적인 소스코드를 추가하려 합니다. 

기존의 운영하는 제 블로그를 기준으로 설명을 하게 되면 제가 따로 설정해둔 다른 소스코드로 인해 따라하기 힘들 수 있기에 새로 블로그를 만들어서 설명하도록 하겠습니다. 

2. 다음 포스팅에선 광고가 노출되지 않습니다. 

계정을 새로 만들어서 진행하기 때문에 다음 포스팅에선 소스적용 후 광고가 적용된 모습을 보여드릴 수 없습니다. 

따라 하시는분들의 화면에선 정상적으로 노출될 수 있으나, 그렇지 않으시면 댓글로 남겨주세요.

3. 광고 ID가 다르기 때문에 ID 부분은 삭제하여 올립니다.

다음 포스팅에 추가할 소스에는 제 광고 ID는 제거한 뒤 올립니다. 각자의 광고코드를 복사하신 후 적용해주세요.

4. 추가사항입니다. 꼭 읽어주세요.

왼쪽에 보이는 고정형 광고(300*600)는 정책위반일 가능성이 있습니다. 글을 작성한 시점에는 인지하지 못했으나 추가정보를 확인해보니 대다수는 정책위반이니 사용을 자제하라는 의견이 많았습니다. 

변경된 점은 왼쪽 광고는 해당 위치에 최초 호출이 되고 스크롤을 하면 광고는 따라가지 않는 방법으로 적용했습니다.

이미 적용하신 분은 다음 글에 있는 'CSS파일.txt'파일을 적용해주시기 바랍니다.

처음이신 분은 그대로 진행 해주시면 됩니다.

다음 가이드를 확인바랍니다. https://support.google.com/adsense/answer/1346295?hl=ko

문제문구 : Google에서는 데스크톱에서 사용자가 페이지를 스크롤하거나 탐색할 때 페이지의 

              '고정'되거나 '플로팅'되는 위치에 광고를 게재하는 행위를 제한하고 있습니다.

 

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은 아래 하트♥공감 버튼을 꾹 눌러주세요! 

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!