티스토리 모바일 페이지, 실시간이슈 제거 방법

티스토리 개편, 모바일 페이지에 추가된 '실시간이슈'

 얼마전 티스토리(Tistory) 관리센터 개편 소식을 전하면서 티스토리 상단 메뉴바, 안보이게 하는 방법은? 이라는 포스팅을 통해 개편 후 문제시되고 있는 부분들에 대해 살짝 이야기를 했었던거 기억하시나요?  특히, 개인적으로 아쉬운 부분이라고 이야기하면서 공감되는 내용을 링크로 걸어두기도 했는데요.
 사실, 모바일 페이지의 경우는 HTML/CSS 편집이 일반적인 웹페이지 환경에서처럼 통괄적으로 적용되게 설정을 하는 것이 어렵다는 단점이 있습니다.

 예를 들어, 모바일 페이지에 강제적으로 표시되고 있는 '실시간 이슈' 화면 같은 경우가 바로 그러한데요. 일반적인 웹페이지 환경이라면 블로그의 HTML/CSS 편집을 통해 간편하게 전체적으로 이 화면이 보이지 않게 설정하는 것이 가능한 반면 모바일 페이지의 경우는 작성하는 포스팅마다 사용자가 직접 소스를 추가해 줘야 하는 불편함이 있습니다.

모바일 페이지 '실시간 이슈' 제거하려면?

 그런데, 문제는 블로그를 운영하는 블로거 입장에서도 이런 추가가 달갑지는 않지만 요즘처럼 스마트폰 등이 대중화되면서 모바일을 통해 인터넷을 즐기는 방문자들에게도 이런 강제적인 추가는 달갑지 않을 뿐만 아니라 짜증을 유발하기까지 한다는 점입니다. 저 같은 경우에는 근래에 발행한 포스팅들을 모바일을 통해 살펴보시면 아시겠지만, 이런 항목이 추가되는 것이 싫어서 발행하는 포스팅마다 이를 제거하는 소스를 추가하고 있는데요.

 스마트폰으로 제 블로그를 방문해 보시고는 이런 부분이 궁금하셨는지 트위터 DM 으로 질문한 분이 계셔서 간단하게나마 그 방법을 소개할까 합니다.
 사실, 질문을 하신 분의 경우에는 어떻게 실시간 이슈를 제거할 때 확인해야 하는 <Div id="..."> 을 파악할 수 있냐는 것이었는데... 티스토리 상단 메뉴바, 안보이게 하는 방법은? 포스팅에서 파이어폭스(Firefox)의 FireBug 부가기능을 이용해서 HTML/CSS 를 편집하는 원리를 알려드렸었죠? 질문하신 분의 경우는 너무 어렵게 생각하신 것 같더군요 ^^;;

▼ 웹브라우저에서 블로그 주소 제일 마지막에 m 을 추가해 주시면 모바일 페이지로 접속할 수 있는데요.

▼ 이렇게 모바일 페이지에 접속한 뒤 FireBug 등과 같은 확장프로그램(부가기능)을 실행하면 이에 적용된 소스도 확인할 수 있습니다.

 이런 원리를 통해 '실시간 이슈' 의 경우 <div id="searchRankArea" ... > 소스로 이루어져 있음을 확인할 수 있었습니다.

 그런데, 앞서 이렇듯 모바일 페이지의 소스는 일반적인 블로그 설정화면에서의 HTML/CSS 편집을 통해 제거하거나 하는 것이 어렵다고 언급했었죠?

▼ 모바일 페이지의 소스를 편집하는데에는 이런 불편함이 있지만 각 포스팅마다 간단하게 소스를 추가하는 방법은 '서식' 을 이용하시면 됩니다.

 글쓰기에서 [서식] 항목을 체크하신 뒤 우측 상단의 [HTML] 항목도 체크해 주세요. 그리고는 아래 내용을 입력하신 뒤 저장하시면 됩니다.

 [티스토리 모바일 페이지, 실시간 이슈 제거]

<style>#searchRankArea{width:0; height:0px; display:none !important;}</style>

▼ 이렇게 적용한 서식은 글쓰기를 할 때 보면 우측 사이드 메뉴쪽에 표시가 되는데요.

 글을 쓰시면서 이 실시간 이슈 제거와 관련된 서식을 클릭하셔서 불러오시면, 해당 글을 모바일 페이지에서 볼 때 실시간 이슈 화면이 표시되지 않는 것 입니다.

 티스토리측에서 이런 항목에 대해 사용자가 추가 여부를 설정할 수 있는 기능을 제공해 주면 가장 좋겠지만, 우선은 이렇듯 매번 글을 쓸 때마다 서식을 불러와서 소스를 추가해줘야하는 불편함을 감수해야 할 듯 하네요.
 블로그를 방문하는 분들을 위하거나 자신의 블로그 모바일 페이지에 불필요한 항목들이 추가되는 것이 싫은 분들은 위와 같은 원리를 통해 '실시간 이슈' 와 같은 항목들을 제거해 보세요.