구글 블로그 글 간격 설정은 간단한데, post-body에서 해결이 안 될 때는 다른 방법으로 해결합니다.
구글 블로그를 처음 접하면서 어색했던 것은 글 간격이었습니다. 티스토리에서는 글 간격이 한가지입니다. 문장이 길어 다음 줄로 넘어가는 것과 문장을 끝내고 엔터를 해서 줄 간격을 만드는 것과 같습니다. 문단을 나누기 위해서는 문장이 끝난 상태에서 한 번 더 엔터로 줄 바꿈을 해서 표시를 해야 합니다.
이런 줄 간격은 네이버에서도 티스토리와 같습니다. 지금까지 문장이 길어 다음 줄로 넘어갈 때와 엔터를 해서 줄 간격을 넣었을 때도 같았기에, 구글 블로그로 넘어오면서 어떤 방법으로 글을 써야 하는지 어색했었는데요, 아직도 완전하게 편한 느낌은 아닙니다. 처음에는 게시판 한 줄 길이만큼 맞춰서 작성하기도 했는데, 결국은 어쩔 수 없이 신문 기사처럼 적다 보니 익숙해 갑니다.
글 간격은 엔터를 했을 때와 긴 문장을 그대로 작성하면서 다음 줄로 넘어갈 때와 간격이 너무 차이가 나고 또, 긴 문장이 다음 줄로 넘어갔을 때의 간격이 너무 좁아서 글을 읽기에 부담이 됩니다. 방문자 조금이라도 편하게 글을 읽기 위한 준비를 미리했어야 했는데 지금이라도 수정해 보겠습니다.
글 간격을 설정하는 곳은 HTML에서 수정합니다. 관리자 화면 테마에서 오른쪽 HTML 테마를 찾아서 들어가면 됩니다.
Ctrl + F로 post-body를 찾습니다. 여러 곳이 검색되지만 글 간격이 적용되는 곳은 이곳 한 곳뿐입니다. 1.5 em으로 되어 있는 것은 1.7 em으로 수정하고 저장을 눌러 게시판을 확인합니다. 테스트 블로그에서는 글 간격이 적용되는데, 실제 운영하는 블로그는 줄 간격이 변하지 않습니다. 분명히 추가되는 모든 기능은 테스트 블로그를 거쳤는데, 어디서 잘못되었는지 모르겠습니다.
그런데 지금 운영하는 이 블로그에서는 적용이 되지 않는 것은 여기 보이는. item-post .post-body 보다 우선해서 적용되는 코드가 들어가 있는 것으로 보입니다. 이런 것을 방지하기 위해 스킨이나 폰트 등을 적용할 때는 가능한 빠른 시간에 바꿔야 합니다. 지금 와서는 어떤 기능을 넣는 과정에서 잘못된 것인지 알 수 없고, 그렇다고 처음부터 스킨을 다시 적용하기에는 너무 많은 것을 만졌습니다. 그래도 해결해 보려고 몇 시간의 공을 들였는데, 결국 다른 방법으로 해결하고 말았습니다. 어떤 기능을 넣었을까요. 아무런 오류 없이 광고가 송출되기를 기대하면서 게시판 글 간격을 조절할 수 있는 다른 방법을 알려드립니다.
구글 블로그에서는 스킨 HTML 코드를 직접 수정해서 처리할 수도 있지만, 필요한 코드만 넣어서 처리할 수도 있습니다. 그 방법이 고급 기능을 사용해서 CSS 코드를 넣는 방법입니다.
지금까지 테마로 들어와서 사용한 것은 스킨 복원(스킨을 적용하는 것)과 그리고 HTML 편집을 이용하기 위해 역삼각형으로 들어갔습니다. 이제는 왼쪽 맞춤 설정으로 들어갑니다.
왼쪽 고급을 누르면 Theme Body, Theme Colors 그리고 CSS 추가가 있습니다. CSS 추가로 글 간격에 해당하는 코드를 넣겠습니다.
/* 글 간격 조절 */
.blog-post {
line-height:1.7em; /* 여기에 원하는 간격을 설정합니다. */
}
줄 간격 적용 전과 후의 결과입니다. 글 간격에 여유가 있으니 한결 편하게 보입니다.
이번에는 CSS 추가로 넣은 코드를 찾아봅니다. 앞선 CSS 추가 경로로 들어가면 적용된 코드는 보이지 않습니다. 위의 줄 간격 코드가 어디 있을까요.
가봐야 멀리 가지도 못합니다. 이곳은 스킨 HTML 편집으로 들어오면 아래에 저장되어 있습니다.
그리고 이 코드는 .blog-post 클래스가 존재하고 있으니 그 속에 line-height:1.7em; 이 코드만 추가해도 같은 결과가 나오겠습니다.
오늘은 구글 블로그 줄 간격을 설정하는 방법인데요, 간단한데 적용이 되지 않아 한참을 주물렀던 하루였습니다.