티스토리를 사용하다보면 카테고리에 숨기기 기능이 없어서 아쉬울 때가 있습니다.
저도 삭제하기는 좀 그렇고 가지고 있고 싶은데 노출되게 하기도 좀 애매한 경우가 있는데
이럴 때 예전의 싸이월드처럼 나만보기 기능이 있으면 좋을텐데 아쉽네요.
하지만, 이런 기능은 자바스크립트나 jQuery만 잘 사용하면 숨길수가 있답니다.
저는 여기서 맨 아래 2개의 카테고리를 숨겨보고 싶은데요.
그러려면 일단 '소스보기'를 통해서 카테고리 구조가 어떻게 돼 있는지 확인해야 합니다.
소스를 보니 소스의 구조가 아래와 같이 돼 있다는 걸 알 수 있네요.
<ul class="tt_category">
<li><a class="link_item" ... >카테고리1</a></li>
<li><a class="link_item" ... >카테고리2</a>
<ul class="sub_category_list">
<li><a class="link_sub_item" ...>서브카테고리21</a></li>
<li><a class="link_sub_item" ...>서브카테고리22</a></li>
<li><a class="link_sub_item" ...>서브카테고리23</a></li>
<li><a class="link_sub_item" ...>서브카테고리24</a></li>
</ul>
</li>
<li><a class="link_item" ... >카테고리3</a></li>
<li><a class="link_item" ... >카테고리4</a></li>
</ul>
여기서 제가 숨기고 싶은 카테고리는 '동영상으로 보는 일상', '사진으로 보는 일상' 2개인데요.
둘의 공통점이 자신의 a 태그에 class="link_sub_item"이 들어가 있네요.
그렇다면.... class="link_sub_item"인 것을 다 찾아서 '동영상으로 보는 일상', '사진으로 보는 일상'이라는 카테고리가 나오면 숨기는 식으로 작업을 하면 될 것 같네요.
그래서, 아래와 같이 만들어 봤습니다.
/* 화면이 모두 로드되고 나면 거의 마지막으로 실행하는 함수 */
$(document).ready(function()
{
// 숨기고자 하는 카테고리명을 따로 배열에 담는다.
var hiddenCategoryArr = ["동영상으로 보는 일상", "사진으로 보는 일상"];
// class="link_sub_item"인 것을 모두 찾아서 하나씩 확인한다.
$(".link_sub_item").each(function()
{
// 배열에 담았던 카테고리명과 비교해서 같은게 있는지 확인한다.
for( var z = 0; z < hiddenCategoryArr.length; z++ )
{
// 배열과 같은 카테고리명이 있다면...
if( $(this).html().indexOf( hiddenCategoryArr[z] ) != -1 )
{
// 부모, 즉 상위의 <li> 태그를 숨긴다.
$(this).parent().hide();
}
}
});
});
자, 위 소스를 어디에 넣으면 될까요?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
이곳에 넣으면 됩니다.
</script>
</head>
<body>~</body>
</html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
이 링크도 꼭 같이 넣어주셔야 합니다.
자, 이 소스를 넣으러 가 볼까요?
제 티스토리 스킨에서는 [환경설정]이라는 이름으로 돼 있는데 일반적으로는 [관리자] 또는 [Admin]으로 돼 있으니 클릭하셔서 관리자페이지로 들어가시면 됩니다.
메뉴에서 [HTML/CSS 편집] 클릭하시면 됩니다.
왼쪽은 화면, 오른쪽은 소스가 보이는 화면이 새창으로 뜨면 우측 소스가 보이는 곳에서 위 그림처럼 방금 그 소스를 <script>~</script> 맨 아래쪽에 넣어주시면 됩니다.
저는 주석은 다 빼고 소스만 위처럼 넣었습니다.
그리고, 우측상단에 있는 [저장] 버튼 꾹~ 눌러주시면 끝~!!!
잘 되나요?
'인터넷/컴퓨터 > 티스토리' 카테고리의 다른 글
| [티스토리] Tistory의 블로그 제목(블로그 타이틀)에 색상 넣기(꾸미기) (2) | 2018.06.28 |
|---|---|
| [티스토리] Tistory의 메뉴바(툴바) 없애기(안보이게 하기) (1) | 2016.02.26 |
| [티스토리] Tistory에서 방문현황 대신 방문그래프를 화면에 나타내는 방법 (0) | 2016.02.25 |
| [티스토리] Tistory에서 댓글 입력한 후 버튼 중복체크 막기 (2) | 2016.02.25 |
| [티스토리] Tistory 글에 Daum 지도 첨부하기 (0) | 2016.02.20 |
댓글