티스토리 접은글 꾸미기

접은글

티스토리의 접은글 문구를 바꾸고 싶은데 못바꾸시는 분들 많을것으로 생각됩니다.

 

CSS 코드만으로 접은글에 들어갈 문구를 바꿀 수 있습니다.

 

원리를 보면 기존 글자는 배경색으로 만들어서 안보이게 만들고(또는 font-size:0과 같이 만들고 :before 기능을 이용해서 글자를 넣는 방법입니다.)

div[data-ke-type='moreLess'] a.btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] a.btn-toggle-moreless{
	color:transparent; /*또는 font-size:0*/
}
div[data-ke-type="moreLess"].open>a.btn-toggle-moreless:before {
    content: 'x'; /* 닫기 대신 쓸 문구 */
    color: #909090; /*또는 font-size:16px (원래 크기)*/
}
div[data-ke-type="moreLess"]>a.btn-toggle-moreless:before {
    content: '★'; /* 더보기 대신 쓸 문구 */
    color: #909090; /*또는 font-size:16px (원래 크기)*/
}

 

color:transparent 인 경우가 좀 더 여러 사용자가 쓰기 좋을것 같아서 예로 들었고요.

(글자크기는 다양하지만, 배경이 단색인 블로그가 많기 때문에)

 

 

예를들어 아래와 같은 코드를 적용가능합니다.

이 블로그에는 이미 다른방식으로 적용되어있어 적용하진 않았습니다.

div[data-ke-type='moreLess'] a.btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] a.btn-toggle-moreless{
	color:transparent;
}
div[data-ke-type="moreLess"].open>a.btn-toggle-moreless:before {
    content: '\e911\20\c228\ae30\ae30';
		font-family:'xeicon';
    color: #909090;
}
div[data-ke-type="moreLess"]>a.btn-toggle-moreless:before {
    content: '\e910\20\d3bc\ce58\ae30';
		font-family:'xeicon';
    color: #909090;
}

 

영문 + 숫자를 제외한 문자는 유니코드 인코딩을 해주셔야됩니다. (참고)

 

아래의 툴을 이용해서 변환가능합니다. (평문탭에 입력후 유니코드탭으로)

https://t.hi098123.com/codec

인코딩 / 디코딩