워드프레스의 Onepress 테마는 깔끔하고 세련된 디자인으로 많은 사랑을 받고 있습니다. 하지만 블로그 섹션의 글 목록이 조금 심심하게 느껴질 수 있는데 추가 CSS 코드만으로 글 제목, 내용, 썸네일 이미지의 스타일을 개선할 수 있습니다.
추가 CSS는 어디에 넣어야 할까요?
워드프레스에서 테마의 디자인을 수정하는 가장 안전하고 쉬운 방법은 ‘추가 CSS’ 기능을 이용하는 것입니다. 이렇게 하면 테마가 업데이트되어도 수정 내용이 사라지지 않아요.
- 워드프레스 관리자 화면에 접속합니다.
- 왼쪽 메뉴에서 ‘외모’ → ‘사용자 정의하기’를 클릭합니다.
- 사용자 정의 설정 메뉴에서 ‘추가 CSS’ 항목을 찾아서 클릭합니다.
- 아래 제공된 CSS 코드를 이 공간에 복사하여 붙여넣습니다.
- 화면 상단의 ‘발행’ 버튼을 클릭하여 변경 사항을 저장합니다.
CSS 코드 설명
| 요소 | 내용 |
|---|---|
| 제목 글씨 | 글자 크기를 키우고, 색상을 검은색(#000000)으로, 두께를 굵게(bold) 설정하여 눈에 띄게 합니다. |
| 내용 글씨 | 글자 크기와 색상(#444, 진한 회색)을 조정하여 가독성을 높입니다. |
| 썸네일 이미지 | 이미지를 정사각형(200px x 200px)으로 만들고, object-fit: cover를 적용해 이미지가 잘리지 않고 깔끔하게 보이도록 합니다. |
적용할 CSS 코드
다음 코드를 ‘추가 CSS’ 공간에 붙여 넣어주세요.
/* 제목 글씨 */
.blog .entry-title {
font-size: 24px;
color: #000000;
font-weight: bold;
}
/* 내용 글씨 */
.blog .entry-excerpt p {
font-size: 16px;
color: #444;
}
/* 썸네일 이미지 */
.wp-post-image {
width: 200px;
height: 200px;
object-fit: cover;
}
Before & After
CSS 코드를 적용하기 전과 후입니다.
특히 썸네일 이미지의 모양과 글 제목의 가독성에서 큰 차이를 느낄 수 있습니다.
CSS 적용 전 (Before)
기본 테마의 스타일로, 제목이 덜 강조되고 썸네일 이미지가 비율에 따라 늘어나거나 줄어들어 다소 정리되지 않은 느낌을 줍니다.
CSS 적용 후 (After)
제목은 굵고 명확해졌으며, 썸네일 이미지는 정사각형으로 통일되어 훨씬 깔끔하고 전문적인 느낌을 줍니다. 방문자가 콘텐츠에 더 집중할 수 있도록 도와줍니다.
나만의 스타일로 커스터마이징 팁
제공된 코드에서 숫자와 색상 코드를 변경하면 나만의 스타일을 만들 수 있습니다.
- 글자 크기 변경:
font-size: 24px;에서 숫자를 원하는 크기(예:28px)로 변경해 보세요. - 색상 변경:
color: #000000;에서#뒤의 6자리 코드를 원하는 색상 코드로 변경해 보세요. - 썸네일 크기 변경:
width: 200px;와height: 200px;의 숫자를 변경하여 다른 크기의 정사각형(예:150px) 또는 직사각형(width: 300px; height: 150px;) 모양을 만들 수 있습니다.
간단한 CSS 수정만으로도 워드프레스 Onepress 테마의 첫 화면을 훨씬 매력적으로 꾸밀 수 있습니다.