※ 상호 협의한 내용으로 해당 스킨은 별도 배포/판매를 진행하지 않습니다.
- 스킨 제작 및 커미션 시 본 스킨을 베이스로, 본 스킨의 디자인과 똑같이 만드는 것을 금지합니다.
- 타스킨과의 짜집기를 금지합니다. (본 ↔ 타 어느 경우든, 이는 제가 배포하는 스킨 간에도 마찬가지입니다.) 

- 반응형
- [홈 커버 9종] : 공지사항, 태그 클라우드, 디데이, 링크, 웹진, 리스트, 갤러리, 피드, 트위터 위젯
- [공지사항 1종]
- [카테고리별 목록 6종] : 웹진, 심플, 갤러리, 갤러리2, 메모, 메모2
- [본문] : 관련글, 페이징
- [본문] : 인용, 더보기, 링크, 파일 리디자인
- [본문] : 신고 버튼, 공감 버튼, 통계 버튼, 응원하기 버튼 리디자인
- 새 글 발행 알림 리디자인 (NEW 아이콘)
- 팔로우 버튼, 로그인(아웃) 버튼 리디자인 (2차 도메인 미적용)
- 댓글 | 방명록 신규 치환자 지원 및 리디자인

| 스킨 저작권 정보
제작자 : 살구(#f8b878) 
블로그 : https://mellowapricot.tistory.com
이메일 : worksapricot@gmail.com

티스토리 업데이트로 댓글 상단 네임카드가 출력됩니다.

네임카드를 숨기고 싶을 때는 

.content .tt_box_namecard { display: none !important; }

해당 코드를 CSS 제일 하단에 추가해주시면 됩니다.

스킨별 네임카드 디자인 변경은 각 스킨별 포스타입 결제분 내용을 참고 부탁드립니다.

스킨2

스킨3

스킨4

스킨5

스킨6

네임카드 디자인 미지원 스킨

- 스킨4

- 스킨6

https://notice.tistory.com/2656

#5 블로그를 조금 더 블로그처럼 사용해보는 스킨입니다. 심플하지만 다양한 기능으로 티스토리를 즐겨보세요.

스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지 

지원 부분

- 반응형
- [홈 커버 10종] : 공지사항, 태그 클라우드, 디데이, 링크, 웹진, 리스트, 갤러리, 갤러리2, 랭킹, 피드
- [공지사항 1종]
- [카테고리별 목록 6종] : 웹진, 심플, 갤러리, 갤러리2, 메모, 메모2
- [본문] : 관련글, 페이징
- [본문] : 인용, 더보기, 링크, 파일 리디자인
- [본문] : 신고 버튼, 공감 버튼, 통계 버튼, 응원하기 버튼 리디자인
- 새 글 발행 알림 리디자인 (NEW 아이콘)
- 팔로우 버튼, 로그인(아웃) 버튼 리디자인 (2차 도메인 미적용)
- 메뉴바 리디자인
- 댓글 | 방명록 신규 치환자 지원 및 리디자인

스킨 미리보기

• https://apricotdemo0002.tistory.com/ (메인)

• https://apricotdemo0002.tistory.com/11 (본문)

스킨 구매

• apricot orchard (https://posty.pe/ne9wfz)

기술 지원 제공 여부 및 방법 

• ‘스킨의 오류’는 어떤 상황이든 일어날 수 있기에 오류 관련 제보는 항시 받습니다. 

• 오류 제보 : 본 글의 댓글

• 수정 문의 : 본 글의 댓글

스킨 저작권 정보

• 제작자 : 살구(#f8b878) 

• 블로그 : https://mellowapricot.tistory.com

• 이메일 : worksapricot@gmail.com

디자인 자체를 변경하려면,

https://mellowapricot.tistory.com/234

이 글을 참고하면 된다.

티스토리 공감 버튼은 카운트가 0일 때 0으로 출력되는 게 아닌 "공감"으로 출력된다. .container_postbtn의 웬만한 텍스트는 CSS의 가상 선택자로 버무릴 수 있지만, 공감 버튼의 count 내용 변경은 스크립트가 필요하다. 

그런데 티스토리 공감 버튼은 동적으로 삽입되기 때문에, 단순히 innerHTML이나 insertAdjacentHTML()등의 메소드로는 내용 변경이 되지 않는다. MutationObserver를 사용해서 동적으로 변경되는 내용을 감지해야 한다.

function UpdateCountContent(containerPostBtn) {
	const uocCount = containerPostBtn.querySelector(".txt_like.uoc-count");

	if (uocCount && uocCount.textContent.trim() === "공감") {
		uocCount.textContent = "0"; //0이 아닌 다른 내용으로 변경하려면 따옴표 내용 변경
	}
}

function observePostBtn(containerPostBtn) {
	const config = { childList: true, subtree: true, characterData: true };
	// childList : 대상 노드의 하위 요소 추가/제거 감지, subtree : 직접적인 하위 요소 말고도 모든 하위 트리의 변화 감지, characterData : 문자 데이터 감지

	const observer = new MutationObserver((mutationsList, observerInstance) => {
		UpdateCountContent(containerPostBtn); // 감지된 변화들에 대해서 UpdateCountContent 함수를 호출
	});

	observer.observe(containerPostBtn, config); // 감지 대상 : containerPostBtn
}

function handlePostBtn() {
	const containerPostBtns = document.querySelectorAll(".container_postbtn"); 
	containerPostBtns.forEach((containerPostBtn) => {
		observePostBtn(containerPostBtn);
		//모든 container_postbtn에 대한 반복
	});
}

window.addEventListener("DOMContentLoaded", handlePostBtn); // DOM 로드 후 함수 호출

</head>위에 defer 속성 써서 외부 스크립트로 넣어도 되고 </body>위에 <script>~</script> 태그로 감싸 넣어줘도 됨

https://developer.mozilla.org/ko/docs/Web/API/MutationObserver

MutationObserver에 대한 내용은 해당 링크 참고