Tistory 메뉴에서 구분자 만들기

crocus 사이트 메뉴를 보면 붉은색 ────────── 구분자를 볼 수 있다.

 

현재 티스토리에서는 구분자를 제공해주는지 모르지만,

 

현재 crocus 블로그 스킨에는 구분자를 만들어 낼 방법이 없어 직접 script를 이용하여 구현하고자 하였다.

 

우선 아래의 코드를 이용하기 위해서는 콘텐츠 -> 카테고리 관리 에서  카테고리 추가를 통해 ---------- 를 입력하고 만들어주면

 

script에서 href가 ----------인 것을 찾아 color, cursor, user-select, margin 변경을 하고 마지막으로 href의 속성을 없애 구분자처럼 행동하도록 만들어준다.

 

그리고 마지막으로 style에서 <li> 태그에 의해 ▶같은 표시가 나타나는 것을 display:none으로 강제로 없애주어 마무리 한다.(이는 스킨마다 다르다.)

 

아래 코드는 실제로 crocus 블로그에 들어가 있는 구분자 script 코드이다.

<script>		
	$(document).ready(function () { 
		$("a[href$='----------']").css("color","#F15F5F");
		$("a[href$='----------']").css("cursor","default");
		$("a[href$='----------']").css("user-select","none");
		$("a[href$='----------']").css("margin-left","-10px");
		$("a[href$='----------']").html("──────────");
		$("a[href$='----------']").removeAttr("href");
	});
</script>
<style>
    #sidebar .category ul li ul li ul li:before {
        display: none;
    }
</style>