먼저 티스토리 버튼을 꾸미려면 '티스토리 관리 > 콘텐츠 > 서식 > 서식쓰기' 으로 이동합니다.
서식쓰기에서 제목을 '티스토리 버튼'으로 알아보기 쉽게 작성하신 후 '화면우측상단'의 메뉴에서 '기본모드 > HTML'로 변경해 줍니다. 그리고 위 텍스트내용을 그대로 복사(Ctrl+C)한 후 화면에 붙여넣기(Ctrl+V)합니다.
붙여넣기가 끝났으면 아래의 순서대로 버튼을 원하는 모양을 꾸미시면 됩니다.
padding
padding은 버튼의 높이와 길이를 조절합니다. 'padding 15px(높이) 20px(길이)' 여기서 숫자만 변경하면 버튼의 높이와 길이를 조정할 수가 있습니다.
linear-gradient
linear-gradient 는 버튼의 색상 및 그라데이션을 조절하는 명령어입니다.
위 텍스트의 linear-gradient(45deg, #ffffff, #87CEEB, #1E90FF) 에서 'deg'의 숫자를 낮추면 앞쪽부터 그라데이션이 시작되고 숫자를 높이면 뒷쪽부터 그라데이션이 적용됩니다. 뒤에 있는 '#숫자'는 아래 색상표를 참고하시어 원하는 색상으로 넣으시면 됩니다. 저 같은 경우에는 '흰색-주황-빨강 or 흰색-연두-초록' 이런 순서대로 하면 버튼 색상이 잘 나왔습니다.
border-radius
border-radius는 버튼의 모서리를 깍을 수 있습니다. 숫자에 '0'을 기입하면 직사각형이 되고 숫자를 올릴수록 모서리를 둥그렇게 깍을 수 있습니다.
font-size
font-size는 '글자의 크기'를 조절할 수 있습니다. font-size 숫자를 크게 할수록 버튼에 나타나는 글자크기가 확대됩니다. 폰트를 조정하면 버튼의 크기도 함께 조정됩니다.
href
href는 원하는 사이트의 링크를 첨부할 수 있습니다. 이곳에 링크을 걸어둘 사이트의 맵주소를 기재하면 블로그방문자가 해당 버튼을 클릭했을 경우 해당 사이트로 이동하게 됩니다. (글 작성 후 정상적으로 링크버튼이 작동하는지 확인해 보는 것이 좋습니다. )
위 버튼_HTML텍스트는 PC화면 및 모바일화면에서 버튼이 가장 잘 보일 수 있도록 최적화하여 만들었습니다. 폰트나 패딩을 조절하시면 모바일화면에서는 버튼이 짤려 보일 수가 있습니다. 색상,모서리,사이트첨부만 편집하여 사용하시면 됩니다. 감사합니다.
-END-