[워드프레스 팁] 워드프레스 인용문 스타일(Blockquote Style) 변경하기

워드프레스 GeneratePress 테마를 사용하면서 인용문 스타일(Blockquote Style)을 조금 더 강조할 수 있도록 변경해 보았습니다. 그리고 워드프레스에서 저굥 가능한 인용 스타일(Blockquote Style) 몇개를 소개해 봤습니다.

GeneratePress 테마의 인용문 스타일은 상당히 실용적입니다. 넘 글에서 튀지도 않으면서도 기본을 갖추고 있죠.

그렇지만 글을 작성하다보면 인용한 인용문을 조금 더 눈에 띄이고 더 강조하고 싶을 때가 많습니다.

그래서 몇가지 예를 살펴보았습니다.

Table of contents 목차 보이기

GeneratePress 기본 인용문 스타일(Blockquote Style)

GeneratePress 기본 인용문 스타일(Blockquote Style)의 아래 이미지처럼 단순합니다.

워드프레스 인용문 스타일(Blockquote Style)_GeneratrPress 기본 스타일

GeneratePress 테마의 style.css에서 정의하고 있는 인용 스타일(Blockquote Style) css 코드는 아래와 같습니다.

blockquote {
	border-left: 5px solid rgba(0, 0, 0, 0.05);
	padding: 20px;
	font-size: 1.2em;
	font-style:italic;
	margin: 0 0 1.5em;
	position: relative;
}

blockquote p:last-child {
	margin: 0;
}Code language: PHP (php)

이 기본 코드를 기반으로 컬러나 마진 그리고 글자 크기 등을 조정해서 더 강조하는 인용 스타일을 만들 수 있습니다.

우선 폭을 600px로 제한했으며, 왼쪽 라인의 두께를 5px에서 10px로 조정했습니다.

“이 폭풍은 지나갈 거예요. 하지만 지금 우리가 하는 선택들은 앞으로 오랬동안 우리의 삶을 바꿀 수 있습니다.
우리는 두가지 중요한 선택해 직면해 있습니다. 첫째는 전체주의적인 감시와 시민 역량 강화 사이, 둘째는 민족주의적 고립과 글로벌 연대 사이의 선택입니다.
– 유발 하라리

blockquote {
    max-width: 600px !important; /*인용문 폭 조정, !important가 있어야 제대로 작동 */
    border-left: 10px solid rgba(0, 0, 0, 0.05);  /*왼쪽 가로 두께 및 색 변경 */
    padding: 20px;
    font-size: 1.3em;  /*인용문 글자 크기 변경 */
    font-style:italic;

    margin: 0 0 1.5em;            /*margin: 0 0 1.5em; */
    position: relative;
}Code language: PHP (php)

괄호 형식의 인용문 스타일(Blockquote Style)

간단하게 워드프레스에서 적용할 수 있는 인용 스타일(Blockquote Style)은 괄호를 이용하는 것인데요.

아래 css 코드를 활용해 변경합니다.

blockquote {
max-width: 600px !important; /*인용문 폭 조정, !important가 있어야 제대로 작동 */
text-align: center;
margin: 20px;
padding: 20px;
font-size: 20px;  /*인용문 글자 크기 변경 */
color: #04d39f;   /*인용문 글자색 변경 */
border-left: 10px solid #04d39f;  /*왼쪽 가로 두께 및 색 변경 */
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 10px solid #04d39f; /*오른쪽 가로 두께 및 색 변경 */
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}Code language: PHP (php)

위 아래 줄을 이용한 인용문 스타일(Blockquote Style)

인용문 위 아래로 줄을 만들어 인용문을 강조하는 방법입니다.

blockquote {
max-width: 600px !important; /*인용문 폭 조정, !important가 있어야 제대로 작동 */
margin: 20px;
padding: 20px;
text-align: center;

font-size: 20px;  /*인용문 글자 크기 변경 */
color: #7f7f7f;  /*인용문 글자색 변경 */
border-left: 4px solid #FFFFFF;  /*왼쪽 가로 두께 및 색 변경, GeneratePres 테마에서 기본으로 회색으로 보이므로 보이지않토록 화이트로 지정 */
border-top: 4px solid #04d39f; /*위 줄 두께 및 색 변경 */
border-bottom: 4px solid #04d39f;  /*아래 줄 두께 및 색 변경 */
}Code language: PHP (php)