티스토리 글자에 링크 넣었을때 버튼 만들기(초간단)

티스토리 글자에 링크 넣었을때 버튼 만들기

티스토리 글자에 링크 넣었을때 버튼 만들기😊

1️⃣ 티스토리 버튼 만들기, 왜 필요할까?

티스토리 블로그에서 본문에 링크를 삽입할 때 단순히 글자로만 표시하면 독자의 시선을 끌기 어렵습니다. 링크를 버튼 형태로 만들면 클릭률이 높아지고, 시각적 효과로 콘텐츠 가독성도 좋아지게 됩니다.

2️⃣ 티스토리 버튼 만들기 CSS 코드(본문 링크만 적용)

 

 

아래 코드를 티스토리의 [꾸미기 > 스킨편집 > CSS]에 추가하면 본문 내 모든 링크가 버튼 형태로 바뀌게 됩니다.

<style>
.contents_style a:not(#toc-ym a) {
  display: inline-block;
  background-color: #cceeff;
  color: #333 !important;
  padding: 6px 12px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.contents_style a:not(#toc-ym a):hover {
  background-color: #e2ccff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
</style>

 

티스토리 버튼 만들기 CSS 코드(본문 링크만 적용) 다운로드

티스토리 버튼 만들기 CSS 코드(본문 링크만 적용).txt

0.00MB

 

3️⃣ 자동 목차 링크 버튼 스타일 제외 방법

 

 

자동 목차 링크는 버튼으로 보이면 안되기 때문에 다음 코드를 함께 추가해주세요.

<style>
#toc-ym a {
  display: inline !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #337ab7 !important;
  font-weight: normal !important;
}

#toc-ym a:hover {
  background-color: transparent !important;
  color: #333333 !important;
  box-shadow: none !important;
}
</style>

 

자동 목차 링크 버튼 스타일 제외 방법 다운로드

자동 목차 링크 버튼 스타일 제외 방법.txt

0.00MB

 

📌 자주 묻는 질문(FAQ)

Q1. 버튼 색상이나 모양을 바꾸고 싶어요.

버튼의 background-color, border-radius, padding 등을 수정하여 원하는 스타일로 변경할 수 있습니다.

 

Q2. 특정 링크에만 버튼 스타일을 적용하고 싶어요.

특정 링크에 클래스를 추가하고 CSS에서 클래스만 스타일을 적용하세요. 예를 들어, 링크에 class="btn"을 추가하고 CSS에 .btn {스타일코드}로 적용하면 됩니다.

 

 

Q3. CSS가 적용되지 않아요!

브라우저 캐시를 삭제하거나, 티스토리 CSS 편집기에 코드를 정확히 추가했는지 다시 확인해보세요. 일반적으로 Ctrl+F5로 강력 새로고침하면 해결됩니다.

🌟 마치며

지금까지 '티스토리 버튼 만들기'를 위한 CSS 적용 방법을 알아봤습니다. 이 작은 변화로 블로그 방문자의 클릭률과 체류 시간이 올라가는 효과를 경험해보세요!

 

🔗 대한민국 정부 포털 바로가기