티스토리 SSL 전면 적용을 한주 앞두고 블로그 스킨을 교체했어요.
기존 toPiece 스킨은 잘 사용해왔고 디자인도 참 마음에 들었지만 SSL 적용이 완전하지 않았습니다. 개인 디자이너 분이 만든 무료 스킨이라 지속적인 업데이트가 이뤄지지 않는다는 점도 고려대상이었어요.
티스토리가 오랜만에 새로 공개한 4종류의 블로그 스킨들을 적용해 보았습니다. 그중 Poster와 Whatever 스킨을 두고 만지작 거리다가 최종적으로 선택한 스킨이 Whatever!
Poster 포스터 블로그 스킨을 먼저 선택했지만 Whatever 왓에버로 변경한 이유는 두가지가 있어요.
그 하나는 Poster 스킨의 디자인이 저희가 원하는 쪽과 거리가 있었기 때문이에요. Poster 스킨은 아무래도 차분하고 세련된 전문적인 느낌인데요. 저희는 여러가지 일상을 좀 더 가벼운 느낌으로 풀어나갈 수 있는 디자인을 원했어요. 그런면에서 Whatever 스킨 분위기가 좀 더 적합했습니다.
두번째는 HTML 코드 문제인데요. 아래 이미지를 보시면 좀 더 이해가 쉬울 거에요.
티스토리 블로그의 Poster 스킨의 경우 태그 깨짐 현상이 있습니다. 관리자 메뉴에서 HTML 을 열어보면 중간 부분이나 마지막 부분 태그가 빨간색으로 표시되어 있어요.
처음에는 제가 블로그 스킨을 수정하다가 뭘 잘못 건드린건 줄 알았으나 스킨을 새로 적용해봐도 마찬가지였습니다. 일단 이 현상이 별 문제를 일으키지는 않는 거 같아요. 스킨은 정상적으로 적용되었습니다.
* 수정중이던 Poster 스킨_커버 미적용 메인화면
다만 초록색 태그들을 흐뭇하게 바라보다가 마지막 body나 html 종료 태그가 빨간색이라니... 저는 불편했습니다.
Poster 스킨이 기존 스킨보다 애드센스 광고 로딩이 느린 것도 혹시 이 태그 깨짐과 연관이 있는 건 아닌지 의문이 들었습니다.
매일 보면서 오래도록 함께할지도 모르는 스킨인데 이왕이면 마음이 편한 스킨이 좋겠지요! 그래서 현재 스킨이 Whatever입니다.
* Whatever 스킨_커버 적용 메인화면 상단
Whatever 스킨의 장점은 역시 디자인이 예쁘다는 점입니다. 특히 커버 기능을 사용했을 때는 포스팅의 썸네일 사진을 얼마만큼 부각시킬 것인지(작게 또는 화면 반이나 전체) 선택이 가능해서 좋습니다.
이 커버 기능은 Poster를 비롯한 다른 티스토리 블로그 신규 스킨에도 적용되는 사항이에요. 그 분위기는 스킨마다 글꼴이나 색상과 어우러져 달라질 수 있습니다.
이하부터는 Whatever 스킨 개별 수정 사항 12가지와 스킨 적용 후의 애드센스 변화에 대해 이야기드립니다.
- 블로그명 서체 크기와 색상 변경
- 블로그 포스팅 제목의 서체 크기 수정
- 블로그 포스팅 제목과 본문 사이 간격 줄이기
- 모바일에서 포스팅 제목과 본문 사이 간격 줄이기
- 블로그 상단 메뉴 사이 간격 줄이기
- Whatever 스킨에 카테고리 추가하는 방법
- 블로그 목록 더보기 글자 키우기
- 블로그 메인화면의 스킨 커버 글자 제목 크기 키우기
- 태그 글자 크기 크게, 색상은 진하게 변경
- 최근 포스트 글자 크기와 색상 변경
- 스킨에 Home 홈링크 또는 TOP 탑버튼 추가
- 포스팅 제목 위 카테고리 표시 삭제 + 구글 애드센스 액티브뷰 변화 이야기
1. 블로그명 서체 크기와 색상 변경
Whatever 스킨에서 처음에 수정한 사항은 블로그명 서체 크기와 색상입니다.
먼저 티스토리 관리자 꾸미기 메뉴에서 스킨 편집을 누르면 HTML 편집으로 들어가실 수 있습니다. 그곳에서 HTML이나 CSS를 편집하시면 되요. 스킨 수정 전에 기존 스킨의 백업은 필수입니다.
CSS 화면에서 Ctrl + F 키를 누른 후 header h1을 검색해 주세요. 보통 125열~150열 사이에서 찾으실 수 있을 거에요. header h1의 font-size를 원하는 숫자로 변경해주시면 됩니다. 예를 들어 지금보다 작게 하려면 1.0em 지금보다 크게 하려면 2.0em 이런 식으로 숫자를 변경할 수 있어요.
블로그명의 색상을 변경하는 것은 그 아래 header h1 a 부분의 color를 원하시는 색상 코드로 대체해주시면 됩니다.
2. 블로그 포스팅 제목의 서체 크기 수정
블로그 이름에 이어 포스팅 제목의 서체 크기를 수정해 주었어요. 마찬가지로 CSS 화면에서 hgroup h1 을 검색하시면 됩니다. 사전에 블로그 스킨 백업하시는 거 잊지 않으셨죠?
포스팅 제목 관련 hgroup h1은 whatever 스킨 기준으로 950열~1000열 사이에서 찾으실 수 있어요. 그 곳에서 font-size 부분의 숫자를 원하는 크기로 조정해주시면 됩니다. 제 경우는 기존 제목보다 좀 더 작게 줄여주었어요.
포스팅 제목의 색상 변경도 원하시면 color 부분에 다른 색상 코드를 넣어주시면 됩니다.
3. 블로그 포스팅 제목과 본문 사이 간격 줄이기
Whatever 스킨은 포스팅 제목 위아래 간격이 여유로운 편인데요. 이것을 줄이고 싶을 경우 CSS 편집에서 hgroup으로 검색한 후 margin과 padding 부분을 봐가면서 수정해 주시면 되요.
참고로 margin (외부 간격)이나 padding (내부 간격)의 숫자들은 시계방향으로 표시됩니다. 처음 숫자는 상, 2번째 숫자는 우, 3번째 숫자는 하, 4번째 숫자는 좌측 간격을 의미해요. 손으로 모양을 따라 그려보시면 좀더 이해가 쉬우실 거에요.
상우하좌를 한번에 표시할 때는 숫자가 하나만 있고 숫자가 두개만 있을 경우는 상하, 우좌를 묶어서 표시한 것입니다. 숫자가 세개만 있을 때는 상우하좌에서 마지막 좌측을 생략한 것이에요.
margin과 padding 개념은 HTML이나 CSS 코드를 수정할 때 기본적으로 나오는 개념이니 익혀 두시는 게 좋아요. 검색해보시면 좀 더 쉽게 설명한 관련글들이 많이 있습니다.
* 모바일 버전 줄간격은 12번 추가 내용 참조
4. 모바일에서 포스팅 제목과 본문 사이 간격 줄이기
위 3번은 PC 모니터상에서 적용되는 거에요. 모바일 화면에서 Whatever 스킨의 제목과 본문 간격을 조절하려면 또 따로 조정해줘야 됩니다.
마찬가지로 CSS 편집 화면에서 hgroup 검색 해주시면 되는데요. 모바일 관련 hgroup은 /* Media Screen - Mobile */ 화면에 속해 있습니다.
Whatever 블로그 스킨 기준으로 CSS 2600열~2650열 사이에 있을 거에요. 이곳 hgroup의 padding 부분의 숫자를 수정해 주시면 됩니다.
5. 블로그 상단 메뉴 사이 간격 줄이기
Whatever 스킨은 웹페이지 화면 상단에 메뉴가 나열됩니다. (모바일 화면의 경우 버튼을 클릭할 경우 나오는 형태이지요.)
만일 메뉴가 없을 경우 티스토리 관리자의 꾸미기로 들어가셔서 메뉴를 추가해주시면 됩니다. 참고로 카테고리 만들 듯 메뉴를 너무 많이 만드는 경우에는 두줄로 넘어가면서 모양이 예쁘지 않습니다.
이렇게 나열된 메뉴들 사이 간격을 줄여주고 싶은 경우가 있을텐데요. 메뉴 간격을 줄이는 방법은 CSS 화면에서 gnb ul li를 검색해주시면 됩니다. 그 후 padding 에서 두번째 써 있는 숫자(좌우 간격)을 봐가면서 줄여주시면 되요.
6. Whatever 스킨에 카테고리 추가하는 방법
whatever 스킨은 아쉽게도 카테고리 기능이 없어요. 저는 없는대로 쓰고 있는데요. 카테고리를 꼭 따로 추가해주고 싶다고 하시는 분은 두가지 방법이 있어요.
6-1. 하나는 직접 a href 태그로 일일이 링크를 만들어서 HTML 편집 화면 안에 넣어주시는 방법이에요. sidebar 소스 아래 적당한 곳에 붙여넣기 하시면 되요.
또는 티스토리 관리자 메뉴의 플러그인에서 배너 출력 플러그인을 사용하심으로 바꾸시면 출력이 편리해요. 플러그인 사용하기 후 관리자 화면 꾸미기 메뉴로 들어가시면 HTML 배너 출력이 생성되어 있을 거에요. 그곳에 만드신 카테고리 주소 링크를 붙여 넣으시면 됩니다.
6-2. 다른 하나는 블로그 관리자의 HTML 편집 화면에서 sidebar에 아래 코드를 넣어주시면 되요.
<s_sidebar_element>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
블로그 카테고리 생성 HTML 소스.txtPC 블로그 화면 기준으로 하단 영역이 차례대로 sidebar-1, sidebar-2, sidebar-3 입니다.
이 중 HTML 편집 화면에서 Ctrl + F로 원하는 위치(sidebar-1에서 3)를 검색해서 적당한 곳을 봐가면서 붙여 넣어주시면 되요. 사전에 스킨 백업 하시는 것 꼭 잊지 마시고요!
다만 카테고리 코드를 실제 적용 후 보시면 알겠지만 모양이 예쁘지 않아요. CSS에 따로 색상이나 링크 밑줄 제거라든지 속성을 지정해 주셔야 합니다. 저는 일이 너무 복잡해져서 그냥 상단 메뉴만 사용하고 있으니 참조하시기 바래요.
7. 블로그 목록 더보기 글자 키우기
SSL 적용 가능과 함께 나온 신규 티스토리 스킨들의 좋은 점이 바로 더보기 기능입니다. 커버 화면이나 세부 메뉴 화면에서 나열된 글들이 모두 끝나면 아래 더보기 버튼을 클릭하면 추가로 글들이 나옵니다.
이중 세부 메뉴의 목록 더보기의 글자 크기가 좀 작게 느껴져서 크기를 키웠습니다. 방법은 CSS에서 pagination 을 검색하셔서 폰트 크기를 수정해 주시면 됩니다.
목록 더보기 관련 pagination은 Whatever 스킨 기준 CSS의 1300열~1400열 사이에 있어요. 이 중 font-size를 원하시는 크기로 변경하시면 되요.
8. 블로그 메인화면의 스킨 커버 글자 제목 크기 키우기
Whatever 스킨에 커버를 적용했을 때 썸네일 하단 제목 크기를 조절할 수 있어요.
티스토리 신규 스킨의 커버 아이템은 슬라이더, 섬네일 리스트 1, 섬네일 리스트 2, 스페셜 콘텐츠, 와이드패널로 구성되어 있는데요.
CSS에서 원하는 아이템의 font-size를 찾아 수정해 주시면 되요. 스킨 커버의 섬네일 리스트2의 제목 글자를 더 크게 키우고 싶을 경우를 예로 들겠습니다.
섬네일 리스트2의 제목 크기를 변경하고 싶을 경우, CSS 편집화면에서 cover-thumbnail-list-2 h2를 검색하신 후(약 750~800열 사이) font-size의 숫자를 더 큰걸로 써주시면 된답니다.
참고로 모바일 페이지의 경우는 위 4번의 설명과 유사하게 /* Media Screen - Mobie */ 영역에 있는 cover-thumbnail-list-2 h2 부분을 수정해 주셔야해요.
9. 태그 글자 크기 크게, 색상은 진하게 변경
이번에는 포스팅 본문 하단의 태그 글자 크기와 색상을 조절하는 방법입니다. CSS 화면에서 Ctrl+F 키로 tags를 검색하시면 아래와 같은 페이지를 찾을 수 있습니다.
/* Style Important */ 부분의 tags .items a에서 font-size와 color를 각기 원하시는 크기와 색상으로 변경해 주시면 OK!
만일 본문이 아닌 더 하단, 사이드바 위치에 있는 태그들을 수정해 주고 싶으실 경우 aside .tags 부분의 내용들을 수정해 주시면 되요.
10. 최근 포스트 글자 크기와 색상 변경
사이드바는 aside 부분에서 수정 가능합니다. aside .post li a 에서 font-size로 글자 크기를, color 색상 코드를 변경해주심 되요.
11. 스킨에 Home 홈링크 또는 TOP 탑버튼 추가
블로그 방문자가 바로 나가는 경우도 있지만 좀 더 둘러보는 경우도 있습니다. 이 때 블로그 하단의 홈링크와 TOP 탑버튼은 편의성을 위해 필요합니다.
티스토리 Whatever 스킨은 홈링크와 탑버튼을 개별적으로 추가해주어야 하는데요. 제 경우 처음엔 블로그 하단에 홈링크만 추가해주었다가 이후에는 TOP 탑버튼으로 교체해주었어요.
먼저 블로그 하단에 홈링크를 넣을때는 CSS가 아닌 HTML의 footer 부분에 a href 태그로 자신의 블로그 주소를 추가해주시면 됩니다.
이 때 footer 영역의 Design by Tistory라는 티스토리 저작권 copyright 부분은 삭제 마시고 유지해주실 필요가 있어요. 참고로 블로그 하단의 Design by Tistory 부분을 클릭해보시면 # 링크가 걸려 있어 블로그 화면 탑으로 이동됩니다.
+ 탑버튼을 달고 싶으실 때는 관련 글을 검색하셔서 HTML Head에 관련 Script 또는 Body에 관련 JQuery를 넣어주시면 됩니다. 구글 검색하시면 관련 티스토리 글들이 많이 있으니 참조하시기 바래요. 제 경우에는 Body에 JQuery를 넣어주는 방식을 이용했어요.
12. 포스팅 제목 위 카테고리 표시 삭제 + 애드센스 액티브뷰 변화 이야기
드디어 마지막 수정 사항입니다. 정리하느라 생각보다 시간이 많이 걸렸네요. 이번 카테고리 제목 삭제는 애드센스 모바일 상단 광고와 연관이 있는데요.
기존 todiva님의 toPiece에서 whatever로 블로그 스킨을 교체 후 구글 애드센스의 조회가능 액티브뷰 가 Active View 반토막이 났습니다.
* 스킨 교체 전 구글 애드센스 조회가능 액티브뷰
* 스킨 교체 후 구글 애드센스 조회가능 액티브뷰
웹페이지 상단 애드센스 광고(반응형 광고_1)를 기준으로 조회가능 액티브뷰가 기존 79%에서 29%로 달라졌으니 어마무시하게 떨어졌네요. 눙물이...
구글의 조회가능 액티브뷰란 해당 화면에서 광고 모양이 50% 이상, 1초 이상 노출되는 비율을 말합니다. 당연히 이 수치는 광고 단가나 클릭률과 밀접한 관계를 가지고 있습니다.
제 경우 스킨을 교체한 이번주 초부터 액티브뷰와 더불어 광고 수익 감소가 큰 상태인데요. 이번달 좀더 지켜보고 애드센스 문제가 해결되지 않을 경우 SSL이 불완전해도 원래 스킨으로 돌아가거나, 유료 스킨으로 교체도 고려하고 있어요.
※ 현재 저희 사이트는 2019년 2월 중순 이후 유료 스킨으로 교체했습니다.
기존 티스토리 무료 스킨인 Whatever를 한달 간 사용해본 결과 애드센스 액티브뷰가 30%대에서 벗어나지 못했습니다.
이는 저희 블로그가 포스팅 당 이미지를 평균 20개 이상 사용하기 때문에 무거운 편이라 그럴 수 있습니다. 그만큼 상대적으로 광고 로딩이 느리고 애드센스 액티브뷰도 떨어지는 것이라는 판단이 들었습니다.
티스토리 Whatever 스킨을 사용할 경우 모바일 첫화면 로딩시 애드센스 광고가 일부만 노출됩니다. 특히 포스팅 제목이 길 경우 상단 광고가 더 많이 짤리는 경우가 생기는 데요.
조금이라도 액티브뷰를 높여보고자 하는 마음에 위 이미지와 같이 포스팅 카테고리 제목 영역을 삭제했습니다.
방법은 CSS가 아닌 HTML 편집화면에서 리뷰 이야기 Reviews/인터넷 금융 IT & Finance 부분을 주석으로 감싸기 처리하시거나 삭제해주시면 되요. 여러번 말씀드렸지만 스킨 수정을 하실때는 만일을 위해 이전 상태를 백업해주시기 바랍니다.
+ 추가사항
포스팅 제목 아래 선 없앰: 아래 css hgroup에서 border bottom 1px -> 0px로 조절.
포스팅 제목과 상단 광고 사이 간격 더 줄임: margin 40에서 20으로 변경
※ mobile도 따로 찾아서 margin 항목 추가해야 함
/*
.hgroup {
max-width: 1200px;
margin: 0 auto 20px;
padding: 20px 0 15px;
border-bottom: 0px solid #EAEAEA;
}
그럼 제 포스팅이 도움이 되길 바라며 이만 마무리하겠습니다!
* 티스토리 SSL 적용과 https 주소 네이버 웹마스터 도구 등록 결과
* 블로그 스킨 toPiece 메인 화면 변경 | 티스토리 티에디션으로 홈 설정 방법