더보기/닫기(Button) 글씨 색 바꾸기
.btn-toggle-moreless {
color: #d32f2f !important; /* 진한 빨간색 예시 */
font-weight: bold;
cursor: pointer;
}
.btn-toggle-moreless:hover {
text-decoration: underline;
}
접은글 안에 글씨 색 바꾸기
.moreless-content {
color: #444 !important; /* 전체 글씨 색 변경 */
}
.moreless-content h2,
.moreless-content h3 {
color: #1a73e8 !important; /* 제목 색상 */
}
.moreless-content li {
color: #333 !important; /* 리스트 항목 색상 */
}Class
| 선택자 | 설명 | 추천 색상 |
| .moreless-content | 접힌글 내부 전체 | #444, #555 등 중간톤 |
| .moreless-content h2, h3 | 제목 강조 | #1a73e8, #0066cc |
| .moreless-content li | 리스트 내용 | #333, #444 |
목적 색상 코드 예시
| 목적 | 색상 코드 | 예시 |
| 강조 (빨강) | #d32f2f | 🔴 강조 |
| 강조 (파랑) | #1976d2 | 🔵 자연스러운 링크 색상 |
| 세련된 회색 | #555555 | ⚫ 깔끔한 기본 |
| 포인트 보라 | #7e57c2 | 🟣 포인트 강조 |
티스토리 스킨 자체 편집 HTML / CSS
티스토리 스킨편집 > HTML / CSS
더보기
코드 적용 후 결과
ㅇㅇㅇ
<HTML>
티스토리에서 <더보기> 버튼을 사용할 때, 사용자가 보기 전에 버튼 이름을 "더보기" 대신 글 내용의 제목으로 자동으로 바꾸고 싶었던 적 있으신가요?
예를 들어 아래와 같이 작성한 HTML에서:
<div data-ke-type="moreLess">
<a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p><b>GPT 소개</b></p>
<p>OpenAI의 GPT는 자연어를 이해하고...</p>
</div>
</div>👉 이때 <더보기>를 자동으로 📌 GPT 소개 로 바꾸고 싶다면, 아래의 JavaScript를 추가하면 됩니다.
✅ 스크립트 코드
- 접은글 처음 내용 제목으로 설정(= 글시 굵게 해야 적용되게 설정)
<script>
window.addEventListener("load", function () {
setTimeout(function () {
document.querySelectorAll("[data-ke-type='moreLess']").forEach(function (container) {
const btn = container.querySelector(".btn-toggle-moreless");
const content = container.querySelector(".moreless-content");
const firstBold = content.querySelector("b"); // 첫 제목 굵게 조정해야 적용되게끔
const titleText = firstBold ? firstBold.textContent.trim() : "더보기";
btn.textContent = `📌 ${titleText} Click`;
btn.addEventListener("click", function (e) {
e.preventDefault();
const isHidden = content.style.display === "none" || content.style.display === "";
content.style.display = isHidden ? "block" : "none";
btn.textContent = isHidden ? "🔽 닫기" : `📌 ${titleText}`;
});
content.style.display = "none";
});
}, 300); // 페이지 렌더링 후 약간의 딜레이로 실행
});
</script>더보기
문제발생 해결
<초기 코드>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("[data-ke-type='moreLess']").forEach(function (container) {
const btn = container.querySelector(".btn-toggle-moreless");
const content = container.querySelector(".moreless-content");
const firstBold = content.querySelector("b");
const titleText = firstBold ? firstBold.textContent.trim() : "더보기";
btn.textContent = `📌 ${titleText}`;
btn.addEventListener("click", function (e) {
e.preventDefault();
const isHidden = content.style.display === "none" || content.style.display === "";
content.style.display = isHidden ? "block" : "none";
btn.textContent = isHidden ? "🔽 닫기" : `📌 ${titleText}`;
});
// 기본은 숨김
content.style.display = "none";
});
});
</script>
❌ 문제 원인
- 티스토리는 <더보기> 영역을 클라이언트 렌더링 이후에 동적으로 구성하기 때문에,
DOMContentLoaded 시점에는 <b> 요소가 아직 DOM에 존재하지 않습니다. - 즉, 너무 일찍 실행돼서 querySelector("b")가 작동하지 않는 것.
✅ 해결 방법: 완전 작동 스크립트
window.load + setTimeout 조합으로 실행 타이밍을 살짝 뒤로 밀어줍니다.
<CSS>
.btn-toggle-moreless {
color: #d32f2f !important;
font-weight: bold;
cursor: pointer;
}
.btn-toggle-moreless:hover {
text-decoration: underline;
}티스토리 스킨이 스타일을 덮어쓰기 때문에 !important는 꼭 붙여주세요.
<해당 코드로 인한 페이지 로딩 오류 해결>
https://cord-ai.tistory.com/208
티스토리 접은글 #2
접은글(더보기) 제목 자동 설정 + 로딩 지연 문제 해결 방법블로그 글을 접는 구조에서, 더보기 버튼에 자동으로 제목을 붙이고 싶을 때 아래 스크립트를 사용합니다.❗️문제 요약setTimeout(..., 30
cord-ai.tistory.com
'그냥 해봤는데' 카테고리의 다른 글
| 🎨티스토리 사이드바 카테고리 디자인 개선 (0) | 2025.05.28 |
|---|---|
| 티스토리 사이드바 상단에 프로필 이미지 넣는 방법 (0) | 2025.05.24 |
| 티스토리 접은글(⏰로딩 지연 문제) #2 (0) | 2025.05.19 |
| 구글 스프레드시트(Excel)에서 Sheet 간 2단 드롭다운 (0) | 2025.05.18 |
| 기술 블로그, 결국은 '프롬프트 싸움'이었다 (0) | 2025.05.09 |
댓글