티스토리 버튼을 쉽게 만드는 방법 - 워드프레스 정보꾸러미

티스토리에서는 서식을 이용하여 HTML/CSS로 버튼을 만든 다음, 글을 작성할 때 서식에서 버튼을 불러와서 편집할 수 있습니다. 제 티스토리 블로그에서는 이 방법을 이용하고 있습니다. 하지만 서식을 이용하여 버튼을 추가할 때 버튼 레이아웃이 깨진다고 호소하는 사용자들이 계십니다. 특히 버튼을 복사하여 붙여넣기 하면 CSS 클래스가 사라지면서 버튼 스타일이 엉망이 됩니다.

보다 간단한 방법으로 [버튼 이름|링크 텍스트|링크 URL] 형식으로 버튼을 추가하는 방법을 소개해드리겠습니다.

티스토리 버튼을 쉽게 만들어 삽입하는 방법

워드프레스에서는 블록 에디터를 사용하여 쉽게 버튼을 만들고, CSS 클래스를 지정하여 버튼 스타일을 입맛에 맞게 꾸밀 수 있습니다. 워드프레스 버튼 만들기에 대한 자세한 내용은 다음 글을 참고해보세요.

💡워드프레스 버튼 만들기

티스토리에서는 HTML/CSS를 사용하여 버튼을 만들어서 서식으로 저장한 다음, 서식에서 버튼을 불러올 수 있습니다.

보다 간단히 버튼을 만드는 방법으로 다음과 같은 형식으로 입력하면 해당 스타일의 버튼이 표시되도록 하는 것을 고려할 수 있습니다.

[버튼1|링크 텍스트|URL]

[버튼2|링크 텍스트|URL]

최종적으로 다음과 같은 버튼이 표시되는 방법을 살펴보겠습니다. 색상 등 스타일은 자유롭게 커스텀할 수 있습니다.

1 티스토리에 로그인한 다음, 꾸미기 » 스킨 편집을 클릭하여 스킨 편집 화면을 표시합니다. html 편집 버튼을 클릭합니다.

2 HTML 탭에서 하단으로 스크롤한 다음 </body> 바로 위에 다음 자바스크립트(JavaScript) 코드를 입력합니다.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
	const paragraphs = document.querySelectorAll('p');

	paragraphs.forEach(paragraph => {
		const button1Regex = /\[버튼1\|([^\|]+)\|([^\]]+)\]/;
		const button2Regex = /\[버튼2\|([^\|]+)\|([^\]]+)\]/;

		if (button1Matches = paragraph.innerHTML.match(button1Regex)) {
			const linkText = button1Matches[1];
			const url = button1Matches[2];
			paragraph.innerHTML = `<a class="myButton1" title="바로가기" href="${url}">${linkText}</a>`;
		} else if (button2Matches = paragraph.innerHTML.match(button2Regex)) {
			const linkText = button2Matches[1];
			const url = button2Matches[2];
			paragraph.innerHTML = `<a class="myButton2" title="바로가기" href="${url}">${linkText}</a>`;
		}
	});
});
</script>

코드를 입력한 후에 상단의 적용 버튼을 클릭하여 수정 사항을 적용합니다.

새 탭에서 링크가 표시되도록 하려면 <a class="myButton2"...>의 적당한 곳에 target="_blank"를 추가하면 됩니다.

그림으로 살펴보면 다음과 같이 추가하면 됩니다.

3 상단의 CSS 탭을 클릭하고 맨 아래에 다음과 같은 CSS 코드를 입력합니다.

/* 버튼 */
/* 레드 색상 계열 버튼 */
.myButton1 {
	display: inline-block;
	background: linear-gradient(135deg, #ff8a80 0%, #e57373 100%);
	background-color: #ff8a80;
	border: none;
	line-height: 1.5;
	color: white !important;
	text-align: center;
	font-size: 22px;
	width: 100%;
	padding: 20px 0;
	border-radius: 30px;
	transition: all 0.4s ease;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.myButton1 {
		font-size: 16px;
		padding: 15px 0;
		width: 90%;
	}
}

.myButton1:hover {
	background: linear-gradient(135deg, #e57373 0%, #ff8a80 100%);
	background-color: #e57373;
	color: #ffffff !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 블루 색상 계열 버튼 */
.myButton2 {
	display: inline-block;
	background: linear-gradient(135deg, #68bfe6 0%, #4fa3cf 100%);
	background-color: #68bfe6;
	border: none;
	line-height: 1.5;
	color: white !important;
	text-align: center;
	font-size: 22px;
	width: 100%;
	padding: 20px 0;
	border-radius: 30px;
	transition: all 0.4s ease;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.myButton2 {
		font-size: 16px;
		padding: 15px 0;
		width: 90%;
	}
}

.myButton2:hover {
	background: linear-gradient(135deg, #4fa3cf 0%, #68bfe6 100%);
	background-color: #4fa3cf;
	color: #ffffff !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

CSS 탭은 HTML 탭 바로 오른쪽에 위치해 있습니다.