티스토리 상단 메뉴바, 안보이게 하는 방법은?
티스토리 관리센터 개편, 상단 메뉴바 재등장 문제?!
어제부터 티스토리 관리센터가 개편되는 등 티스토리 관련 개편 소식에 여러가지 말들이 많이 나오고 있는데요. 개인적으로 문제점으로 지목되고 있는 내용에서 가장 공감이 가는 글 중에 러브드웹님 포스팅이 있어 링크로 먼저 소개를 할까 합니다. 어떤 내용이인지 궁금하신 분들은 아래 링크를 참고하세요 ^^> 미쳐가는 티스토리, 모바일 페이지에 실시간 이슈 강제 노출 : http://loved.pe.kr/1932
다른 문제점이나 개편 후 불편한 점 등에 대해서는 차차 저도 포스팅 등을 통해 이야기하도록 하구요. 오늘은 그 중 소소하게나마 불편하면서 버그성 문제점을 하나 언급하고자 합니다.
바로, 블로그 상단 우측에 위치하고 있는 '메뉴바' 인데요. 사실 이 메뉴바를 숨기는 설정이 티스토리 자체적으로 가능하지만... 개편 후 이 설정을 하더라도 메뉴바가 숨겨지지 않고 계속 나타나는 현상이 발생하더군요.
그래서 스킨을 꾸미거나 하는데 있어 이 메뉴바가 껄끄럽게 생각되는 분들을 위해 강제적으로 간단하게 이 메뉴바를 제거할 수 있는 방법을 소개하려고 합니다.
티스토리 상단 메뉴바 숨기는 방법!
▼ 혹시 티스토리 상단의 메뉴바가 뭘 칭하는 것인지 모르겠다는 분들을 위해 캡쳐를 했습니다. 이제 이해가 되시죠?
▼ 참고로, 저만 그런건지는 모르겠지만 티스토리 [정보수정] 메뉴에서 [블로그 메뉴바를 숨깁니다] 로 설정해 놓은 상태임에도 불구하고 메뉴바가 위 이미지처럼 표시되더군요.
혹시 차후에도 이런 유사한 문제점들을 제거하는데 도움이 되고자, 스킨 편집시 도움이 될 만한 원리부터 하여 설명을 드리도록 하겠습니다.
아마 많은 분들이 아실 듯 한데... 파이어폭스 등 확장프로그램(부가기능) 설치가 가능한 웹브라우저에 "FireBug" 를 설치하면, 접속한 웹사이트의 HTML, CSS 소스들을 살펴볼 수가 있습니다. 이렇듯 FireBug 로 특정 영역의 소스를 살펴보면 본문에서와 같이 강제로 숨기거나 하는 방법이 간단하게 가능한데요.
▼ 아래는 티스토리 메뉴바 영역을 FireBug 에서 살펴 본 장면입니다.
소스를 살펴보고 싶은 부분에 마우스 커서를 가지고 가면, 해당 영역이 하이라이트 스타일로 강조되면서 관련 태그들이 표시가 됩니다.
위 이미지를 잘 보시면 메뉴바와 관련된 태그 중 최상단에 <div id="tistorytoolbarid" ... > 가 보이시죠? 바로 이 녀석을 이용하면 됩니다.
▼ 이제 티스토리 스킨 편집 메뉴에서 Style.css 박스에 아래 내용을 추가해 주세요~
이 소스에 대해 간단하게 설명을 드리자면, 우선 영어 단어만 보셔도 쉽게 이해가 되시겠지만 display: none 은 내용을 숨긴다는 의미의 소스입니다.
그렇다면 어떤 영역의 내용을 숨길지를 지정해 줘야 하겠죠? 본문을 예로 든다면 <div id="tistorytoolbarid" ... > 에서 따옴표 안에 있는 단어(tistorytoolbarid)가 바로 이를 지정해 주는 단어입니다.
여기서 주의하실 점은 CSS 의 소스들을 살펴보면 점(.)으로 시작하는 것과 샾(#)으로 시작하는 소스가 있을텐데요. div id 태그에 대한 css 를 작성하실때는 샾(#) 을, div class 태그에 대한 css 를 작성하실 때는 점(.)을 시작으로 하여 따옴표안의 단어를 쓰고 원하는 태그로 꾸며주시면 됩니다.
▼ 위와 같은 원리로 CSS 에 소스를 추가한 후 다시 블로그에 접속을 해보니 상단의 메뉴바가 숨겨진 것을 확인할 수 있네요.
나름 쉽게 쓴다고 길게길게 풀어 쓰긴 했는데... 이해가 되셨는지 모르겠네요.
본문에서는 티스토리 메뉴바처럼 특정 영역을 숨기는 소스에 대해 설명을 드리면서 관련해서 응용할 수 있는 원리를 살짝 추가로 알려드렸는데요. 앞으로 블로그 등을 꾸미시는데 있어 도움이 되면 좋겠네요. 이 포스팅은 여기까지 입니다 ^^
