워드프레스 Onepress 테마 추가 CSS로 첫 화면 예쁘게 꾸미기

워드프레스의 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 테마의 첫 화면을 훨씬 매력적으로 꾸밀 수 있습니다.

Aloha, Aboha AD