워드프레스 블로그 링크 버튼 만들기: CSS, HTML블록을 활용해 쉽게 만들기

링크 버튼은 블로그의 디자인을 더욱 깔끔하고 사용자들이 더 쉽게 글을 공유할 수 있도록 도와줍니다. 이를 위해 CSS와 블록을 이용하여 편하게 만들 수 있습니다.

▶️ 목차 (Table of Contents) 보이기

버튼 만들기 전 필요한 것들

워드프레스 블로그 링크 버튼 만들기: CSS, HTML블록을 활용해 쉽게 만들기

버튼의 디자인을 결정하는 CSS 스타일 코드
버튼에 적용될 텍스트
버튼이 클릭되었을 때 이동할 링크 주소

CSS 스타일 코드 적용하기

먼저, CSS 스타일 코드를 이용하여 버튼의 디자인을 결정합니다. 아래 코드는 예시 중 하나입니다.

/* 버튼  */
.button {
  display: inline-flex
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background-color:#18c1c7;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 1em;
  padding: 1em 2em;
  width: auto;
  transition: all 0.5s;
  cursor: pointer;
  margin: 20px;
}
 
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
 
.button:hover span {
  padding-right: 25px;
}
 
.button:hover span:after {
  opacity: 1;
  right: 0;
}

위 코드는 색상, 폰트 크기, 패딩, 너비 등의 속성을 정할 수 있습니다. 이렇게 CSS 스타일 코드를 작성하면 버튼의 디자인이 결정됩니다.

다음으로 위 코드를 복사하여 워드프레스 > 외모 > 사용자 정의하기 > 추가CSS 편집기에 붙여넣기하면 됩니다.

버튼 코드 작성하기

버튼 코드를 작성할 때는 앞서 작성한 CSS 코드를 적용하면 됩니다. 아래는 예시 코드입니다.

<p style="text-align: center;"><a href="[링크 주소]" class="button"><span>[버튼에 적용될 텍스트]</span></a>

[참사랑:D 홈으로]

위 코드에서 [링크 주소]에는 버튼을 클릭했을 때 이동할 링크 주소를 입력하고, [버튼에 적용될 텍스트]에는 버튼에 적용될 텍스트를 입력합니다.

버튼 삽입하기

글을 작성하다 버튼을 넣고 싶은 블록을 선택 합니다.

블록에서 /html을 입력하여 사용자정의 HTML을 작성합니다. 그러고 위에서 작성한 버튼 코드를 복사하여 붙여넣기 합니다.

다음으로 [링크 주소]와 [버튼에 적용될 텍스트]를 각각 링크 주소와 버튼에 적용할 텍스트로 수정하면 버튼이 완성됩니다.

위와 같이 블로그에서 링크 버튼을 만드는 방법은 CSS와 사용자정의 HTML을 이용하여 버튼 디자인을 결정하고, 작성한 코드를 복사하여 블로그에 삽입하면 됩니다. 링크 버튼을 적절하게 사용하면 사용자들이 블로그의 글을 더 쉽게 공유할 수 있습니다.

재활용가능한 블록 생성으로 버튼 만들기

이제 포스팅 할때마다 버튼 생성을 편하게 하려면 재활용 가능한 블록을 만들어 놓고 사용하면 됩니다.

사용자 정의 HTML로 작성한 코드를 클릭하고 옵션에서 (더보기)를 눌러 재활용 가능한 블록 생성을 선택합니다.

재활용 가능한 블록 생성을 클릭하고 이름을 버튼1 이렇게 아무렇게나 정해줍니다. 이제 버튼을 넣을때는 /버튼1(위에서 정해준 이름) 을 누릅니다.

재활용가능한 블록으로 만든 버튼 사용시 주의점!!

재활용 가능한 블록을 이용할 경우 /버튼1으로 만든 버튼의 내용을 수정하면 예전에 사용한 버튼도 모두 똑같이 수정됩니다. 따라서 재사용 가능한 블록으로 불러온 후 일반 블록으로 변환을 선택하고 수정하면 일반 블록으로 전환한 블록(버튼)만 변경할 수 있습니다.

CSS 코드 만들기: 웹사이트 활용

링크 버튼을 만들기 위해 CSS 코드를 직접 작성하는 것은 많은 사람들에게 어려운 일입니다. 본인이 원하는 형태의 버튼을 만들기 위해서는 Button Generator 같은 온라인 도구를 사용하면 디자인 및 스타일 옵션을 쉽게 조정하고, 클릭 한 번으로 CSS 코드를 생성할 수 있으므로 매우 편리합니다.

사이트에 접속한 후, 먼저 원하는 버튼 디자인을 선택합니다. 그런 다음 버튼의 크기, 색상, 그림자, 폰트 등을 선택하여 적용할 수 있습니다. 이러한 옵션을 사용하여 버튼을 원하는 대로 스타일링 한 후, Get Code버튼을 클릭하여 CSS 코드를 생성합니다.

<a href="#" class="myButton">green</a>

.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

위와 같은 코드가 만들어졌다면 맨 첫줄을 제외한 /myButton { 부터 끝까지 코드를 복사하고 워드프레스 > 외모 > 사용자 정의하기 > 추가CSS 편집기에 붙여넣기합니다.

버튼 만들기

테스트 버튼 << 버튼으로 만들 텍스트를 입력하고 텍스트 부분을 클릭하고 우측 블록 설정에서 고급 메뉴를 열고 추가 CSS 클래스에 myButton을 입력합니다.

*여기서 추가 CSS 클래스에 입력하는 myButton은 대소문자 그대로 입력해야 합니다.

테스트 버튼

결론

링크 버튼은 CSS 코드를 모르더라도 온라인 도구나 코드를 복사해서 쉽게 만들 수 있으므로, 블로그 운영에 있어서 유용한 기능 중 하나입니다. 링크 클릭을 촉진하고 수익을 증가시키기 위해 링크 버튼을 활용하는 것은 매우 효과적인 전략 중 하나입니다. 또한, 링크 버튼을 사용하면 링크를 더욱 직관적이고 시각적으로 보기 좋게 만들 수 있습니다.