고수분들은 이미 쓰고 있겠지만 어느 정도 티스토리에 글을 작성하다 보면 사진만 넣기에는 너무 밋밋하다고 느끼실 때가 올 거예요. 그리고 다른 블로그를 보면 아래와 같은 링크 버튼을 사용하는 분들을 볼 수 있게 됩니다.
나도 넣고 싶은데 그럼 넣으면 되죠. 쉽게 설명해 드리겠습니다. 따라만 오세요.
티스토리 꾸미기 버튼 만드는 방법
아래 사진 보이시나요? 앞으로 자주 이용하는 곳이에요. 톱니바퀴 모양을 누르시면 아래 블로그 관리 홈 아래에 보시면 꾸미기 란이 보일 겁니다.
1. 이곳에 스킨 편집을 눌러주세요.
2. 화면이 바뀌고 오른쪽 상단에 아래와 같은 화면이 보일 거예요. "HTML 편집" 눌러주세요. 누르면 아래와 같은 경고창 아닌 경고문이 뜨는데 아무 문제없으니 그냥 확인 누르시면 됩니다.
html 및 CSS 편집으로 인해 발생하는 문제는 직접 수정하셔야 합니다. 계속 진행하시겠습니까?
3. 확인을 누르면 분할된 화면에 오른쪽만 아래와 같이 변하게 되는데요. 빨간색으로 된 CSS 누르면 저와 같은 화면이 나올 거예요. CSS라는 곳인데 앞으로 자주 오는 곳이니 익숙해지시면 됩니다.
4, 이제 위에 보면 1번부터 3000번대 까지 있는데요. 스크롤을 아래로 끝까지 내려주세요. 그리고 아래 코드를 붙어 넣기 하시면 됩니다.
위 버튼 만들기 코드를 누르시면 메모장이 하나 만들어질 건데요. 그걸 전체 복사하기 해서 CSS 창 끝에 붙여 넣기 하는 거예요.
5. 맨 아래로 내리면 3142번이 저는 끝인데요. 사람마다 다를 수가 있으니 참고하시고요.
코드 붙여 넣기 하니 위와 같은 화면이 되셨나요? 그럼 맨 위에 검은색으로 "적용"이 있는데 그걸 꼭 눌러 주셔야 적용이 됩니다. 항상 잊지 마세요.
이제 여기서 할 작업은 다 끝났습니다. 스킨 편집창을 닫아 주셔도 됩니다.
그리고 다시 톱니바퀴 모양을 눌러서 블로그관리 홈으로 와주세요.
6. 바로 밑에 서식 관리 보이시나요? 서식 관리는 앞으로 자주 쓰거나 쓸 거 같은 내용을 직접 만들어서 쉽게 불러올 수 있는 곳이에요. 서식 관리 눌러주세요.
7. 서식관리를 누르고 오른쪽 상단에 서식 쓰기를 눌러주세요. 그러면 글쓰기 창이 나오게 됩니다. 서식 글쓰기 창이라고 생각하세요.
8. 아래와 같이 제목과 내용에 저랑 똑같이 적으셔도 되고 앞으로 본인이 사용할 거니 제목은 생각하셔서 적으셔도 됩니다. 내용은 HTML로 넘어가면 왜 "ㅁㄴ" 적었는지 알 수 있을 거예요. 제목과 내용을 적으셨다면 이제 상단에 기본모드를 누리고 HTML을 눌러주세요.
9. HTML 누르면 아래와 같이 검은색 화면이 보일 거예요. 그리고 코드가 보이고 하얀색으로 "ㅁㄴ" 보이시죠? 아무거나 적은 건데요. 없으면 붙여 넣기 하기 힘드니 아무거나 적은 겁니다. 앞으로 자주 사용하실 거예요.
이제 위에서와 같이 아래 코드를 붙여 넣기 하면 됩니다.
이것도 누리면 메모장이 나올 거예요. 눌러서 한 줄짜리 코드 복사하고 ㅁㄴ바로 앞에 붙여 넣어주세요.
10. 붙여 넣게 하면 아래와 같이 나오는 걸 볼 수 있을 거예요. 그럼 이제 ㅁㄴ을 지워주시고 오른쪽 아래 완료 버튼을 누르면 버튼 만들기도 이제 끝입니다.
11. 이제 글 하나 써볼게요. 버튼이 잘 만들어졌는지 볼까요? 글쓰기 창을 하나 만들었어요. 그럼 오른쪽 상단에 점 3개를 누르면 서식이 나오게 됩니다. 눌러주세요.
12. 서식을 누르면 아래 버튼 보이시죠? 직접 만든 버튼입니다. 앞으로 이렇게 하나씩 만들어 가시면 되는 거예요.
13. 버튼을 누르면 글 쓰는 곳에 아래와 같이 버튼 클릭하세요!라고 보이실 거예요. 우리 눈에는 이렇게 보이지만 글을 발행하면 위 버튼과 같이 보일 거예요. 아니면 지금 왼쪽 아래에 미리 보기 누르시면 파란색으로 된 버튼이 보일 겁니다. 끝이에요!! ^^
14. 이제 마지막인데요. 난 파란색이 싫어 그러면 코드를 바뀌어 주면 되는데요. 정말 쉽습니다. 좀 전에 CSS에 붙여 넣었던 거 기억나시죠? 아래 코드인데요. 이걸 보면 아래 배경색과 글자색 버튼크기 등이 있는데요. 배경색을 바꾸어 주면 됩니다.
. click-me-button {
display: inline-block;
background-color: #101E4A; /* 배경색 */
border: none;
color: white! important; /* 글자색 */
text-align: center;
font-size: 16px;
padding: 15px 20px; /* 버튼 크기 */
border-radius: 10px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: bold;
text-decoration: none; /* 링크 밑줄 제거 */
}
. click-me-button:hover {
background-color: #FFDD4A; /* 마우스 호버시 배경색 */
color: #101E4A !important; /* 마우스 호버시 텍스트 색상 변경 */
font-weight: bold;
}
RGB 색이라고 이곳에 가셔서 원하는 색을 동그라미를 옮기시면 아래 영어와 숫자로 된 RGB코드가 나올 거예요. 그럼 복사해서 저 주황색으로 된 코드에 대신 붙여 넣기 하면 됩니다.
저도 약간 빨간색으로 바꾸었어요. #FA5773 이 코드로요.
background-color: #FA5773;
하나씩 하나씩 티스토리 꾸며봅시다.