티스토리 - 긴글쓰기(접기/펼치기) 디자인하기

<목차로 돌아가기>

접기 펼치기 사용후기

접기 펼치기 기능을 사용한 순간 접기, 펼치기 옵션을 보고

오 진짜 좋은기능인데? 라고 생각하며 사용해 보았다.

하지만..

뭐지? 나는 분명히 펼치기에 더보기를 입력했는데 이런 영혼없는 디자인은?

충격과 공포에 우쩔가? 생각하다가 자바스크립트와 CSS를 사용한 접기 펼치기 기능을 사용해 봤으나. Tistory 기능 때문인지 ... 글쓰고 저장하는 순간 이상하게 꼬여버렸다 ㅜ^ㅜ 

그렇다면? 결론은.... 접기 펼치기 기능을 고쳐야 한다는 것.

플로그인을 살펴보고  HTML/CSS를 뚫어지게 쳐다보다가 빙빙도는 코드때문에 난감해 하다가.

꾸미기 -> Html/css 편집 ->파일 업로드하기를 살펴본 순간 실마리가 풀리게 되었다 ^-^

iconMore과 

iconLess에 영혼없는 디자인을 보고 촉이 와서 이것을 검색하여 고치기 시작했다.

다른 블로그를 코딩을 시작하였고 마음에 드는 코딩을 드디어 완성했다 ㅠ_ㅠ...

뭔가 더 영혼없는 디자인이 된것 같지만 그래도 more view보다는 낫다는 생각에 나름 만족하며 이만 접는다. 

더 하실분은 스스로 연구하시길 ㅋ_ㅋ 나중에 꾸미고 싶은 생각이 생기면 글을 더 추가하겠습니다.

접기 펼치기 소스

결과는 아래와 같습니다.

아래의 소스를 분석하시면 충분히 다른 디자인으로 바꿀 수 있을거라 믿습니다.

(귀찮은거 절대아님 믿어줘요)

적용방법

블로그 관리 -> 꾸미기 -> Html/css꾸미기 -> 파일업로드하기 클릭후 iconMore, iconLess 를 삭제합니다.

그리고 아래의 압축을 다운받아서 파일목록에 추가합니다.

접기펼치기아이콘.zip

블로그 관리 -> 꾸미기 -> Html/css꾸미기->Style.css로 들어가신후

Ctrl + F를 누르신뒤 'more / ' 을 검색하신뒤 아래의 소스를 덮어 씌웁니다.

※ Style.css를 선택한 뒤 Ctrl + A(전체선택)를 누르고 메모장에 복사한뒤 작업하는것을 추천합니다. 실수해서 날라가면... 블로그 망가집니다.

/* 본문 - more / less */

.moreless_fold, .moreless_top, .moreless_bottom {

padding-left:18px;

text-decoration:underline; 

text-weight:800;

}

.moreless_fold { /* 열기 */

background:url(images/iconMore.gif) no-repeat left ; 

}

.moreless_top { /* 닫기 위 */

background:url(images/iconLess2.gif) no-repeat left ; 

}

.moreless_bottom { /* 닫기 아래 */

background:url(images/iconLess2.gif) no-repeat right ; 

padding-right:18px; 

text-align:right;

}

이제 저장하면 끝! ^^ 

즐거운 블로깅되세요~