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

| Updated

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

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

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

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

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

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

워드프레스 인용문 스타일(Blockquote Style)_GeneratrPress 기본 스타일
워드프레스 인용문 스타일(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;
}

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

우선 폭을 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;
}

괄호 형식의 인용문 스타일(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;
}

위 아래 줄을 이용한 인용문 스타일(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;  /*아래 줄 두께 및 색 변경 */
}

기타 참고

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

7 Stylish Ways to Customize Blockquote CSS In WordPress Themes?

Vultr 서버 100$ 프로모션 안내

안녕하세요?

혹시 워드프세스 사이트 구축 또는 쇼핑몰 구축을 위해 신규 서버 구축을 고민하신다면 지금 진행하는 Vultr 100$ 프로모션을 검토해 보세요.

지금 Vultr에서는 아래 프로모션 코드 링크를 통해 Vultr에서 서버를 구축 후 1달 이상 사용 및 $25이상 결제 시 추가 100$을 주는 프로모션을 진행 중입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

제가 생각하는 Vultr의 강점은 일본 서버를 기준으로 가장 빠르고 성능도 가장 좋으며 사용자 UI도 낫다고 생각합니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 가상 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments