티스토리 글 본문 내용 숨김 펼침 만들기 방법

티스토리 글 작성 중 내용 숨김 펼침 버튼 생성 방법

숨길 내용 열기 닫기 클릭 버튼

숨기는 내용. 사진도 숨겨집니다.

html에서 <div>와 </div> 사이에 글/사진이 들어가 있으면 숨겨집니다.

(수정하여 사용하세요)

 

글 작성 중에는 내용이 숨겨지지 않고 보여집니다.

미리보기 또는 글 작성을 완료하면 숨기려 한 내용이 숨겨진 상태가 됩니다. 버튼 클릭시 숨겨진 내용이 펼쳐집니다.

 

아래의 내용을 복사하여 html모드로 변경 후 내용을 숨길 부분에 붙여 넣습니다.

<summary>와 </summary> 사이의 내용이 버튼이 되고, <div>와 </div> 사이에 들어가는 내용이 숨겨집니다.

<details><summary>숨길 내용 열기 닫기 클릭 버튼</summary>
<div>
<p data-ke-size="size16">숨기는 내용. 사진도 숨겨집니다. (수정하여 사용하세요)</p>
<p>

</p>
</div></details>

 

내용 숨김 버튼 색깔 지정 방법

관리 - 스킨 편집 - CSS 로 들어가서 header, footer, section, article, 로 시작하는 곳을 찾아주세요.

그 한 줄을 지우고 아래의 코드를 붙여 넣어주세요. details를 지우고 그 아래에서 따로 details에 대한 특성을 설정해 준 것입니다.

background와 border에 있는 #으로 시작하는 색깔은 제가 좋아하는 색으로 지정했어요. 원하시는 색으로 선택해주시면 됩니다.

/*내용 숨김 펼침 시작*/

header, footer, section, article, aside, nav, hgroup, menu, figure, figcaption {

  display: block;

}

summary{

  background: #fce272;

  font-size: 20px;

  font-weight: bold;

}

details{

  display: block;

  border: 1px solid #fce272;

  cursor: pointer;

}

/*내용 숨김 펼침 끝*/

 

혐오일 수 있는 사진이나 꿀팁 등을 적는 데 활용하기 좋습니다.