[워드프레스 팁] 워드프레스 인용문 스타일(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; }

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

우선 폭을 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 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

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

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

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

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

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

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

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

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

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

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

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

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

오랬동안 FMCG 마케팅과 전자제품 상품기획 경험을 기반으로 다양한 분야의 마케팅 및 경영 사례 분석에 관심을 가지고 있습니다. 아울러 IT 등 트렌드 분석과 빠르게 변화하는 뉴스에서 얻을 수 있는 인사이트를 분석해 나누고 있습니다.. 개인적으로 사진에 관심에 많아 소소한 일상의 따뜻함을 담고 있습니다. 혹 연락이 필요하시면 ihappist@gmail.com으로 연락해 주세요

0 Comments
Inline Feedbacks
View all comments