본문 바로가기

포트폴리오 스킨 애드센스 일치하는 콘텐츠 광고 넣는 위치

gracenmose 2021. 8. 30.

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

 

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

 

알아두어야 할 사항

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

 

반응형

 

포트폴리오 스킨

포트폴리오 스킨은 나만의 시선, 나만의 콘텐츠로 '꽉 찬 공간'이라는 설명으로 만들어진 스킨입니다. 살펴보니 사진 위주의 포스팅을 위주로 하는 블로그에서 쓸만할 것 같습니다. 커버 리스트도 여러개 있어서 사진을 강조하고 싶은 블로그에서 사용하기 아주 좋아보입니다.

 

포트폴리오 스킨

 

PC에서의 모습

기본값을 '리스트' 형태로 글 리스트를 왼쪽에 섬네일과 함께 제목, 본문 글 일부를 보여주는 1단 형태의 스킨입니다. 깔끔하게 생겼고 리스트에서는 가로폭을 최대한 잘 활용합니다. 대략 1000픽셀 정도의 가로폭을 유지하는 것 같습니다.

 

기본 목록 화면

 

카테고리 등은 우측 상단의 메뉴 버튼을 누르면 오른쪽에서 팝업되어 나오는 형태입니다. 군더더기 없이 매우 깔끔한 디자인이네요.

 

메뉴 팝업

 

본문에서는 지정한 '대표' 사진이 확대되어서 제목 박스의 배경이 되는 형태입니다. 목록에서는 가로를 넓게 쓰더니, 본문에서는 가로를 700 픽셀 밖에 활용하지 않는 부분이 조금 아쉽네요. 800픽셀로 해도 충분할텐데, 그것 때문에 초기화면에서 보던 시원함이 본문 들어가면 약간 아쉬워집니다.

 

이 스킨으로 쓴다면 800픽셀로 본문 폭을 넓혀 쓰는 것이 좋지 않을까 생각해 봅니다. (개인적 취향의 문제입니다.)

 

PC본문 모습

 

모바일에서의 모습

모바일에서도 기본은 PC와 거의 같습니다. 통일성 있게 유지하기 좋죠. 썸네일이 너무 크지도 않아서 괜찮아 보입니다. 본문을 클릭해서 보면, 제목박스가 상당히 크죠? 웬만한 폰에서 절반 정도의 크기는 제목 박스가 차지할 것입니다. 

 

이런 형태는 사진이 중심이 되는 콘텐츠에 효과적일 것 같습니다. 레시피라면 음식 완성샷을 대표사진으로 많이 하는데, 그 사진이 제목 박스 뒤에 배경이 되니까 사진으로 시선을 한 번 잡아주고 가는 것이죠. 여행도 멋진 풍경을 배경으로 해 주니, 사진이 중심이 되는 콘텐츠라면 쓸만해 보입니다.

 

모바일에서의 모습

 

우측 상단 메뉴를 누르면 화면 전체를 덮으면서 카테고리등이 나옵니다. PC에서처럼 절반만 덮었으면 어땠을까 하는 생각이 드네요. 이것 말고는 생각보다 매우 깔끔합니다.

 

모바일 메뉴 클릭 모습

 

커버 아이템은 슬라이더, 갤러리, 섬네일리스트, 와이드패널, 리스트 형이 있습니다. 

커버 아이템

 

슬라이더는 이미지가 화면 가득 차면서 좌우로 밀면서 보는 형태입니다. 사진이 위주라면 괜찮아 보이기는 합니다.

슬라이더

 

갤러리는 대표사진을 배경으로 하고 글 제목들이 쭉 나오는 형태네요

갤러리

 

섬네일 리스트는 2열로 그림과 제목, 본문 일부가 나오는 심플한 디자인입니다.

섬네일 리스트

 

와이드패널은 아래와 같은 형태인데 사진을 강조하면서 뭔가 다른 블로그와 완전 차별화 된 느낌을 줄 수도 있을 것 같습니다.

와이드패널

 

 

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

광고 코드를 넣기 위해 찾는 article_rep_desc 치환자는 두 번 나옵니다.

 

첫번째

429행에 나오는 첫번째는 아래 태그 등이 안 보이는 것 같은데, 왜 공식 스킨에 아래 주석처리를 많이 남겼는지 모르겠네요. 10줄 아래로 내려가면 태그, 관련글로 이어지는 코드가 보입니다.

 

즉, 포트폴리오 스킨은 첫 번째 치환자 뒤에 애드센스 광고 코드를 넣어야 합니다.

 

두번째

636행에 나오는 두번째 것은 아래 notice가 보이는 등, 태그가 없으니 이곳은 아닙니다.

 

 

요약

  • 애드센스 광고 코드는 첫번째 article_rep_desc 뒤에 넣어야 한다.
  • 사진 위주의 블로그라면 깔끔하게 쓸 수 있는 커버가 많다.
  • 본문 가로폭이 700픽셀이라 조금 아쉬움 (800픽셀로 수정은 가능)

 

 

[다른 스킨 글 보기]

그리드형(광고전용)

댓글