티스토리 moreless 더보기 (펼치기, 접기) 수정하기

글 더보기 (펼치기, 접기) 수정하기

티스토리 글쓰기 기능에 기본적으로 더보기가 있습니다. 적용하면 다음과 같이 나옵니다.

1. 아이콘 수정하기

제가 자주 사용하는 아이콘 다운로드 사이트 입니다.

https://www.iconfinder.com/

티스토리 관리자에서 HTML/CSS 편집을 클릭하고 추가를 눌러서 다운받은 아이콘을 업로드 합니다.

---

업로드한 아이콘을 우클릭해서 주소를 복사합니다. 브라우저에 따라서 다르게 나올 수 있습니다. 다르게 나오면 속성(R)을 눌러보세요.

블로그 관리 / 꾸미기 / Html/css꾸미기 / Style.css 

CTRL + F 로 moreless_fold를 검색하면 Style.css 에 나옵니다. (스킨에 따라 태그가 다릅니다.)

http://cfs.tistory.com/custom/blog/177/1770092/skin/images/1431431838_minus-square-12.png?=699377096

주소 복사하면 이렇게 나오는데 빨간색 부분까지만 복사 하세요.

Style.css

/* more / less */

.moreless_fold, .moreless_top, .moreless_bottom {

  padding-left: 25px; 

 /* text-decoration:underline; */

 font-weight:bold;

}

.moreless_fold { /* 열기 */

  background:url(http://cfs.tistory.com/custom/blog/177/1770092/skin/images/1431431820_plus-square-1281.png) no-repeat 0 0px; text-align:left; 

}

.moreless_top { /* 닫기 위 */

  background:url(http://cfs.tistory.com/custom/blog/177/1770092/skin/images/1431431838_minus-square-12.png) no-repeat left top; text-align:left;

}

.moreless_bottom { /* 닫기 아래 */

  padding-right: 25px;

  background:url(http://cfs.tistory.com/custom/blog/177/1770092/skin/images/1431431838_minus-square-12.png) no-repeat right top;

  text-align:right;

}

.moreless_content {margin:10px 0px 10px 0px; }

적용하면 다음과 같이 나옵니다.