Onepress 테마 글자 크기 색상 수정 소제목 꾸미기

Onepress 테마 글자 크기 수정 방법입니다. 테마의 기본 글자 크기가 너무 작아서 모바일에서는 더 작게 보입니다. 서치콘솔 모바일 편의성 문제가 생길 수 있어 글자 크기를 적당하게 키워주어야 합니다.

Onepress 테마 글자 크기 수정

원프레스 테마의 글자 크기 수정을 위해서 관리자 화면의 왼쪽 메뉴에서 모양-사용자정의-추가CSS에 들어가서 아래의 코드를 추가해주어야합니다. 기본 글자 크기를 수정하고 본문 글에 들어가는 소제목 꾸미기도 해두었습니다.

글자 크기 색상 수정

P 기본글자 크기 입니다. 사이즈와 글자의 색상을 변경해주었습니다.

  • ul은 목록 태그 입니다. 사이즈와 글자 색상을 변경 했고 들여쓰기 폭이 너무 커서 여백을 0으로 바꿔주었습니다.
  1. ol은 숫자가 들어간 목록입니다. ul목록과 마찬가지로 바꿔주었습니다.

h2, h3, h4는 글 내부의 소제목입니다. 가장 큰 제목별로 2px씩 차이가 나게 바꿔주었습니다.

p {font-size: 17px; color:#0E0E0E;}
ul {font-size: 16px; color: #0E0E0E; padding:0;}
ol {font-size: 16px; color: #0E0E0E; padding:0;}
h2 {font-size:24px;}
h3 {font-size:22px;}
h4 {font-size:20px;}

본문 소제목 꾸미기

본문 소제목이 글자로만 나와서 가독성이 조금 떨어집니다. 저는 글 제목에 배경색상이 들어가고 위아래에 줄이 있는 모양의 글 제목으로 바꾸었습니다. h2, h3, h4 모두 아래와 같은 코드를 넣으면 되고 글자 크기에 따라 여백 정도만 수정하면 됩니다.

본문 소제목 꾸미기 결과

글자 위아래 여백은 padding , 소제목 위아래 본문과의 거리는 margin 값을 조절 합니다. 테두리 선 수정은 border 값을 수정합니다.

h2.wp-block-heading {
  padding: 8px; 
	margin-bottom: 30px; 
	margin-top: 30px;
  border-style: solid; 
  border-width: 1px 0px 1px 0px;
  border-color: #e7ebef;
	background-color: #fbfbfb;
}

저는 가장 심플한 소제목 스타일을 적용하였습니다. 이것도 언제까지 쓸지 모르겠지만 자꾸 바꾸지 않아도 되는 스타일을 찾아서 정착 하시기 바랍니다. 글을 쓰는게 블로그 꾸미기 보다 중요하지만 저는 블로그 꾸며두어야 글이 써지는것 같아서 조금씩 계속 바꿔나갈것 같습니다.

답글 남기기