심플한 인용구 레이아웃 CSS (+GeneratePress 테마) - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2022년 3월 23일 | 17개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

[ 이 글은 2022년 3월 22일에 최종 업데이트되었습니다. ]

심플한 인용구(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라는 비교적 가볍고 빠른 것으로 평가되는 테마가 설치되어 있습니다.

현재 인용구에 대하여 다음과 같은 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)에 입력하세요.

참고:



17 개 댓글

Leave a Comment

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

      응답
  1. 위의 인용구를 살짝 적용했습니다.^^
    혹, 예전에 colormag 테마의 인용구가 개인적으로는 멋진데 인용구CSS 좀 알 수 있을까요..??
    https://demo.themegrill.com/colormag/no-sidebar-content-centered/

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

      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: "";
      }

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

      응답
  2. 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;
    }

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

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

      응답
      • 고맙습니다. 아래와 같이 했습니다. 워드님 덕분에 잘 해결했습니다. ^^
        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;
        }

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

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

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