티스토리 링크 버튼 만들기 왜 안 돼?

티스토리 블로그 운영하기가 만만치 않다. 배우고 또 배워도 배워야 할 게 남아있다. 오늘은 오래전부터 별러왔던 버튼 만들기를 시도해 보았다. 일종의 바로가기 버튼인데 방문자를 다른 링크로 안내할 때 쓰면 유용할 것 같았다. 나 같은 경우는 작품 리뷰를 자주 하고 있어서 ~보러 가기 용으로 쓰면 딱이었다. 그래서 인터넷에 티스토리 버튼 만들기를 검색하며 열심히 따라하기 시작했다.

내가 만들고자 한 버튼

 

하지만 내가 얻은 버튼

 

 

제대로 적용하기 전에는 링크가 적용된 텍스트 상태로 보이는 게 맞다는 정보를 얻었다. 하지만 아무리 해도 아래 이미지(내가 얻은 버튼)에서 위 이미지(내가 만들고자 한 버튼)로 바뀌지 않았다. 지난번에 쓴 웹툰 리뷰에 직접 적용을 해봐도 마찬가지였다. 이를 해결하기 위해 관련문서를 거의 한 시간 동안 뒤져야 했다.

 

---

티스토리 버튼 제대로 만들기

우선 티스토리 버튼을 사용하려면 버튼 디자인부터 해야 한다. 버튼 제너레이터라는 사이트에서 다양한 버튼을 디자인할 수 있다.

 

버튼 제너레이터 바로가기

 

사이트에 들어가면 위 이미지와 같은 화면이 뜬다. 좌측에 있는 이미지를 클릭하여 자신이 원하는 디자인을 만든다. 우측 바를 조절하면 버튼의 각진 정도라든지, 텍스트의 그림자 등을 세밀하게 조절할 수 있다.

 

원하는 디자인을 만들었다면 Get Code를 눌러서 코드를 생성한다.

 

 

우측 조절바가 있던 영역에 코드가 나타난다. 위의 첫 줄(html)과 아래 영역(css)를 따로 써줘야 한다.

 

① .mybutton 이후의 부분을 드래그 복사한다.

→ 티스토리 블로그 관리 → 스킨 편집 → html 편집 → CSS → 맨 마지막에 붙여 넣기

컬러 옆에 사각형 색깔이 보여야 한다. 나는 저게 생성이 안 되어 계속 실패했다.

 

 

② 코드의 맨 윗줄(html)을 복사한다.

→ 티스토리 블로그 관리 → 콘텐츠 영역 →서식 관리 → 서식 쓰기 →html 모드로 변경 후 붙여 넣기

 

중앙에 위치시키려고 <center>넣어줬다. 제목 쓴 뒤 저장하면 서식 만들어 진 것.

 

 

---

티스토리 버튼 적용하기

여기까지 했다면 모든 준비는 끝났다. 글을 쓸 때 링크를 넣어 적용하면 된다.

 

#부분에 주소가 들어가고 grey(만든 사람에 따라 다를 것) 부분에 버튼 이름을 넣어주면 된다.

 

점 세 개→ 서식 → 방금 만든 버튼 열기 → 링크 버튼 눌러서 주소 쓰고 제목 변경.

 

제목 변경 안 되면 html모드로 들어가서 grey 수정해 준다. (이게 맞는지는 모르겠는데 되니까 그냥 한다)

 

앞서 말했듯 글쓰기 모드에서는 버튼이 링크로만 표시된다.

 

 

(좌)서식은 한 번 만들어두면 편하게 사용할 수 있다. (우) 글쓰기 보드에서는 버튼이 링크로만 표시된다

 

 

---

버튼 적용이 안 될 때

잘 따라 했는데도 원하는 버튼이 생성되지 않는다면 제일 먼저 확인해야 할 것은 CSS코드가 제대로 삽입되었는지를 확인하는 일이다.

 

위의 설명 중에도 언급한 적이 있든 색상 코드 옆에 네모난 색상 표기가 되어야 한다. 근데 나는 그게 없었다.

 

뭐가 잘못된 건지를 몰라서 한참 화면을 바라보다가 이놈의 Html 뭐시기는 마무리가 중요하다는 걸 기억해 냈다. 명령<>을 하면 반드시 닫힘 명령</>이 있어야 한다.

 

혹시나 하는 마음에 내가 넣은 코드 위에 } 를 써줬다. 뭐가 어떻게 생겨먹었는지는 몰라도 CSS 맨 마지막 줄이 }였다는 걸 기억하고 있었고, 내가 삽입한 코드 마지막도 }로 끝나기에 그냥 그게 마무리 명령인가 보다 했다.

 

그리고 그걸 넣은 순간 문제의 색상칸이 생겼다. 글자색 바꾸고 별 난리를 치다가 CSS백업도 안 했는데 내 블로그 날아가냐고 울뻔했던 내가 너무 초라하게 느껴졌다.

 

버튼은 나타났는데 폰트에 파란색 밑줄이 계속 그어져 있었다. 거슬려서 찾아보다가! important라는 중요한 열쇠를 발견했다.

 

 

 

CSS 코드 중간에

text-decoration:none; 를 찾아서 none과 ; 사이에 ! important를 삽입한다.

이러면 링크 텍스트가 일반 텍스트로 바뀐다.

 

가만 보니 색상도 계속 파란색이어서

color 색상코드 옆에도 같은 방식으로 !important를 넣어준다. 그러니 본래 내가 설정했던 색상이 그대로 나왔다.

 

드디어 버튼을 완성해서 여기저기 써보고 있는 중.

 

에휴. 컴알못은 티스토리가 정말 어렵고 힘들다.

 

 

남도희의 문구생활 보러가기

 

남도희의 웹툰 리뷰 보러가기