워드프레스 h태그 글자 크기 조정 / 테마 제목 본문 등 2가지 방법

워드프레스 h태그 글자 크기 조정을 위해서 인터넷 검색을 해보고 내 워드프레스 홈페이지에 적용해보았으나 글자 크기 조정이 되지 않아 그냥 방치해뒀으나, 볼 때 마다 짜증 나게 환기되곤 하여 방법을 찾고 수정하여 이 글로 포스팅을 한다.

워드프레스 h태그 글자 크기 조정 – 테마 제목 본문 등 2가지 방법

일반적으로 h태그 글자 크기 조정하는 방법과 장단점

사용하는 워드프레스 테마의 CSS 파일을 수정하여 사용하면 제일 확실하고 빠르다.

그러나 워드프레스 테마의 구조가 복잡할 경우 어느 파일에서 h태그의 글자 크기와 스타일을 정의하고 있는지 모를 경우가 많다.

이 글의 하단부에서 내 워드프레스 테마의 폰트 크기 등 각종 스타일을 정의하고 있는 파일을 찾는 방법을 설명해놓았다. 파일을 못 찾을 때나 워드프레스 테마의 구조를 잘 이해하고 있지 못할 수도 있는 일반인의 경우 사용자 정의 – 추가 CSS에서 h 태그를 재정의하는 방법은 다음과 같다.

이 방식은 운영자 측면에서 쉽다는 장점이 있으나, 내 워드프레스 테마에서 1차 정의한 것을 무시하고, 재정의하는 방법이므로 홈페이지를 띄울 때 로딩 데이터가 미세하게나마 커진다는 단점이 있다.

사용자 정의하기, 추가 CSS 재정의

아래 그림과 같이 워드프레스 관리자로 로그인,  알림판에서 테마 디자인, 사용자 정의하기로 차례차례로 들어간다.

워드프레스 h태그 글자 크기 조정 - 테마 제목 본문 등 사용자정의

 

워드프레스 h태그 글자 크기 조정 CSS

워드프레스 h태그 글자 크기 조정

 

위의 그림을 보면, 이곳에서
.entry h1 { font-size: 16pt !important; line-height : 1.5; }

.entry h2 { font-size: 15pt !important; line-height : 1.5; }

.entry h3 { font-size: 14pt !important; line-height : 1.5; }

로 워드프레스 h태그 글자 크기 조정을 위해 재정의를 해놓았다.

재정의를 하는 부분은 “!important” 이다.

이 말의 뜻은, 앞에서 미리 h태그 스타일을 정의해놓았지만 무시하고 여기서 재정의하는 부분을 따른다는 일종의 명령 규칙이다.

본인의 경우 앞의 추가 CSS 재정의를 통한 방식이 잘 적용되지 않아 워드프레스 테마의 CSS를 담당하는 파일을 수정하고 FTP를 통해 올려서 워드프레스 h태그 글자 크기 조정을 하였다.

내 워드프레스 테마의 CSS파일 h태그 글자 크기 조정

다음 그림을 참고로 한다.

텍스트파일 편집응용프로그램 EditPlus에서 내 홈페이지 테마 폴더(디렉터리)를 찾는다.

이곳에 아래 그림과 같이 “검색 – 여러 파일 찾기(i)…”를 차례로 클릭한다.

이 방식은 내 테마를 커스터마이징(Customizing)할 때 유용한 부분이 있음으로 기억해두면 좋다.

워드프레스 h태그 글자 크기 조정 여러파일 찾기

아래 그림과 같이 찾을 말에 h1 또는 h3등을 입력하고, 파일 종류는 *.* 또는 *.css를 선택하고, 현재파일디렉토리(R)과 하위 폴더 포함(S)에 체크하고 찾기를 클릭한다.

워드프레스 h태그 글자 크기 조정

그러면 아래 그림과 같이 태그 문구를 포함한 파일들이 전부 나열된다.

한 파일에서도 h1 태그가 포함된 부분을 전부 찾아 몇 번째 줄에서 나타났는지 나열해주므로,

워드프레스 h태그 글자 크기 조정

내 워드프레스 테마의 스타일과 h1, h2, h3 등의 태그를 정의하고 있는 파일의 해당 위치를 찾을 수 있다. 찾기로 나열된 부분을 클릭하면 EditPlus에서 해당 부분을 자세히 볼 수 있다.

 

워드프레스 h태그 글자 크기 조정

내 워드프레스 테마의 h태그 글자 크기 정의 파일

위의 그림과 같이 font-size를 대폭 줄여줬다. h1 태그인 경우 원래는 37px로 정의되어있었다.

원래 정의로는 모바일 화면에서 보면 글자 크기가 너무 크고 아래위 줄 간격이 중첩되어 가독성이 떨어지고 보기에도 좋지 않았었다.

내 워드프레스 테마의 h태그 글자 크기 정의 파일

보통 내 워드프레스 테마의 스타일을 정의하고 있는 일반적인 파일은 테마의 루트 디렉터리에 있는 style.css이나, 테마에 따라 하위 폴더에서 따로 정의하고 있는 경우도 제법 많다.

워드프레스 h태그 글자 크기 조정 entry 수정

 

필자의 워드프레스 테마는 “satrah”인데 h태그 글자 크기 조정은 assets > theme-styles > css 폴더에 있는 default.css였다.

이 파일을 위의 그림과 같이 수정해주고 FTP를 통해 해당 폴더의 파일을 대치해줬다.

물론, 이렇게 함으로써 내가 원하는 크기로 글자 크기가 조정되었음을 확인하였다.

이상으로, 오늘은 워드프레스 테마에서 h태그 글자 크기 조정하는 방법들을 방법론적으로 알아보았다.

끝으로 참고나 도움이 되는 부분이 있기를 바랍니다.

참고.
워드프레스 테마 Custom CSS padding / important


노래하나 듣고 가세요...

For the Good Times.

이 노래는 올드 팝(Old Pop)으로 Kristofferson이 작곡 한 노래로 , 1968년 가수 Bill Nash가 처음으로 녹음하였고 1970년 4월 Kristofferson의 데뷔 앨범에 수록되었습니다.

연배가 좀 있으신 분들에겐 향수를 불러 일으키는 서정성이 깊은 곡이기도 이 노래를 모르는 분이라면 배워두세요.

For the Good Times Guitar Live.

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.