티스토리 꾸미기 | 북클럽 스킨 접은글[더보기] 버튼 꾸미기(최신버전)

 

 

 

접은글(더보기) 버튼 꾸미기

티스토리에서 기본 제공하는 접은글은 가독성과 미적 측면에서 부족할 수 있습니다. 또한 본문과 접은 글의 경계가 불분명한 문제가 있습니다. 따라서, 접은 글의 CSS를 수정하여 글의 가독성을 높이는 작업을 통해 더 깔끔하고 읽기 쉬운 디자인을 구현할 수 있습니다.

---

728x90

 

접은글 미리보기

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

 

접은글 CSS 추가하기

접은글(더보기) 버튼을 꾸미는 방법은 기존 CSS를 수정하는 방식이 아닌 새로운 CSS 코드를 CSS 탭에 추가하는 간단한 방식으로 진행됩니다.

 

📌 단 스킨의 버전에 따라, CSS에서 '접은글 박스'를 숨겨야 하는 경우가 발생할 수 있습니다.

 

'접은글 박스' 숨기기

1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

---

 

2) CSS 탭에서 [Ctrl]+[F] 키를 이용해 #article-view div[data-ke-type='moreLess'] {을 찾아줍니다.

📌 해당 코드가 있을 경우, 해당 코드를 숨겨야 합니다.

#article-view div[data-ke-type='moreLess'] {

---

 

3) #article-view div[data-ke-type='moreLess'] { 코드 아래와 위에 주석(/*...*/)을 추가하여 해당 코드를 숨깁니다.

4) 마지막으로 [적용]을 클릭하여 '저장'합니다.

---

 

접은글 CSS 코드 추가하기

1) 아래의 CSS 코드를 복사하여 CSS 탭의 하단에 붙여 넣어줍니다.

2) 미리 보기로 변경 사항을 확인한 후 [적용]을 클릭하여 '저장'합니다.

---

 

접은글(더보기) CSS 코드

CSS 코드 #1

마우스 오버 액션이 적용된 접은글(더보기) 버튼

/* 더보기 버튼 꾸미기 */
.btn-toggle-moreless, .btn_more, .btn_less {
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); /*버튼 배경색*/
    border: 0 solid #285bfd;
    border-radius: 9999px;
    box-shadow: rgba(37, 44, 97, .15) 0 4px 11px 0, rgba(93, 100, 148, .2) 0 1px 3px 0;
}
.btn-toggle-moreless, .btn_more, .btn_less {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 8px 24px; /*버튼 안쪽 여백*/
    border-radius: 50px; /*버튼 모서리 라운드*/
    margin-top: 5px;
    color: #fff !important; /*버튼의 더보기 글색*/
    font-size: 16px !important; /*버튼의 글크기*/
}
.btn-toggle-moreless:hover { /*버튼 마무스오버 효과가 필요 없으면 이 코드를 지워주세요*/
    background-image: linear-gradient(144deg,#00DDEB, #5B42F3 50%,#AF40FF); /*버튼 마우스오버 배경색*/
}
div[data-ke-type='moreLess'] {
    position: relative;
}
div[data-ke-type='moreLess']::before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 1px dashed #bbb; /*박스 상단 라인*/
    margin-top: 25.5px; /*라인높이*/
}
.moreless-content {
    padding: 10px 10px; /*박스 내부 여백*/
    margin: 10px 0px; /*박스 외부 여백*/
    border-radius: 10px; /*박스 모서리 라운드*/
    border-bottom: 0px dashed #bbb; /*박스 하단 라인*/
    background: #f5f5f5; /* 박스 안 배경색 */
}
.btn-toggle-moreless:before, .btn_more:before {
    content: '✚';/*버튼이 접혀있을 때 앞에 붙일 아이콘*/
    margin-right: 5px;
}
.open .btn-toggle-moreless:before, .btn_less:before {
    content: '✖'; /*버튼을 닫을 때 앞에 붙일 아이콘*/
    margin-right: 5px;
}
/* 더보기 버튼 꾸미기 끝 */

---

CSS 코드 #2

깔끔한 검은색 접은글(더보기) 버튼

/* 더보기 버튼 꾸미기 */
.btn-toggle-moreless, .btn_more, .btn_less {
    background: #000; /*버튼 배경색*/
    border-radius: 9999px;
    box-shadow: rgba(37, 44, 97, .15) 0 4px 11px 0, rgba(93, 100, 148, .2) 0 1px 3px 0;
}
.btn-toggle-moreless, .btn_more, .btn_less {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 5px 20px; /*버튼 안쪽 여백*/
    border-radius: 50px; /*버튼 모서리 라운드*/
    margin-top: 5px;
    color: #fff!important; /*버튼의 더보기 글색*/
    font-size: 14px!important; /*버튼의 글크기*/
}
div[data-ke-type='moreLess'] {
    position:relative;
}
div[data-ke-type='moreLess']::before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 1px dashed #ddd; /*박스 상단 라인*/
    margin-top: 22.5px; /*라인 높이*/
}
.moreless-content {
    padding: 15px 5px; /*박스 내부 여백*/
    border-bottom: 1px dashed #ddd; /*박스 하단 라인*/
}
.btn-toggle-moreless:before, .btn_more:before {
    content: '✚';/*버튼이 접혀있을 때 앞에 붙일 아이콘*/
    margin-right: 5px;
}
.open .btn-toggle-moreless:before, .btn_less:before {
    content: '✖'; /*버튼을 닫을 때 앞에 붙일 아이콘*/
    margin-right: 5px;
}
/* 더보기 버튼 꾸미기 끝 */

---

728x90

 

마무리

이렇게 간단하게 '접기(더보기) 버튼'을 만들어 보았습니다.

제가 만든 버튼과 다른 스타일을 원하시면, 수정이 가능한 부분에 주석을 달아 두었으니 필요에 따라 수정해 보세요.

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"