티스토리 메뉴바 + 구독 버튼 CSS 위치 조절
애드센스 자동광고 중 하나인 앵커 광고 때문에 티스토리 구독 버튼의 위치를 오른쪽 하단으로 설정했을 경우 보이지 않게 됩니다. 그렇다면 방법은 두 개입니다. 첫번째는 앵커 광고를 늘 상단으로 나오도록 조절하는 것과 마지막 두번째는 구독 버튼의 위치를 위로 올리는 것이죠. 우선 첫번째 방법은 그리 바람직하지 않습니다. 구글의 자동광고 알고리즘이 스킨의 스타일에 따라, 또한 방문자가 어떤 페이지에 오래 머무는지를 분석해 최적의 위치에 애드센스를 송출하기 때문입니다. 그러므로 저는 두번째 방법을 사용하겠습니다. (광고 위치 바꾸는것도 귀찮기도 하구요)
티스토리 메뉴바 + 구독하기 버튼이란?
티스토리에서의 구독 버튼은 두 가지 종류가 있습니다. 첫번째는 본문 글 하단 왼쪽에 하트 모양 옆에 위치해 있습니다. 티스토리 본계정 주인이 로그인을 한 이후에는 보이지 않습니다. 본인이 본인 티스토리를 구독할 필요가 없으니까요. 로그아웃 상태이거나 타인이 볼 때만 구독 버튼이 존재합니다.
나머지 하나는 티스토리의 레이아웃 상에서 존재하는 형태입니다. 위의 스크린샷이 그것입니다. 구독버튼과 메뉴바 버튼이 둘 다 나란히 위치해 있습니다. 왼쪽 버튼이 구독하기 버튼이고 오른쪽의 T라고 표시된 아이콘은 메뉴바라는 버튼입니다. 이 둘의 위치를 변경할 것입니다. 애드센스 앵커 광고에 가려지지 않도록 말입니다.
이 두 버튼의 기본 위치 설정은?
티스토리 관리자 화면에서 구독버튼과 메뉴바 버튼에 대한 대략적인 위치를 정할 수 있습니다.
티스토리 관리자 > 꾸미기 > 메뉴바/구독 설정에 들어가면 각 버튼의 위치를 변경할 수 있습니다. 버튼 위치는 오른쪽 상/중/하단, 그리고 왼쪽 하단 이렇게 4가지입니다.
가운데는 문제가 없으나 상/하단이 문제입니다. 앵커 광고가 상/하단으로 나타나기 때문입니다. 하지만 지금까지 확인된 바로는 데스크탑 해상도로 친효스킨을 사용중인 제 티스토리에 접속했을때 앵커 광고가 상단에 토글된적은 단 한번도 없었습니다. 모두 하단에서 나타났지요. 따라서 지금은 하단에 대한 버튼 위치 설정만 진행할 것입니다. 위의 스크린샷 이미지가 수정 완료 후의 모습입니다. 하단에 앵커 광고가 나타나도 버튼이 보이고 있습니다. 그러면 어떻게 설정하는것인지 알아봅시다.
CSS 세팅
먼저 버튼이 어떤 CSS로 인해 영향을 받고 있는지 파악하기 위해 크롬 개발자툴을 사용합니다. 보아하니 toolbar_rb라는 클래스명으로부터 위치값을 받고 있는 듯 합니다. 그렇기에 해당 클래스명에 bottom 값만 강제 적용시켜주면 위로 솟구칠 수 있을겁니다.
보시는 것처럼 bottom을 별도로 추가했고 값을 늘리고 줄이니까 버튼도 값에 따라 위치가 실시간 변화하는 모습입니다. 따라서 해당 클래스명을 사용해 CSS만 세팅해주면 될 것 같습니다. 아래의 첨부파일에 CSS 코드를 작성해 두었으니 다운로드 받으시면 됩니다.
이 코드를 현재 사용중인 스킨의 CSS에 빈 공간을 만들고 붙여넣기 하시면 됩니다. 코드 위치는 상관 없습니다. 친효스킨 뿐만 아니라 티스토리의 모든 스킨에 적용됩니다.
세부 내용
첨부파일을 열어보면 다음의 CSS 코드가 들어있다는것을 확인할 수 있습니다.
/* 티스토리 메인화면 구독 버튼 */
.toolbar_rb,
.toolbar_lb {
bottom: 150px !important;
}클래스명은 두 가지가 들어있을겁니다. 하나는 rb고 다른 하나는 lb입니다. 보아하니 rb는 Right Bottom의 약자인 것 같고 lb는 Left Bottom의 약자인 것 같아요. 따라서 .toolbar_rb 클래스명은 오른쪽 하단에 대한 위치를 정의하고 .toolbar_lb는 왼쪽 하단에 대한 위치를 정의합니다. 즉 위의 CSS 코드는 이 두 위치를 동시에 제어하도록 되어있는 것입니다. 만약 각 위치를 따로 만들고 싶다면 서로 분리시켜주면 됩니다.
/* 티스토리 메인화면 구독 버튼 */
.toolbar_rb {
bottom: 150px !important;
}
.toolbar_lb {
bottom: 150px !important;
}이런 식으로요. 이렇게 마크업하면 각각 따로 위치 설정이 가능해집니다. 끝.
