티스토리 링크버튼 쉽게 만들기(feat. CSS)

이번 포스팅에서는 티스토리에서 사용할 링크버튼 만드는 방법에 대해서 공유하려고 합니다.

 

 

 

CSS를 이용한 링크 버튼 쉽게 만들기

링크 버튼은 단순히 다른 참고 사이트를 연결하는 용도로 이용하기도 하지만 시선을 확 끄는 용도로도 사용이 가능합니다.

링크 버튼을 만들기 위해서는 html코드를 통한 작업이 필요하지만 초보자들에게는 쉽지가 않습니다. 그래서 우리는 간편하게 버튼을 만들어주는 사이트를 이용할 예정입니다.

 

심플한 링크버튼에서부터 시선을 확 잡아끄는 포인트를 준 링크버튼까지 다양한 디자인의 버튼을 손쉽게 만들 수 있습니다. 본인이 원하는 버튼을 만들어서 티스토리 사이트의 스킨편집을 이용해서 CSS코드만 추가하면 바로 적용이 가능합니다.

 

링크 버튼 만들기

1. 디자인 사이트 방문

여기에서는 초보자도 그나마 쉽게 접근이 가능한 Button Generator라는 사이트를 이용해서 버튼을 만들어보겠습니다.

 

Button Generator 바로가기

 

사이트에 들어가면 아래와 같은 화면을 볼 수 있습니다.

왼쪽에 버튼 스타일이 있고 오른쪽에 좀 더 세부적으로 조정이 가능한 조절바가 있습니다. 왼쪽에서 원하는 버튼을 선택하고 오른쪽에서 세부적으로 조절하면 그 결과를 화면 가운데에서 바로 확인할 수 있습니다.

 

2. 버튼 스타일 제작하기

세부적으로 조절이 가능한 항목은 Text, Size, Border, Box shadow, Text Shadow 가 있습니다.

2-1. Text

글자 색상과 크기, 폰트를 조절할 수 있습니다.

2-2. Size

버튼의 크기를 조절할 수 있습니다.

2-3. Border

테두리모양과 크기를 조절할 수 있습니다. 테두리를 좀 더 둥글게 하고 싶다면 "Border Radius"로 조절하시면 됩니다.

2-4. Box Shadow

버튼에 그림자효과를 줄 수 있습니다.

2-5. Text Shadow

글자에 그림자효과를 줄 수 있습니다.

 

3. CSS코드 복사하기

모든 조절이 끝나면 결과 화면 밑에 있는 "Get Code"버튼을 누릅니다.

오른쪽에 code가 생성되어 보입니다.

여기에서 주의할 점은 빨갛게 친 부분만 복사하셔야 됩니다. 우리는 이것을 css로 복사할 예정입니다.

맨 위의 한 줄은 사실 본문의 원하는 위치에 html로 넣는 부분입니다( <a href="#" class="mybutton">버튼 만들기</a> ). 하지만 우리 초보자들은 html를 편집하는 것은 번거롭기 때문에 저것도 쉽게 넣을 수 있는 방법을 따로 설명드립니다. 일단 빨간 부분만 마우스로 드래그해서 Ctrl+c로 복사합니다.

 

티스토리에 링크버튼을 CSS로 저장하기

1. 스킨 편집으로 이동하기

티스토리 관리페이지로 이동하여 왼쪽 메뉴에서 "스킨 편집"을 선택한 후 "html편집"을 클릭합니다.

2. CSS편집모드로 들어가기

HTML, CSS, 파일업로드에서 "CSS"를 클릭합니다.

 

3. 해당 코드 붙여놓기

맨 밑으로 내려 가서 좀 전에 복사한 코드를 Ctrl+v 로 붙여놓습니다. 그리고 "적용"버튼을 클릭합니다.

 

자, 여기까지 하면 나만의 링크버튼 하나를 티스토리 스킨에 등록한 것입니다. 위에 있던 한 줄의 코드를

 

<a href="#" class="mybutton">버튼 만들기</a>

 

복사해서 html편집 모드에서원하는 위치에 복사하면 해당 버튼이 출력됩니다. 버튼의 글자를 변경하고 싶으면 코드에 있는 "버튼 만들기"라는 글자를 원하는 문구로 변경하시면 됩니다. 하지만 위에서도 말씀드렸듯이 이건 좀 불편한 방식이라 우리는 서식으로 저장해서 언제든지 불러오는 방식으로 할 것입니다.

 

링크버튼 불러오기를 티스토리 서식으로 저장하기

1. 서식모드로 들어가기

티스토리 관리페이지로 이동하여 왼쪽메뉴에서 "서식관리"를 선택 후 오른쪽의 "서식쓰기"를 클릭합니다.

2. 서식 만들기

제목을 입력하시고(여기에서는 "링크 버튼") 기본모드를 "HTML"로 변경합니다.

아래와 같이 내용을 입력합니다. 여기에서 "링크 버튼입니다" 부분은 그냥 원하는 문구로 작성하시면 됩니다.

입력 후 아래 "완료"버튼을 클릭하면 됩니다

 

3. 서식 추가 확인하기

저장이 되면 아래와 같이 서식이 하나 추가된 것을 확인할 수 있습니다. 이렇게 서식으로 저장해 놓으면 본인이 원하는 위치에서 불려 올 수가 있습니다.

 

저장된 서식 불러오기

1. 서식 불러오기

불러오기는 위쪽 메뉴에 있는 점 세 개짜리를 클릭한 후 "서식"을 선택하면 됩니다.

2. 서식 선택하기

서식 선택창이 뜨면 원하는 서식을 선택합니다.

3. 서식 확인하기

그러면 아래와 같이 추가가 되는데 편집모드에서는 저렇게 보이지만 미리 보기를 하면 해당 버튼을 볼 수 있습니다. "링크 버튼입니다"라는 문구를 원하는 대로 수정하시면 됩니다(예. 네이버 바로가기)

4. 링크 걸기

마지막으로 링크버튼에 이동하기를 원하는 사이트의 링크를 걸어주시면 됩니다. "링크 버튼입니다" 를 클릭하면 위의 링크 부분이 활성화됩니다. 그 부분을 클릭해서 "#" 을 사이트주소로 변경하면 됩니다(예. www.naver.com)