워드프레스 blockquote를 콘텐츠 상자로 변형하기

워드프레스 글 작성 중 특정 문단을 테두리 상자 또는 배경색이 있는 상자로 쌓여있는 문단으로 작성해야 할 때, 에디터의 ’blockquote’ 기능을 이용하여 간편하게 적용할 수 있습니다.

1. 기본 blockquote 스타일

워드프레스나 BC TOWN™ 테마에는 blockquote 스타일이 지정되어 있습니다.

글 작성중 원하는 문구를 드레그하여 블록으로 지정 후, 에디터의 blockquote 버튼을 클릭하기만 하면 적용됩니다.

현재 보고계시는 make BCT의 기본 blockquote 스타일은 아래와 같습니다.

blockquote 예문입니다.
The attacking trio were behind 60% of Real Madrid’s goals this year.
The front line made up of Cristiano Ronaldo, Benzema and Bale enjoyed a spectacular 2014, during which the three players managed to score 108 goals in all competitions. The Real Madrid attacking trio were unstoppable in front of goal and were a key ingredient for the team closing out the year with plenty of titles.

2. blockquote 스타일 변경하기

인용구로 쓰이는 이 기능을 이용하여 손쉽게 문단 상자를 만들어 보겠습니다.

테두리가 둥근 어두운 회색 배경에 흰색 글자 상자로 바꾸기 위해 [관리자] > [외모] > [Custom CSS]에 접속하여 다음과 같이 CSS를 작성하고 [저장]합니다.

/* blockquote 스타일 수정 */
blockquote {
background: none;
padding: 15px 25px 20px 25px;
background-color: #1B1B1B;
color: #D5D5D5;
border-radius: 10px;
}

홈페이지에 나가보면 다음과 같이 텍스트상자가 적용되어 있습니다.

매번 스타일을 작성해 주지 않고 원하는 모양의 blockquote로 만들어 간편하게 글 상자를 적용할 수 있습니다.

예제보기 : http://makebct.cafe24.com/?p=149