심플한 인용구 레이아웃 CSS (+GeneratePress 테마)

최근 워드프레스 테마를 변경하고 나니 blockquote 태그가 제대로 적용되지 않고 일반적인 텍스트 형식으로 나오는 현상이 발생했습니다. 그래서 단순한 인용구(blockquote) 서식을 검색하여 적용해보았습니다.

[ 이 글은 2023년 8월 28일에 최종 업데이트되었습니다. ]

인용구란?

<blockquote> 태그는 다른 출처에서 인용한 섹션을 지정합니다. 워드프레스에서는 "인용" 블록을 사용하여 인용구를 표시할 수 있습니다. 예시:

하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.

출처: 사무엘존슨

블록 에디터(구텐베르크)에서는 "/인용"을 입력하여 간단히 인용 블록을 추가할 수 있습니다.

심플한 인용구(Blockquote) 레이아웃(CSS)

다음과 같은 CSS 코드를 사용했습니다.

blockquote {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
// Source: css-tricks.com

그러면 다음과 같이 인용구가 심플한 형식으로 표시됩니다.

Simple Blockquote - 심플한 인용구

원하는 경우 왼쪽에 있는 세로 막대의 레이아웃을 조정하여 단순함을 없애는 것도 가능하겠죠? 예를 들어, 왼쪽 테두리를 다음과 같이 바꾸면:

border-left: 6px solid #c76c0c;

인용구 모양이 아래 그림과 같이 바뀝니다.

워드프레스 심플한 인용구

box-shadow 효과를 두면 조금 더 모양이 개선됩니다.

border-left: 6px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;

그러면 모양이 다음과 같이 그림자 효과가 추가됩니다.

심플한 워드프레스 인용구

원하는 경우 색상을 파란색 계열로 바꾸어도 괜찮을 것 같습니다. (해당 사이트의 색상과 조화를 이루는 색상을 선택하시면 좋을 듯 합니다.)

GeneratePress 테마에서 인용구 변경하기

이 글을 작성한 후에 여러 차례 테마를 바꾸었습니다. 지금은 GeneratePress라는 비교적 가볍고 빠른 것으로 평가되는 테마가 설치되어 있습니다.

GP 테마를 사용한 초기에는 다음과 같은 CSS 코드가 사용되었습니다.

/* GeneratePress 테마 인용구 서식 */
.single-post .entry-content blockquote {
  background:#f9f9f9;
  border-left:10px solid #ccc;
  margin:1.5em 10px;
  padding:1.2em 30px 1.2em 75px;
  quotes:"\201C""\201D""\2018""\2019";
  text-align: left;
  font-style: normal;
	font-size: 0.99em;
}

.single-post .entry-content blockquote::before {
font-family:Arial;
content: "\201C";
color: #9eaea9;
font-size: 4em;
position: absolute;
left: 10px;
top: -10px;
}

.single-post .entry-content blockquote::after{
content: '';
}

.single-post .entry-content blockquote p:not(:first-child) {
  display:inline-block;
  line-height: 1.65em;
  margin-bottom: 21px;
  text-transform: none;
}

.single-post .entry-content blockquote p:first-child,
.single-post .entry-content blockquote p:last-child {
  display:inline;
  line-height: 1.1em;
  text-transform: none;
}



.single-post .entry-content blockquote cite {
padding-top: 20px;
display: block;
    font-style: italic;
    font-size: 15px;
}

그러면 다음과 같은 모양으로 인용구가 표시됩니다.

인용구 요소는 다른 출처로부터 인용한 섹션을 가리킵니다. 인용구 내의 콘테츠는 다른 출처로부터 인용한 것이어야 합니다.

Blockquote 란 무엇입니까?

위의 CSS 코드를 적절히 수정하여 사이트 디자인에 맞게 변경해보시기 바랍니다. 다른 테마에서도 비슷한 방식으로 응용할 수 있습니다.

CSS 코드는 사용자 정의하기(외모 > 사용자 정의하기> 추가 CSS)에 추가하거나 차일드 테마 내의 스타일시트 파일(style.css)에 입력하세요.

추가: 카툰 스타일의 인용구

활기차고 밝은 스타일의 인용문을 원하는 경우 다음과 같은 코드를 추가하여 테스트해보시기 바랍니다.

/* Cartoon-style blockquote for the WordPress GeneratePress Theme */

.single-post .entry-content blockquote {
  background: #ffebc8;
  border: 5px dashed #ff9933;
  margin: 3em 0;
  padding: 2em;
  position: relative;
  font-size: 1.2em;
  line-height: 1.8;
  color: #333;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 5px 5px 0 #ff9933;
}

.single-post .entry-content blockquote::before, 
.single-post .entry-content blockquote::after {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  content: "\201C";
  color: #ff9933;
  font-size: 3em;
  position: absolute;
}

.single-post .entry-content blockquote::before {
  top: -10px; 
  left: -10px;
}

.single-post .entry-content blockquote::after {
  content: "\201D";
  bottom: -10px; 
  right: -10px;
}

.single-post .entry-content blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffebc8;
  transform: translateX(-50%);
}

.single-post .entry-content blockquote p {
  margin-bottom: 20px;
  text-align: center;
}

.single-post .entry-content blockquote cite {
  display: block;
  font-style: normal;
  font-size: 1em;
  text-align: center;
  color: #555;
  margin-top: 20px;
}
.single-post .entry-content blockquote {
  background: #ffebc8;
  border: 5px dashed #ff9933;
  margin: 3em 0;
  padding: 2em;
  position: relative;
  font-size: 1.2em;
  line-height: 1.8;
  color: #333;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 5px 5px 0 #ff9933;
}

.single-post .entry-content blockquote::before, 
.single-post .entry-content blockquote::after {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  content: "\201C";
  color: #ff9933;
  font-size: 3em;
  position: absolute;
}

.single-post .entry-content blockquote::before {
  top: -10px; 
  left: -10px;
}

.single-post .entry-content blockquote::after {
  content: "\201D";
  bottom: -10px; 
  right: -10px;
}

.single-post .entry-content blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffebc8;
  transform: translateX(-50%);
}

.single-post .entry-content blockquote p {
  margin-bottom: 20px;
  text-align: center;
}

.single-post .entry-content blockquote cite {
  display: block;
  font-style: normal;
  font-size: 1em;
  text-align: center;
  color: #555;
  margin-top: 20px;
}

상기 코드를 사용하여 다음과 같이 인용 블록 스타일이 바뀝니다.

흙은 여전히 땅으로 돌아가고 신은 그 주신 하나님께로 돌아가기 전에 기억하라. 전도자가 가로되 헛되고 헛되도다 모든 것이 헛되도다

잠언서 12:17-18

참고:


19개 댓글

    1. 네. Astra 테마에도 위의 코드를 응용하여 적용할 수 있습니다.
      테마에 따라 선택자가 조금씩 달라질 수 있지만, 아스트라 테마에서는 위에 제시된 코드를 그대로 사용해도 적용될 것 같습니다.
      적용이 안 되는 경우 알려주시면 시간이 될 때 한 번 확인해보겠습니다.

    1. 코드는 다음과 같습니다.
      실제로 잘 적용될지는 모르겠네요.

      blockquote {
      padding: 30px 30px 20px 45px;
      margin-bottom: 20px;
      background-color: #289dcc;
      color: #FFFFFF;
      border-radius: 5px;
      }

      blockquote:before, blockquote:after, q:before, q:after {
      content: "";
      }

      blockquote p {
      font-size: 20px;
      font-family: 'Open Sans', serif;
      line-height: 1.4;
      position: relative;
      padding-top: 13px;
      padding-left: 40px;
      }

      blockquote p:before {
      content: "f10d";
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      color: #FFFFFF;
      font-size: 60px;
      position: absolute;
      top: -27px;
      left: -27px;
      }

      blockquote:before, blockquote:after, q:before, q:after {
      content: "";
      }

    1. 예전에는 이런 인용구도 제가 원하는 방식으로 모두 바꾸었지만, 테마를 자주 변경하다 보니 눈에 크게 거슬리지 않으면 테마 자체 내의 스타일을 그대로 사용하는 편입니다.

  1. MigMag 테마가 깔끔하고 좋은데, 유독 인용구는 눈에 거슬립니다.
    지금은 중앙정렬+볼드체+큰 글씨 입니다. 왼쪽정렬+보통글씨 로 하려고 사용자정의>CSS수정에 다음처럼 적어넣었는데 통 안되네요.
    전에 다른 글에서 말씀하신대로 크롬에서 검사해서 고쳐보려고 했는데, 이 테마는 전에 것과는 달리 제가 보기에는 너무나 복잡해서 골치입니다.

    blockquote {
    font-size:1em;
    text-align:left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
    padding-left: 15px;
    border-left: 3px solid #ccc;
    }

    1. 다음과 같은 코드를 한 번 테스트해보시기 바랍니다.

      article[class*="type-"] .entry-content blockquote p, blockquote p {
      font-size: 1em !important;
      text-align: left !important;
      font-weight: normal !important;
      }

      1. 고맙습니다. 아래와 같이 했습니다. 워드님 덕분에 잘 해결했습니다. ^^
        article[class*="type-"] .entry-content blockquote p, blockquote p {
        font-size: 0.9em !important;
        text-align: left !important;
        font-weight: normal !important;
        }
        blockquote {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        padding-left: 15px;
        border-left: 3px solid #ccc;
        }

      2. 우선 앞에 article[class*="type-"] .entry-content를 추가하여 테스트해보시겠어요?

        article[class*="type-"] .entry-content a { ... }

        잘 안 되면 알려주세요. 그러면 제가 사이트 글을 확인한 후에 정확한 코드를 알려드릴게요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.