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

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

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

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

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

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

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)

기타 참고

워드프레스 인용문 스티일에 대해서아래 글들을 참고해 보시기 바랍니다.

7 Stylish Ways to Customize Blockquote CSS In WordPress Themes?