티스토리 스킨 상단 버튼 없애기(by fastboot)

명절 잘보내셨나요? 오래만에 포스팅을 하려니 노는게 버릇이 되어 적응이 안되네요. 역시 습관은 무서운것 같습니다. 매일 하던 포스팅을 내려놓고 푹 쉬다가 다시 하려니 노는것에 습관이 물들었나봅니다ㅠ

 

애드센스관련 포스팅을 준비하려다가 문득 눈에 띄는 문제점이 보여서 포스팅을 하게 되었네요. 제가 사용하고 있는 스킨이 fastboot 스킨인데, 커스텀을 하기 참 좋은것 같습니다. 이것저것 바꾸면서 자기만의 스킨으로 꾸미기가 너무 재밌네요.

 

오늘 포스팅은 티스토리 스킨 상단 버튼을 없애는 방법에 대해서 알려드리겠습니다. fastboot 뿐만 아니라 다른 모든 스킨에도 해당이 되는 부분이라 알아두시면 도움디 될듯 합니다.

 

 

 

2017/09/26 - [블로그/수익노하우] - 애드센스 사이트확인 하셨나요?

2017/09/25 - [블로그/운영노하우] - 구글 상위 노출을 위한 블로그포스팅

2017/09/21 - [블로그/수익노하우] - 티스토리 상단 애드센스광고 2개 배치하기

2017/09/04 - [블로그/꾸미기노하우] - 티스토리 fastboot 스킨 상단 이미지 변경방법

2017/08/29 - [블로그/꾸미기노하우] - 티스토리 본문 너비 줄여보기

 

 

 

티스토리 스킨 상단 버튼 없애기

 

 

우선, 필수적으로 익스나 파이어폭스의 HTML 구조 분석을 해주셔야 합니다. 관련 포스팅은 아래와 같습니다.

 

2017/09/20 - [IT정보/환경설정] - 익스플로러 개발자도구 사용법 안내(F12 이용)

2017/05/03 - [IT정보/HTML/CSS] - CSS 스타일 분석 파이어버그 사용하기

 

 

이러한 분석툴은 홈페이지의 구조및 CSS배치를 확인할 수 있기에 스킨수정에는 꼭 필요하니 꼭 익혀두셔서 잘 써먹으시면 좋습니다.

 

그럼, 제 티스토리 블로그 구조를 분석해보겠습니다.

 

 

 

사건의 발단이 위의 화면 입니다. 명절이 끝나고 블로그를 살펴보는데, 모바일 웹사이트가 아닌 티스토리 앱으로 살펴보다가 오래만에 제 블로그를 사파리로 접속을 하였는데요. 위와 같이 패스트부트 스킨 상단에 버튼이 너무 많이 생기는 겁니다.

 

 

 

 

수정이나, 트랙백, 발행 비공개등은 거의 사용을 하지 않아서 이걸 없애볼까? 하는 생각이 들어서 이렇게 포스팅을 하게 되었네요.

 

 

 

 

스킨구조를 확인하였습니다. 위와 같이 포스트관리 메뉴와 아래쪽 사용자들만 보이는 영역으로 나뉘어져 있었습니다.

 

 

 

 

로그인을 안한 상태에서는 이것 밖에 보이지 않습니다. 여기서 유심히 봐주셔야 할 부분은 태그안의 style="display:inline" 이라는 부분인데요. 해석을 하자면, 이건 꼭 보여주겠다 라는 뜻으로서 <div id="test" > 라는 태그가 있고, CSS를 통해서 안보이게 설정이 되어 있더라도 위의 요소만 추가를 해주면 강제적으로 보이게 할 수 있습니다. 반대로 무조건 안보이게 할수도 있습니다.

 

태그안의 CSS 스타일 요소는 가장 우선시 적용이 되기 때문에 CSS 의 영향을 받지 않기 때문입니다. 그래서 보여줄것, 안보여줄것을 골라서 위의 속성을 응용한다면, 골라서 보여줄 수가 있습니다.

 

보여주고 싶으면 style="display:inline"  안보여주고 싶으면 style="display:hidden" 을 넣어주시면 됩니다.

 

 

 

 

 

다시 관리자 메뉴의 속성을 확인하겠습니다. 수정이나, 트랙백등을 구성하는 태그는 보이는데, 제가 말씀드린 style="display:inline"  이런 부분이 보이지 않는걸 보실 수 있으실겁니다. 이러한 부분이 CSS를 통해서 관리를 하는 부분이며, 이렇게 관리를 하여야 추후 관리가 편합니다.

 

하지만, 전문적으로 유지보수 및 개발을 하지는 않기 때문에 저희들은 태그에 직접 수정을 해도 상관이 없겠죠. 제가쓰는 fastboot의 경우 label 이라는 클래스명은 무조건 안보이게 CSS에서 설정이 되어 있고, 따라서 보여주고 싶은게 있으면, style="display:inline" 을 붙여서 보여주게 만드는 방법을 취하고 있습니다.

 

 

 

이런식으로 직접 삽입을 해주시면 해당 버튼은 사라지게 됩니다. 버튼 뿐만 아니라 모든 DIV태그에 영향을 주기 때문에 보여주고 싶은것과 아닌것을 제어를 할 수가 있습니다.

 

 

 

 

 

열심히 포스팅하고 깨달은점이 한가지 생겼습니다. 관리자 페이지에서 덕지덕지 나오는걸 없애 보려고 포스팅을 하였는데, 정작 방문하시는 분들께는 저러한 버튼이 하나도 보이지 않아서 굳이 없앨 필요는 없었다는 점입니다.ㅠㅠ