워드프레스 테마 수정하기 : 줄 간격 고치기

워드프레스 테마 수정하기 : 줄 간격 고치기(포스트 부분 넓히고, 좁히고~)

 

 

 

워드프레스 테마를 꾸미려고 하니 커스텀한 부분에서 어려운 점이 많이 있네요. 오늘은 컨텐츠 부분에 보여지는 글의 줄간격을 수정하는 법에 대해서 해결하게 된 부분을 보여드리려고 합니다. 영어와 마찬가지로 한글 역시 줄간격이 가독성이 많은 영향을 미친다고 생각합니다. 촘촘하게 줄간격이 설정되어 있어서 여러모로 읽는데 답답하고 불편하다면 블로그에 들어온 사람들의 편의성을 도외시 하고 있는 것인데요. 오늘은 그런 불편함이 눈의 띄여서 한번 고쳐 보자는 마음으로 이리 저리 정보 사냥에 (?) 나서봤습니다.

 

구글링을 통해서 해결해보려 했으나 저의 테마에서는 적용이 안되네요. 플러그인을 통해서 해보려 했으나 도대체 어떤 플러그인을 검색해야 할지 감을 잡지 못해서 그것도 불가! 그렇다면 최후의 방법!! CSS를 수정해 주는 것인데요. 자료를 찾아보니 스타일 CSS를 수정하면 된다는 분들이 있어서 해봤는데, 이것도 실패였습니다. 도대체 우쩌지.....

 

 

그렇다면 이제는 최후의 방법! 아니 제일 먼저 해버렸어도 될 만한 방법인데요. 인터넷 익스플로러나, 크롬, 그리고 파이어폭스에서 F12번 키보드를 누르면 나오는 개발자 도구라는 녀석을 사용해서 해결해 보았습니다. 결론 부터 말씀 드리자면 대성공!! 제가 사용하고 있는 테마를 조금이나마 뜯어 고칠 수 있게 되었고, 가독성 또한 확보할 수 있었습니다.

 

 

▼ 제가 쓴 포스트인데요. 줄 간격을 40px로 했을 때의 모습입니다.

 

 

 

 

 

 

 

 

▼ 요건 기존의 20px로 줄간격이 지정되어 있었을 때의 모습입니다.

 

 

 

 

 

---

 

 

수정하는 방법

 

 

우선 개발자도구 (F12를 누르면 나옵니다.) 에서 컨텐츠 부분을 확인해야 하는데요.

 

▼ F12를 누르면 아래와 같은 화면이 나옵니다. 전혀 당황하지 마세요. ^^ 워드프레스 홈페이지나 블로그에는 어떤 영향도 미치지 않습니다. 아래에 보이는데로 요소선택을 누르시고, 글이 작성되어 있는 컨텐츠 부분을 마우스 커서로 클릭해주세요. 반은 개발자 도구가 보이고 화면의 반은 블로그가 보이는데요. 블로그가 보이는 곳에 마우스를 가져가면 아래 그림처럼 선과 투명한 면들이 생깁니다. 거기서 컨텐츠 글부분을 선택하도록 마우스를 이리 저리 움직이다가 선택되면 클릭하시면 됩니다.

 

 

 

 

 

 

---

 

 

 

▼ 마우스로 선택했을 때의 모습입니다. 컨텐츠 부분만 선택해 줬습니다.

 

 

 

 

 

---

 

 

▼ 제대로 선택했다면 컨텐츠와 관련된 태그가 잡히게 됩니다. 여기서는 손볼게 없고, 컨텐츠 옆에 있는 스타일CSS 부분을 참조해야 합니다.

 

 

 

 

▼ 태그 바로 옆에 나오는 또다른 창이 스타일 창입니다. 조금만 아래로 내리면 아래 그림처럼 line-height 라는 부분이 나옵니다. body 부분의 줄간격을 수정할 수 있는 부분입니다. 마우스 커서를 숫자에 갖다대고 클릭하면 숫자를 수정할 수 있습니다. 거기서 30px을 50px로 수정하면  블로그의 컨텐츠 부분에 줄간격이 수정되어 나타나게 됩니다. 그런데 개발자 도구란? 실제 블로그에는 영향을 미치지 않고, 태그를 수정해 볼 수 있는 미리보기와 같은 것이지요. 그래서 수치를 아무리 조정해도 실제로 블로그에는 아무 영향도 미치지 않습니다. 다만 어디를 고쳐야 할지 알게 해주는 것입니다. 

 

고쳐야 할 부분은 custom-font.css 라는 문서에 포함되어 있는 line-height를 수정해 주면 된다는 것을 알려주는 것이죠. custom-fonts.css는 어디에 있나? 그걸 알고 싶다면 마우스로 custom 이라는 글자 부분에 올려보면 위치를 알려줍니다. 위치를 확인하고 나서 이제 FTP 프로그램을 실행시켜야 합니다.

 

 

 

 

 

▼ 저는 파일질라 라는 FTP 프로그램을 사용하는데요. 자신의 계정에 접속해서 WP-content에 들어갑니다. 그리고 나서 themes -> 자신의 테마이름 폴더 -> assets -> css 에 있다고 합니다. 파일 이름은 custom-fonts.css입니다. 이 파일의 위치는 아까 봤던 개발자 도구에서 확인한 것이죠? 저 파일을 내 컴퓨터로 내려받기 합니다.  

 

 

 

 

▼ 메모장이나 에디트플러스 등으로 열어봅니다. 이제 수정을 해야 할 차례입니다. 바디 부분에 있는 line-height를 찾아갑니다. 30px로 되어 있는 것을 50px로 고칩니다. (요건 저의 경우죠.... ㅎㅎ )

 

 

 

 

 

 

 저장을 한 후 이 파일을 FTP에 업로드 시킵니다. 그러면 이제 자신의 블로그에 가서 컨텐츠 부분이 바뀌어 있는지 확인해 봅니다. 저의 테마의 경우 이렇게 하면 바뀌었는데, 다른 테마의 경우에도 이렇게 수정되는지는 잘모릅니다. 다만, 개발자도구를 활용하는 법을 조금만 익히면 테마를 수정하는데 도움이 됩니다.