워드프레스에서 1분만에 CSS버튼 만들기

워드프레스는 자유로운 작업환경을 통해 다양한 꾸미기 작업이 가능한데요. 오늘은 워드프레스를 이용해 CSS버튼을 꾸미는 방법에 대해 알아보려고 합니다. CSS를 잘 모르더라도, 쉽게 할 수 있습니다.

1. CSS버튼만들기

가장 먼저해야 할일은 버튼을 만드는 거에요. 난 이미지 작업을 할 줄 모르는데? 라고 생각하지 않으셔도 됩니다. 버튼 제너레이터라는 사이트에서는 무료로 버튼을 만들어주기 때문이죠. 아래 버튼을 누르시면 버튼제너레이터 사이트로 이동하게 됩니다. 클릭을 꺼려 하는 분들이 많으신데, 검색 사이트에 ‘버튼 제너레이터’라고 쓰고 들어가도 됩니다.

버튼제너레이터

2. CSS코드 복사

사이트 첫 화면을 보면 뭔가 굉장히 복잡해 보이지만, 실제로는 간단합니다. 좌측에 다양한 종류의 버튼이 보이는데, 이 중에서 마음에 드는 버튼을 고르시면 됩니다. 여러분의 워드프레스에 사용하게 될 버튼 이미지입니다.

버튼을 선택한 이후에는 세부적으로 버튼이나 글자의 크기와 모양, 색상 등을 결정하고 박스나 글자의 그림자 영역 설정도 가능합니다. 우측에 위치한 여러 종류의 바(bar)를 움직여 보시면 화면 가운데 버튼의 모양이 자동으로 변하기 때문에 쉽게 모양을 만들 수 있습니다. 이렇게 모양을 다 만들고 난 다음에는 best button generator 밑에 있는 ‘get code’를 클릭합니다.

get code를 클릭하면 무슨 말인지도 알 수 없는 여러가지 영문 글자들이 나옵니다. 여러분들이 정한 버튼 이미지를 코드로 만들어주는 것인데요. 일일이 알 필요는 없는 것 같습니다. 첫째 줄을 제외하고 아랫부분을 모두 복사해서 워드프레스 외모> 사용자 정의하기> CSS추가하기로 들어가서 내용을 붙여넣기 하면 80%가 끝이납니다.

3. HTML에서 가져다 쓰기

이제 할 일은 가져다 쓰면 됩니다. 코드의 맨 첫번째 문장 <a href=~~~> 부분을 복사한 후 여러분들이 사용하는 에디터 화면으로 가져옵니다. 워드프레스 콘텐츠를 만드는 에디터 화면에서 html로 편집하기를 누른 후에 첫번째 문장을 넣어주면 됩니다. 여기서 해야 할 일은 첫번째 쌍따옴표 안에는 버튼을 누르면 이동하게 될 웹페이지 주소를 넣어주면 됩니다. https://naver.com 이런 식으로요. 그리고 두번째로 “my button”> 뒷부분에는 버튼에 들어갈 이름을 넣어주면 됩니다. 예를 들어서 <a href=”https://www.naver.com” class=”myButton”> 네이버로 이동하기</a> 이런 식으로 고쳐주면 버튼이 완성이 됩니다. 임시저장하기를 누른 후 미리보기를 해 보시면 버튼이 완성된 것을 확인할 수 있습니다.

네이버로 이동하기

4. 번외로

번외로 워드프레스와 관련한 내용들을 정리해서 담을 예정입니다. 관심있는 분들의 많은 관심을 부탁드리겠습니다.

WP 글자크기 변경