티스토리 더보기 아이콘 변경하기

티스토리 더보기 (moreless) 기능

 

 

아무리 좋은 정보라 할지라도, 글의 내용이 너무 길거나, 딱딱하면 대충 보거나 나가버리는 경우가 있습니다.

 

포스팅을 하실 때 여러 방법으로 정보를 전하고자 하시겠지만 너무 과하면 마이너스 효과를 가져올 수도 있습니다. 이때에 사용할 수 있는 기능이 더보기 (moreless) 기능 입니다.

 

아래 예시로, 손가락 모양을 클릭하시면 더보기 기능이 활성화 됩니다.

 

 

더보기 아이콘이 손가락 모양인데, 본래의 아이콘은 아닙니다. 스킨마다 사용되는 더보기 (moreless) 아이콘이 다르지만, 본인이 원하는 아이콘으로 변경을 하시면 사용이 가능합니다.

 

더보기 (moreless) 아이콘 다운로드

 

더보기 (moreless) 아이콘을 변경하기 위해서는 먼저 변경될 아이콘의 이미지가 필요합니다.

 

이미지의 사이즈는 16x16 이 적당하며, 파일 형식은 PNG,JPG, GIF 등 사용가능합니다.

 

[무료 아이콘 이미지 다운로드 1] - 검색하실때 영문으로 검색하시기를 바랍니다.

[무료 아이콘 이미지 다운로드 2] - 여기도 괜찮아요.

 

더보기 (moreless) 아이콘 변경하기 1

 

변경할 아이콘을 다운 받으셨다면,  티스토리 관리자에서 HTML/CSS 편집을 클릭합니다.

파일업로드를 선택하시고, 추가 버튼을 누르셔서, 다운받은 아이콘을 추가시킵니다.

 

 


 

업로드 된 파일을 선택하시고 마우스 우클릭 / 속성 항목을 선택합니다.

 

 


 

빨간 네모 박스 안에 파란색으로 드래그 된 부분 까지만 복사합니다.

PNG 파일로 올리셨으면 PNG까지 / JPG 파일로 올리셨으면 JPG까지

 

주소 복사는 총 2번을 하시면 됩니다.

 

열기문구가 되는 더보기와 닫기 문구가 되는 접기 아이콘을 가져오시면 됩니다. 개인이의 경우 더보기와 접기 모두 하나의 아이콘으로 했기 때문에, 주소는 한번만 복사하면 되었습니다.

 

 

더보기 (moreless) 아이콘 변경하기 2

 

티스토리 관리자에서 HTML/CSS 편집 / HTML/CSS 항목을 선택합니다

.

Ctrl + F(찾기) 하신 후 moreless 항목을 검색합니다.

 

검색을 하시면 style.css 항목에서 찾게 됩니다. 총 3 부분으로 나누어서 아이콘을 변경해야 합니다.

 

 

1. 빨간 네모 박스 부분 (fold span)더보기 아이콘입니다.

파란색으로 드래그 된 부분에 더보기 아이콘의 주소를 복사해서 바꾸어 주시면 됩니다.


 

2. 빨간 네모 박스 부분( top span)접기 아이콘입니다.

파란색으로 드래그 된 부분에 접기 아이콘의 주소를 복사해서 바꾸어 주시면 됩니다.

 

 


 

3. 빨간 네모 박스 부분( bottom span)접기 아이콘입니다.

파란색으로 드래그 된 부분에 접기 아이콘의 주소를 복사해서 바꾸어 주시면 됩니다.

 

이제 끝입니다.

 

더보기 (moreless) 아이콘 확인

 

 


Designed by CMSFactory.NET