친효애드온 : 더보기 접기 텍스트 변경 및 꾸미기 (마크1)

티스토리에서 구형 글쓰기 에디터에서 제공하는 메뉴 중 에는 "더보기"와 "접기"가 있습니다. 그런데 기본 기능에 문제가 좀 있습니다. 더보기를 최초 1회 클릭하면 접기라는 글씨로 올바르게 변경이 되는데, 다시 한번 클릭하면 더보기로 돌아오지 않고 그대로 계속 접기라는 글씨로 남아 있는 버그가 있습니다. 이후에는 새로 고침을 하지 않는 한 평생 변하지 않습니다. 또한 스타일을 별도로 만들어 주지 않는 한 눈에 잘 띄지 않습니다.

이 기능을 좀 더 직관적으로 볼 수 있도록 스타일을 변경해 주는 친효애드온을 만들었습니다. 친효스킨은 기본 적용되도록 설계하였고 다른 스킨에서도 적용하도록 만들었습니다. 또한 반응형이기 때문에 가로 사이즈가 브라우저의 해상도에 맞게 자동 조정 됩니다. 방금 언급했던 글씨가 변하지 않는 버그도 수정했습니다. 스크립트를 사용하지 않고 오직 CSS로만 수정하였습니다. 때문에 설정 방법도 전혀 어렵지 않습니다.

현재 아래가 적용된 기능이 바로 이것입니다. "더 보기" 라고 나와있는 검정색 바를 눌러보시기 바랍니다.

이렇게 적용이 됩니다.

TIP

사용하시는 스킨에 따라 적용이 제대로 되지 않을 수 있습니다. 유료 스킨의 경우 제작자가 별도의 스크립트 혹은 클래스명을 사용하여 변경된 경우가 있을 수 있습니다. 친효애드온은 티스토리에서 기본으로 제공하는 클래스명을 사용하여 스타일을 구성합니다.

HTML 세팅

티스토리에서 기본적으로 제공하는 클래스명을 사용하여 구성하기 때문에 별도의 HTML 세팅은 필요가 없습니다.

CSS 세팅

먼저 아래의 첨부파일을 다운받아 주시기 바랍니다.

친효애드온 - 더보기 접기 업데이트 버전 CSS.txt

다운 받으신 메모장을 열어보시면 스타일 코드들을 살펴보실 수 있습니다. 해당 코드를 모두 복사합니다. 그리고 자신의 티스토리 스킨의 CSS에 빈 공간을 만든 다음 그대로 붙여넣기를 해주시면 됩니다. 티스토리의 관리자 화면에서 꾸미기 > 스킨편집 으로 들어가시고 오른쪽 상단에 있는 HTML 편집으로 들어가시면 됩니다.

이렇게 빈 공간을 몇 줄 만들어서 그대로 붙여넣기 해주시면 됩니다. 위의 스크린샷은 예시 입니다. 스타일 코드는 저 아래로 더 이어져 있습니다.

만약 적용이 되지 않는다면?

CSS에서 Ctrl + F를 누르셔서 .moreless_fold 그리고 .moreless_top, .moreless_bottom 을 검색하셔서 혹시 이미 해당 요소들이 사용되고 있는건 아닌지 찾습니다. 찾으셨다면 먼저 작성된 위의 요소들을 삭제하시거나 주석 처리하시면 됩니다.

잘 모르시겠다면 두번째 방법을 추천드립니다. 친효애드온에서 제공하는 스타일 코드를 수정해서 사용하는 방법입니다. 대괄호 안에는 스타일 코드들이 들어 있습니다. 모든 스타일 요소 안 쪽에 !important 를 추가해서 사용하는 방법입니다. 예를 들면 이렇게 수정해서 쓰시면 되는 것 입니다.

~~position: relative; (X)~~

~~position: relative !important; (O)~~

이렇게 !important를 대괄호 안쪽에 마크업 되어 있는 모든 스타일 요소에 위의 예시대로 붙여넣기해서 사용하는 방법이 있습니다. !important의 의미는 최우선으로 해당 요소를 강제 적용한다는 뜻 입니다.

위의 설명은 구버전용 입니다. 최신 버전으로 수정하여 첨부파일에도 업데이트 했습니다. 사용하시는 스킨의 CSS에 적용하시면 바로 사용 가능합니다.