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

Updated on 2020-03-24 by

워드프레스 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;
}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?

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

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

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

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

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

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

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

Subscribe
Notify of
guest
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments