이번엔 티스토리 블로그에 이어 워드프레스에 버튼을 추가 하는 방법을 알아보겠습니다. 티스토리도 버튼 스타일을 추가하셔야한다면 이전 포스팅을 확인해주시기 바랍니다.
2023.06.28 - [Tool] - Button Generator로 티스토리 버튼 스타일(CSS) 추가하기
Button Generator로 티스토리 버튼 스타일(CSS) 추가하기
티스토리 블로그에 버튼을 넣고 싶어서 찾아보다가 Button Generator라는 사이트를 알게 되었습니다. CSS로 간편하게 버튼을 만들어주는 사이트 인데요, 등록된 여러가지 디자인 버튼이 있어 조금만
egnmomo.tistory.com
버튼 디자인 소스는 이전 글에서 처럼 Button Generator를 이용해서 만들어보도록 하겠습니다.
CSS 버튼 스타일 만들기
사이트에 들어가서 만들고 싶은 디자인과 가장 유사한 버튼을 고르고 사이즈, 색상, 여백 등을 수정하고 Get Code 버튼을 누릅니다. 그러면 이미지의 버튼 스타일 코드인 CSS가 출력됩니다 <a> 태그 부분은 복사할 필요 없고 .myButton 줄 부터 끝까지 복사를 합니다.
CSS 버튼 스타일 테마에 추가하기
워드프레스 관리자 화면으로 들어가면 외모라는 메뉴가 있습니다. 외모 메뉴에 마우스를 올려두면 옆에 소메뉴들이 나타나는데 그 중에서 사용자 정의하기를 누릅니다.
사용자 정의하기를 누르면 위와 같이 화면이 바뀌는데 추가 CSS를 클릭해줍니다.
Button Generator에서 만든 버튼 스타일 코드를 추가 CSS 글자 아래칸에 붙여넣어 줍니다. 붙여넣은뒤 공개버튼을 꼭 눌러주셔야 버튼 스타일이 테마에 적용되니깐 꼭 잊지 말고 눌러주세요.
글쓰기 화면에서 입력부분 오른쪽에 있는 텍스트 탭에서 작성해야 버튼 태그가 적용이 되기 때문에 텍스트 탭을 눌러준후 위에 파란 박스처럼 <a class="myButton" href="버튼을 누르면 이동될 URL">버튼 TEXT</a> 넣어줍니다. 글을 발행해보면 아래와 같이 버튼 a 태그에 버튼 스타일이 적용되는 것을 확인 하실 수 있습니다.
'Tool' 카테고리의 다른 글
| Button Generator로 티스토리 버튼 스타일(CSS) 추가하기 (0) | 2023.06.28 |
|---|---|
| ChatGPT 뤼튼(Wrtn)으로 시작하기 (0) | 2023.06.18 |
