Adjust WordPress line height

현재 사용 중인 wordpress 테마에 포스팅한 글의 줄간격이 좁아 css 파일을 수정하여 간격을 늘리는 방법에 대해 알아본다.

수정할 css 확인

블로그의 특정 포스트 글을 브라우저로 띄우고 F12키를 누른다.

• 우측 창에 보이는 디버그 탭에서 body class 부분을 마우스로 갔다대면 아래 Styles가 확인된다.
• 아래 boby 선언 부분에서 line-height 의 20PX를 수정한다.

수정 적용, 파일 확인

• 27PX로 수정 적용하면 줄간격이 늘어난것을 확인할 수 있다.
• 디버그 모드 화면에서만 적용이 된 것이고, 사용 중인 워드프레스 테마의 style.css 파일을 수정 적용이 필요하다.

CSS 파일 수정

style.css 수정 (영구 적용)

# vi /home/wordpress/wp-content/themes/spacious/style.css
body,
button,
input,
select,
textarea {
    color: #666666;
    font: 16px 'Lato', sans-serif;
    line-height: 27px;    --> 20px to 27px
    word-wrap: break-word;
}

또는 아래와 같이 워드프레스 관리자 페이지의 (외모)테마 편집을 통해서도 수정 가능하다.

브라우저에서 확인 시 변경된 것이 바로 반영이 안된다면 브라우져 캐시/쿠키를 제거 후 확인해 볼 것.

* 테마 플러그인이 업데이트 되면 변경했던 line-height 값이 원래대로 원복 될 수 있다.