워드프레스 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일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
WSL2/Ubuntu 22.04 LTS에서 Jupyter notebook 실행하기
WSL2 Ubuntu에서 Jupyter notebook(Jupyter Lab) 설치는 다음과 같습니다.$ pip install jupyter $ pip install jupyterlab단,...
카카오톡 섬네일 이미지와 문구 수정 방법
워드프레스 웹사이트 구축 후 도메인 연결하고 지인에게 카카오톡으로 링크 보낼 때 다음과 같이 섬네일 이미지와 문구가 원하지 않아 이를 수정하고 싶은 경우가 있습니다.수정...