워드프레스는 플러그인만큼이나 테마도 상당히 다양한 편입니다. 워드프레스에서 제공하는 공식 테마들도 괜찮은게 많죠. 근데 테마들 대부분 영어 디자인을 중심으로 되어있어서 한글 기반의 사이트에 적용하면 살짝 아쉬운 부분들이 있습니다.
지금 제가 사용하고 있는 Fashify 테마의 경우 한글 기준으로는 제목(h2) 폰트가 너무 크게 나오는 문제가 있었습니다. 또한 이미지의 캡션이 본문과 구분이 안되는 것도 별로 마음에 들지 않았죠. 이런 경우 테마의 CSS를 직접 편집하여 테마를 사용자 입 맛에 맞게 고칠 수 있습니다.
예전(10년 전) 워드프레스는 테마의 CSS 파일을 직접 고치는 기능이 있었습니다. 자유롭게 편집할 수 있어서 좋긴 했지만 잘 못하면 테마의 핵심 부분을 날리거나 테마를 다시 설치해야하는 경우도 있었습니다. 하지만 10년이 지난 지금은 이 부분이 개선되어 따로 사용자 정의 CSS를 오버라이드할 수 있도록 바뀌었더군요. 테마를 건드리지 않고도 디자인 조정이 가능해진 것이죠.
게다가 워드프레스에 내장된 CSS 에디터는 CSS를 적용한 결과를 바로 옆에서 볼 수 있도록 디자인 되어있습니다. CSS를 만드는 순간 실시간으로 적용되는 디자인을 보면서 편집할 수 있죠. 이렇게 모든건 다 준비되어있는데 한가지 문제가 있었습니다. 제가 CSS를 할 줄 모른다는 것이죠.
미디어 쿼리
이럴 땐 얼핏 알고 있는 CSS 지식과 구글님의 도움을 받아 코드를 작성해야 합니다. 저 같은 경우 전체적으로 폰트 크기를 줄이되, 모바일에서 포스팅의 글씨 크기는 키우고 싶었습니다.
이 경우 미디어 쿼리를 이용하여 작성할 수 있습니다. 미디어 쿼리란 CSS에서 디바이스의 환경에 따라 디자인을 다르게 먹히도록 하는 기법입니다. 모바일이 나온지 얼마 안되던 10년전엔 나름 핫했는데, 이것도 벌써 10여년 전에 나온 기술이네요.
저 같은 경우 다음과 같이 max-width : 700px, 즉 화면 너비가 최대 700px인 환경에서 동작하도록 구성하였습니다. 스마트폰 같은 모바일 환경에만 따로 디자인을 적용하고 싶을 경우 적합합니다.
@media (max-width: 700px) { ... }700px 이하에서 폰트 크기가 기본보다 좀 더 커지도록 다음과 같이 세부적으로 폰트 크기 디자인을 추가해주었습니다.
@media (max-width: 700px) {
h1.entry-title { font-size: 2.1rem; }
h2, .heading-size-2 { font-size: 2.0rem; }
h3, .heading-size-3 { font-size: 1.7rem; }
h4, .heading-size-4 { font-size: 1.4rem; }
p, .entry-post { font-size: 1.3rem; }
}미디어 쿼리로 모바일을 700px 이하로 정의했으니 데스크탑이나 태블릿 같은 경우는 최소 700px 이상은 되겠죠. 아래와 같이 데스크탑 사이트 용 글씨 크기도 미디어 쿼리를 이용해 지정해주었습니다.
@media (min-width: 700px) {
h1.entry-title { font-size: 1.9rem; }
h2, .heading-size-2 { font-size: 1.8rem; }
h3, .heading-size-3 { font-size: 1.5rem; }
h4, .heading-size-4 { font-size: 1.2rem; }
p, .entry-post { font-size:1.05rem; }
}개발자 도구를 이용해 원하는 부분의 디자인 바꾸기
그 다음에는 캡션의 형태를 바꾸고 싶었습니다. Fashify는 캡션 기본값이 본문과 구분이 안되도록 지정되어있었기 때문에 본문과 좀 더 구분되는 캡션을 주고 싶었죠.
하지만 아이패드 프로로는 현재 사용 중인 테마에서 태그나 스타일이 어떻게 적용되어 있는지 알 방법이 없었습니다. 보통 이런 웹 작업을 할 때는 브라우저 개발자 도구의 Inspector 툴을 통해 알아낼 수 있지만 아이패드 프로에는 개발자 도구를 갖고 있는 브라우저가 없습니다. 그래서 이 부분의 작업은 별 수 없이 맥에서 실행되는 파이어폭스의 도움을 받았습니다.
파이어폭스의 개발자 도구로 마음에 안드는 부분(여기에서는 이미지 캡션)을 하이라이트해보면 figcaption 태그에 text-area 스타일이 먹혀 있는 것을 알 수 있습니다.
태그와 스타일을 알았으니 이제 디자인을 조정해줄 수 있습니다. 저 같은 경우 캡션의 조정을 위해 아래와 같이 추가해주었습니다. 이렇게 해주면 회색으로 좀 더 본문과 구분되는 캡션이 적용 됩니다.
figcaption, .textarea { font-size:1.0rem; color:gray; }테마에 사용된 폰트 바꾸기
그 다음에는 폰트 스타일 적용이었는데요, Fashify 테마는 폰트가 없으면 “serif”체를 로드하도록 기본 디자인이 되어있습니다. 그렇다보니 해당하는 한글 폰트가 없는 윈도우나 맥 환경에서는 모든 글씨체가 바탕체로(serif가 바탕체) 나오는 문제를 뒤늦게 발견했습니다. 아이패드로만 작업하다보니 미처 발견하지 못한 부분이었죠.
이 문제도 CSS 조정으로 해결할 수 있습니다. 블로그의 모든 텍스트 영역을 파이어폭스의 개발자 도구로 검사하여 다음과 같이 폰트를 serif(바탕체)가 아니라 sans-serif(돋움체)로 나오도록 다음과 같이 적용해주었습니다.(혹시 더 깔끔하게 할 수 있는 방법이 있다면 공유 부탁드립니다..ㅠ)
/* font override */
body, .button, .input, .select, .textarea { font-family: "Libre Franklin", Georgia, sans-serif; }
figcaption, .textarea { font-family: "Libre Franklin", Georgia, sans-serif; color:gray; }
h1, .heading-size-1 { font-family: "Libre Franklin", Georgia, sans-serif;}
h1.entry-title { font-family: "Libre Franklin", Georgia, sans-serif; }
h2, .heading-size-2 { font-family: "Libre Franklin", Georgia, sans-serif; }
h3, .heading-size-3 { font-family: "Libre Franklin", Georgia, sans-serif; }
h4, .heading-size-4 { font-family: "Libre Franklin", Georgia, sans-serif; }
p, .entry-post { font-family: "Libre Franklin", Georgia, sans-serif; }마무리
저 같은 경우 실력이 딸려서 주로 폰트의 조정만 진행했지만 워드프레스는 CSS 편집이 오픈되어있는만큼 훨씬 다양한 커스터마이징이 가능합니다. 게다가 추가하는 CSS가 테마 자체에는 영향을 미치지 않기 때문에 호환성을 유지하면서 테마 편집을 진행할 수 있어서 좀 더 다양한 시도가 가능합니다. 다음은 제가 이 블로그에서 사용했던 사용자 정의 CSS 전문입니다. 혹시 필요하신 분들이 계신다면 도움이 되었으면 좋겠습니다.
/* font override */
body, .button, .input, .select, .textarea { font-family: "Libre Franklin", Georgia, sans-serif; }
figcaption, .textarea { font-family: "Libre Franklin", Georgia, sans-serif; color:gray; }
h1, .heading-size-1 { font-family: "Libre Franklin", Georgia, sans-serif;}
h1.entry-title { font-family: "Libre Franklin", Georgia, sans-serif; }
h2, .heading-size-2 { font-family: "Libre Franklin", Georgia, sans-serif; }
h3, .heading-size-3 { font-family: "Libre Franklin", Georgia, sans-serif; }
h4, .heading-size-4 { font-family: "Libre Franklin", Georgia, sans-serif; }
p, .entry-post { font-family: "Libre Franklin", Georgia, sans-serif; }
/* Desktop font size */
@media (min-width: 700px) {
h1.entry-title { font-size: 1.9rem; }
h2, .heading-size-2 { font-size: 1.8rem; }
h3, .heading-size-3 { font-size: 1.5rem; }
h4, .heading-size-4 { font-size: 1.2rem; }
p, .entry-post { font-size:1.05rem; }
figcaption, .textarea { font-size:1.0rem; color:gray; }
}
/* Mobile font size */
@media (max-width: 700px) {
h1.entry-title { font-size: 2.1rem; }
h2, .heading-size-2 { font-size: 2.0rem; }
h3, .heading-size-3 { font-size: 1.7rem; }
h4, .heading-size-4 { font-size: 1.4rem; }
p, .entry-post { font-size: 1.3rem; }
figcaption, .textarea { font-size:1.1rem; color:gray; }
}