클릭을 부르는 블로그 디자인: 본문 가독성을 높이는 '인용구' 스타일 3종 세트

 

본문의 품격을 높이는 인용구 디자인 3종 세트

글의 중간중간 핵심 요약이나 명언을 넣을 때, 그냥 적는 것보다 디자인된 박스를 사용하면 독자의 집중도가 훨씬 올라갑니다. 블로그 성격에 맞는 스타일을 골라 적용해 보세요.

1단계: 인용구 스타일 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 3가지 스타일 코드를 모두 복사해서 [CSS 추가] 칸에 한 번에 붙여넣으세요.

/* 스타일 1: 깔끔한 왼쪽 라인형 */ .quote-line { border-left: 5px solid #4285f4; padding: 15px 20px; margin: 20px 0; background-color: #f8f9fa; font-style: italic; color: #555; } /* 스타일 2: 따옴표 강조형 */ .quote-mark { position: relative; padding: 40px 20px 20px 20px; margin: 30px 0; border: 1px solid #eee; border-radius: 10px; text-align: center; background-color: #fff; } .quote-mark::before { content: '"'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 60px; color: #4285f4; font-family: Georgia, serif; background: white; padding: 0 10px; line-height: 1; } /* 스타일 3: 부드러운 박스 배경형 */ .quote-box { padding: 25px; margin: 20px 0; background-color: #eef5ff; border-radius: 15px; color: #2c3e50; font-weight: 500; text-align: left; }

2단계: 본문에서 사용하는 법 (HTML 모드)

글을 작성할 때 [HTML 보기] 모드에서 원하는 위치에 아래 코드를 입력하세요.

<!-- 1번 스타일 사용 시 --> <blockquote class="quote-line">여기에 인용할 내용을 입력하세요.</blockquote> 

 <!-- 2번 스타일 사용 시 --> <blockquote class="quote-mark">여기에 핵심 문구를 입력하세요.</blockquote> 

 <!-- 3번 스타일 사용 시 --> <blockquote class="quote-box">여기에 요약 내용을 입력하세요.</blockquote>

💡 디자인 커스텀 팁
- 색상 교체: 코드의 #4285f4 부분을 내 블로그의 상징색(예: 주황색 #ff9f43)으로 바꾸면 통일감이 생깁니다.
- 가독성: 인용구 내부의 글자 크기를 키우고 싶다면 font-size: 18px;를 CSS 안에 추가해 보세요.

⚠️ 주의사항
이미 블로그 테마에 blockquote 기본 디자인이 설정되어 있는 경우, 코드가 충돌할 수 있습니다. 그럴 때는 클래스명(quote-line 등)을 정확히 입력했는지 확인해 주세요.

포스팅이 도움이 되셨다면 댓글과 공유 부탁드립니다!