이곳은 빈칸입니다.
가끔 다른 사람 티스토리 블로그를 방문했을 때 내 블로그에 없는 링크 버튼을 보신 적이 있으십니까? 티스토리 에디터에 없는 기능인데 어떻게 구현했는지 궁금할 때가 있습니다. 오늘은 티스토리 블로그에서 링크 버튼 만드는 방법 두 가지를 소개하겠습니다.
이미지는 블로거들 사이에서 많이 이용하는 미리 캔버스를 이용하면 쉽게 만들 수 있습니다.
알맞은 이미지만 있으면 그림으로 불러와서 URL 주소를 입력하면 버튼이 완성됩니다. 그런데 버튼은 포스팅 할때마다 텍스트를 다르게 하는 경우가 대부분입니다. 그럴 때마다 새로 만드는 것은 매우 번거로운 일입니다. 아래에 알려드릴 두 번째 방법은 서식으로 만들어 놓는 것입니다.
html과 css를 이용하는 방법이라 어렵게 생각되십니까? 이 글을 읽고 계신 분들 중 대부분이 이 용어에 대해 익숙하지 않으실 거라 생각됩니다. 제가 만든 코드를 복사하고 붙여 넣기만 하시면 됩니다. 그리고 간단히 편집하는 방법도 알려드리겠습니다.
먼저 우리가 만들게 될 버튼은 아래와 같습니다.
티스토리 블로그 버튼 만드는 방법
티스토리 에디터에 들어가서 서식으로 들어가서 위에서 만든 버튼 제목을 클릭하면 버튼이 에디터에 나타납니다. 나타난 버튼의 글자를 클릭해서 알맞은 텍스트를 삽입하시면 됩니다.
버튼 이용하는 방법
아래 링크를 확인해보시면 소제목 꾸미기도 있어요.
위에 만들어진 버튼을 기본으로 버튼의 폭을 넓게, 컬러를 자신이 원하는 것으로 수정할 수도 있습니다. 글자 크기 수정도 가능합니다. 여기서 많은 것을 설명하기는 어렵고 버튼의 폭 조절, 컬러 바꾸기, 글자크기 조정하기 세 가지에 대해서 설명드리겠습니다.
먼저 수정할 부분은 아래 표에 빨간색으로 표시된 부분입니다. 티스토리 관리자 페이지에서 서식관리로 들어가신 후 해당 서식을 클릭합니다. 그리고 html 모드로 들어가세요. 아래 알려드릴 방법으로 수정하시면 원하는 버튼을 만들 수 있습니다.
<p><button style="width: 500px; height: 50px; background-color: #58ccff; font-size: 25px; font-weight: bold; color: white; border: 0; border-radius: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; margin: auto;" type="button">테스트 링크버튼 입니다.</button> </p> <p data-ke-size="size16"> </p> |
버튼 응용하기
1. 버튼 폭 조정하기
2. 버튼 컬러 조정하기
3. 글씨 크기 조정하기
4. 예시로 만들어 보기
티스토리 링크 버튼 만드는 방법에 대해 알아봤습니다. 단순히 이미지를 만들어서 링크를 걸어주는 방법과 CSS를 이용하여 만드는 방법이 있습니다. 일회성으로 사용하는 것이면 전자를 이용하는 게 편하고 지속적으로 사용할 경우에는 후자를 이용하는 것이 편리할 것입니다.
티스토리 관련 다른 포스팅도 보세요