본문 바로가기

#2 스킨 애드센스 일치하는 콘텐츠 광고 넣는 위치

gracenmose 2021. 8. 31.

스킨별 애드센스 일치하는 콘텐츠 넣는 위치 포스팅 시리즈입니다. 티스토리에서 기본 제공하는 10개 스킨에 대해서 애드센스 일치하는 콘텐츠 광고 단위가 떴을 때 넣는 위치를 정리하는 내용입니다.

 

(구독자를 위한 포스팅을 하고 있는데 제 블로그가 구독하시는 분들의 '피드'에 안 뜨는 문제가 매우 심각하게 발생하는 듯 하네요.. 다음이 카카오하는 이 버그는 과연 고치기는 할까요?)

 

알아두어야 할 사항

  • 모든 스킨 편집 내용은 '기본'값입니다. 즉, 스킨변경에서 적용 버튼 누른 순정 상태 기준입니다. 수동으로 HTML편집에서 몇 줄 넣었으면, 제 글에서 언급하는 위치에서 조금 뒤에서 찾으시면 됩니다.
  • HTML 편집 모드에서 검색을 하려면 편집창을 한 번 클릭 후 CTRL+F 를 눌러야 합니다. 
    이렇게 노란 창으로 떠야 함
    위와 같이 노란색으로 창이 떠야 제대로 찾을 수 있습니다.
  • 편집하기 전 실수를 방지 하기 위해서 미리 HTML 페이지 전체를 메모장에 복사해 두면 좋습니다.
    ▶ 관련글: 티스토리 스킨편집 할 때 꼭 해 두면 좋은 팁 (ft. 메모장)

 

반응형

 

#2 스킨

#2 스킨은 티스토리에서 두번째 만든 반응형 스킨이어서 붙은 이름입니다. 처음 2개의 스킨은 이름을 어떻게 지을지 고민을 안한 모양입니다. 첫번째 스킨은 #1이더니, 두 번째 만든 반응형 스킨 이름이 #2입니다.

 

#2 스킨

#2 스킨은 별다른 커버 설정이 없다보니, 미리보기에 보이는 화면이 그대로입니다. PC기준 가로폭이 조금 넓으면 왼쪽 사이드바처럼 지정한 배경 이미지(처음 기본 값은 미리보기에 보이는 유럽의 성 같은 사진임)가 있는 블로그 이름이 있는 것이 나타납니다.

 

PC에서의 모습

PC 웹브라우저의 가로폭이 1200을 넘으면 왼쪽이 보이는 것 같고, 거기서 조금만 폭이 줄어도 PC웹브라우저의 가로폭을 전부 활용하는 사이드바 없는 1단 블로그로 보여집니다. 이때 가로폭은 브라우저 폭을 따라갑니다. (즉, 본문의 가로 길이가 유동적이라는 이야기)

 

PC화면 모습

가로폭이 1280인 상태에서의 모습입니다. 이 모습은 괜찮은데, 어설프게 1000픽셀 정도로 가로폭을 했을 때는 본문의 가로폭이 너무 길어져서.. 글의 가로 길이가 너무 길어지는 단점이 나타납니다. CSS 수정을 통해 가로폭을 고정하는 방법을 연구해서 적용하는게 좋아보입니다.

 

왼쪽 메뉴 확장

좌측 상단의 메뉴 버튼을 누르면 카테고리, 최근글 등 사이드바가 펼쳐집니다. 총 3단으로 되어 있고 본문을 덮는게 아니고 화면 우측으로 밀어버립니다. 사이드바 애드센스 광고 넣어도 여길 펼쳐야만 광고가 뜨니까, 이 스킨을 쓰면서 사이드바 애드센스는 넣어도 별 소용은 없겠습니다.

 

본문 읽기

본문을 볼 때 별도 사이드바 없이 시원한 화면입니다. 가로폭이 넓어서 사진 위주 포스팅에 좋을 것 같기는 합니다. 다만 너무 사진이 크면 화면 가득 사진만 끝없이 나올 수도 있겠네요. 이 스킨을 쓸 때는 사진 넣을 때 사진의 세로 크기도 좀 고려를 하고 넣어야 할 듯 싶습니다.

 

 

모바일에서의 모습

모바일의 모습은 굉장히 심플합니다. 군더더기 하나도 없는 모습이 인상적입니다. 목록 리스트는 섬네일이 우측에 작은 정사각형으로 들어가고 왼쪽에 제목과 본문의 일부가 2줄까지 표시가 됩니다. 

 

폰트 사이즈도 적당하고, 화면 가득 리스트가 나오는 것이 좋아보이네요. 왼쪽 상단의 메뉴 버튼을 누르면 화면 전체를 덮으면서 카테고리 등 메뉴가 나오는 형태입니다. (이때의 배경 역시 PC에서 바꾸는 것과 동일하게 바꿀 수 있음)

 

#2 모바일 화면

 

본문 모드는 더 이상의 군더더기 없이 깔끔합니다. 기본 폰트 사이즈 가독성에 충분한 크기로 보여지고, 제목 폰트가 너무 두껍지 않아서 조금 긴 제목도 줄바꿈이 되지는 않을 것 같네요. 

 

모바일 본문

사진보다는 본문의 콘텐츠에 집중시키기에 아주 적합한 구성입니다. 사진이 핵심이 되는 블로그라면 제목이 대표 사진을 배경으로 사용하면서 표시되면 뭔가 사진에 눈길이 가면서 본문을 보게 될 것 같고, 이 콘텐츠는 핵심 키워드인 제목이 눈에 딱 들어오고 본문을 보게 될 것 같습니다.

 

즉, 애드센스 광고가 더 눈에 잘 보인다는 의미? 가 될 수도 있겠다는 생각이 번뜩 지나갑니다. 선택은 언제나 블로그 주인장이 결정하는 것이죠.

 

처음엔 디자인이 좀 이상하다 싶었는데, 볼수록 괜찮은 스킨 같네요. 역시 버릴 스킨이 하나도 없는 티스토리 기본 스킨들입니다. 

 

별도의 커버 설정은 없습니다. 여기서 본 모습이 이 스킨의 전부입니다. 심플 이즈 베스트죠.

 

 

애드센스 일치하는 콘텐츠 광고 넣는 위치

광고 코드를 넣기 위해 찾는 article_rep_desc는 #2 스킨에서 2곳에 나옵니다. 이 스킨도 두 번째가 아닌 첫번째가 코드를 넣는 위치입니다.

 

첫번째 위치

첫번째 위치

첫번째 나오는 것은 245행에 나옵니다. 246행을 아래로 밀고 이곳에 일치하는 콘텐츠 광고 코드를 넣으면 된다는 이야기죠. 아래에 태그로 이어지는 것으로 쉽게 판단할 수 있습니다.

 

두번째 위치

두번째 위치

두번째 나오는 것은 406행에 나옵니다. 아래 태그가 아닌 notice(공지사항)으로 연결이 되네요. 그러니 이 곳은 아닌 것입니다. 

 

 

요약

  • 티스토리에서 두 번째로 만든 반응형 스킨으로 매우 심플한 것이 특징
  • 별도의 커버 리스트는 없다
  • PC에서는 1200 픽셀 이하 770 픽셀 이상은 브라우저의 가로폭을 따라 본문 폭이 조절됨
  • 모바일에서는 군더더기 없는 깔끔한 본문 스타일
  • PC에서 사이드바 광고는 넣어도 메뉴를 누르지 않는 사람에겐 안 보임
  • 애드센스 일치하는 콘텐츠 코드는 '첫번째' 치환자 뒤에 넣어야 함

 

 

[다른 스킨 글 보기]

그리드형(광고전용)

댓글