워드프레스 blockquote를 콘텐츠 상자로 변형하기

워드프레스 글 작성 중 특정 문단을 테두리 상자 또는 배경색이 있는 상자로 쌓여있는 문단으로 작성해야 할 때, 에디터의 ’blockquote’ 기능을 이용하여 간편하게 적용할 수 있습니다.

1. 기본 blockquote 스타일

워드프레스나 BC TOWN™ 테마에는 blockquote 스타일이 지정되어 있습니다.

글 작성중 원하는 문구를 드레그하여 블록으로 지정 후, 에디터의 blockquote 버튼을 클릭하기만 하면 적용됩니다.

zpost_07img01

현재 보고계시는 make BCT의 기본 blockquote 스타일은 아래와 같습니다.

blockquote 예문입니다.

The attacking trio were behind 60% of Real Madrid’s goals this year.

The front line made up of Cristiano Ronaldo, Benzema and Bale enjoyed a spectacular 2014, during which the three players managed to score 108 goals in all competitions. The Real Madrid attacking trio were unstoppable in front of goal and were a key ingredient for the team closing out the year with plenty of titles.

2. blockquote 스타일 변경하기

인용구로 쓰이는 이 기능을 이용하여 손쉽게 문단 상자를 만들어 보겠습니다.

테두리가 둥근 어두운 회색 배경에 흰색 글자 상자로 바꾸기 위해 [관리자] > [외모] > [Custom CSS]에 접속하여 다음과 같이 CSS를 작성하고 [저장]합니다.

/* blockquote 스타일 수정 */
blockquote {
background: none;
padding: 15px 25px 20px 25px;
background-color: #1B1B1B;
color: #D5D5D5;
border-radius: 10px;
}

홈페이지에 나가보면 다음과 같이 텍스트상자가 적용되어 있습니다.

매번 스타일을 작성해 주지 않고 원하는 모양의 blockquote로 만들어 간편하게 글 상자를 적용할 수 있습니다.

예제보기 : http://makebct.cafe24.com/?p=149

zpost_07img02

Leave a Reply

Your email address will not be published. Required fields are marked *

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함1. Start with the system updatesudo apt update...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
자동화설비 구조 및 데이터PC 역할
자동화설비에 사용되는 하드웨어는 다음과같습니다.PLC : PLC는 자동화 설비의 제어를 담당하는 핵심 장치로, 프로그래밍을 통해 다양한 장비와 프로세스를 제어할 수 있습니다....
자동화설비 데이터PC 환경 설정
파이썬 3.11.0환경변수 설정파이참 커뮤니티 에디션 다운로드프로젝트 필수 라이브러리 다운로드QT5 환경 변수 추가PostgreSQL...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다.1. apt update사용자...