구글 블로그를 만들었습니다, 구글 블로그를 하기까지는 많은 사연이 있습니다. 상황이 만족한다면 굳이 구글 블로그까지 엮을 이유는 전혀 없는 플랫폼입니다. 하지만 어쩔 수 없는 도피처로 구글 블로그를 개설했고 투덜거리며 발행하면서 그 불편함도 익숙해졌던 기억이 있는 구글 블로그입니다.
목록
1. 많은 사람이 불편을 토로하는 구글 블로그
2. 구글 블로그 글 간격 현황
3. 구글 블로그 줄 간격(행간) 조절 코드 넣기(위치 중요)
4. 글 블로그 본문 글자와 제목 H 태그 크기 수정
5. 분명 글자 크기를 수정했는데, 다음 날 쓴 글이 다시 작아지는 원인과 해결방법
6. 구글 블로그 이미지 삽입 시 원본 크기 기본 설정 시도
1. 많은 사람이 불편을 토로하는 구글 블로그
구글 블로그는 티스토리, 네이버 블로그를 경험했다면 결코 몸담고 싶은 곳은 아닙니다. 아마도 대부분의 블로거는 이런 심정일 겁니다. 하지만 어쩔 수 없는 상황에서 구글 블로그를 해야 한다면, 실제로 글을 몇 번 발행하다 보면 차츰 환경에 익숙해지더군요. 구글 블로그에서 가장 불편한 몇 가지 중 당장에 수정해야 하는 것은 줄 바꿈과 첨부 이미지 크기를 항상 원본 크기로 수정해야 하는 불편입니다. 이걸 수정하는 방법을 알아봅니다,
2. 구글 블로그 글 간격 현황
구글 블로그 글 간격(행간)은 네이버나 티스토리에서 익숙한 한국인에게는 어색합니다. 네이버 티스토리에서 본문 글 바꿈은 글이 길어서 줄 바꿈이 될 때와 엔터로 줄 바꿈이 될 때의 간격이 같습니다. 이런 상황에 익숙해지고 있죠. 그래서 문단 바꿈을 할 때는 한 번 더 엔터를 눌러 줄이 길어 다음 줄로 넘어갈 때 간격과 구분하고 있죠.
그런데 구글 블로그의 줄 바꿈은 상황이 다릅니다. 글이 길어 다음 줄로 넘어갈 때는 별도의 줄 바꿈 없이 그냥 글자가 나열되고 엔터를 하면 그때야 간격이 생깁니다. 마치 영어 지문을 보는 것 같습니다. 아마도 하나의 문단에는 같은 내용이기에 같은 단락으로 구성하는 것 같아요. 그래서 한국인에게 보기 편하게 줄 바꿈을 수정해 보겠습니다.
먼저 소개하는 스킨은 Sora SE0 2 Premium Version입니다. 유료 버전인데요, 무료 버전과 내용에서 차이는 없습니다. 그리고 줄 간격이나 폰트 크기 등은 기본적인 설정으로 다른 스킨과 크게 다르지 않을 겁니다. 참고하세요.
3. 구글 블로그 줄 간격(행간) 조절 코드 넣기(위치 중요)
구글 블로그에서 줄 바꿈 간격은 .post-body p에서 설정합니다. 그런데 이런 선택자는 없다고 합니다. 그리고 지금은 해당 스킨을 에디터툴에서 올렸는데, 구글 블로그에서 열어야 합니다. 어차피 그곳에서 수정해야 적용이 되니까요.
참고로 구글블로그 HTML로 들어가는 경로입니다. 구글 블로그 왼쪽 메뉴 중 테마 / 오른쪽 HTML 편집을 누릅니다.
앞서 해당 줄바꿈 설정은 없는 것으로 확인되었기에 검색없이 줄간격 조정 코드를 넣습니다.
/* 줄간격 조정 */
.item-post .post-body p {
margin: 0 0 15px;
line-height: 2.1em;
}
이미지에서는 줄 간격이 1.5 em이지만 실제는 2.1 em으로 넓혔습니다. 스타일이 모여있는 곳에 넣으면 됩니다만, 알기 쉽게 item-post .post-body{ 이 아래 넣습니다. 구글 블로그의 스킨은 HTML과 CSS가 하나로 합쳐진 XML 파일입니다. 스타일을 넣는 위치는 CSS 구간에 넣어야 하죠. CSS와 HTML로 분리된 티스토리 등에서는 CSS 맨 아래에 넣으면 되지만, 구글 스킨에서 추가하는 코드는 위치를 확인해야 합니다.
4. 글 블로그 본문 글자와 제목 H 태그 크기 수정
그리고 결과를 확인하니 본문 글자가 너무 작아 글자 크기도 키웁니다.
/* 줄간격 조정 */
.item-post .post-body p {
margin: 0 0 15px;
line-height: 2.1em;
font-size: 17px;
}
이 정도 크기면 시원하게 볼 수 있습니다.
또 이렇게 본문 글자를 키우다 보니 이번에는 부제목 글자가 작아 보이네요. 부제목 글자는 여기서 조절합니다. h2, h3 등으로 검색해서 원하는 크기로 수정하면 됩니다.
.post-body h4{
font-size:19px
}
처음 부제목 글자 크기는 18px 인데요, 19px 로 키웠습니다. 한 끗 차이로는 달라 보이지 않는데 20px로 키울까요, 선택입니다. 이렇게만 수정해도 포스팅 보는 것이 훤해졌습니다. 작성할 때마다 줄 간격에 신경을 썼는데요, 이제는 익숙한 티스토리나 네이버처럼 손 가볍게 글을 발행할 수 있습니다.
5. 분명 글자 크기를 수정했는데, 다음 날 쓴 글이 다시 작아지는 원인과 해결방법
그리고 다음 포스팅을 발행했는데, 앞선 포스팅과는 달리 글자 크기가 이전과 변하지 않는 작은 글자네요. 왜 이럴까요. 하나는 글자가 변했고, 뒤에 작성한 포스팅의 글자는 css를 수정하지 않은 작은 글자로 나오는데, 어디가 문제일까요.
이 문제는 결과 해결방법을 바로 알려드리겠습니다.
개발자 도구로 텍스트를 감싸고 있는 태그를 확인합니다. 구글 블로그에서 본문이 항상 <p>로만 구성되어있지 않습니다. 이건 줄 바꿈을 자세히 보면 마우스 클릭 하나만 줄 바꿈이 된 게 있고, 클릭 한 번 하고 조금 더 벌어진 곳이 있는데요, 이 차이가 <p>, <div>의 간격 차이입니다. 지금 확인해 보니 이번 포스팅은 <div>로 감싸고 있습니다. 그러면 코드를 수정해야겠죠.
/* 줄간격 조정 */
.item-post .post-body p,
.item-post .post-body div {
margin: 0 0 15px;
line-height: 1.5em;
font-size: 17px;
}
6. 구글 블로그 이미지 삽입 시 원본 크기 기본 설정 시도
구글 블로그에도 이미지 라이트 박스라는 기능이 있습니다. 큰 이미지를 올리면 알아서 게시판 크기에 맞춰 줄어들고, 클릭하면 확대되는 기능입니다. 이 기능은 최근 사이트에서는 기본으로 들어있습니다. 그래도 게시판 섬네일로 작게 보이는 것보다는 포스팅을 방문했을 때 한눈에 이해할 수 있는 크기로 채워져 있는 것이 방문자의 관심을 끌기에 유리합니다.
구글 블로그에서 라이트 박스 기능이 제대로 발휘하기 위해서는 원본 크기로 수정해야 합니다. 이미지 넣을 때마다 손이 가야 한다는 거죠. 원본 크기로 설정해야 이미지를 클릭했을 때 화질이 깨지지 않는 선명한 고화질로 확대됩니다.
그런데 처음부터 이미지를 원본 크기로 넣는 것을 기본 설정으로 만들 수는 없을까요.
구글 블로그에 이미지를 넣었습니다. 기본 설정은 중간 크기로 지정되어있습니다. 항상 이미지 크기를 원 크기로 수정해서 발행했습니다. 이것을 어예 처음부터 원본 크기로 지정되게 할 수 없을까요.
이미지를 넣으면 항상 원본 크기로 지정되는 코드를 넣었습니다. 위치는 앞선 글자 크기를 수정했던 .item-post .post-body p{ 이 아래 넣었습니다. 나중에도 관련 코드를 쉽게 확인할 수 있겠죠.
/* 첨부 이미지 원본 크기 */
.post-body img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 15px auto;
}
그리고 이미지를 넣었는데 이전과 아무런 변화가 없습니다. 안 되네요.
그래서 구글 블로그 실제 올려진 이미지 태그를 확인해 봅니다.
구글 블로그 이미지 태그는 복잡합니다. 실제 크기를 알려주고, 섬네일로 축소된 이미지 크기를 보여줍니다. 이렇게 축소된다는 거죠, 이 내용을 요약하면 이렇습니다.
<img
data-original-height="419"
data-original-width="557"
height="241"
width="320"
src=".../s320/7.jpg"
/>
실제 원본 이미지 크기 557*419 파일을 화면에 표시되는 실제 크기 width="320", height="241": 로 변해 있습니다. 이건 일반적인 구글 블로그 이미지 처리방식인데요, 위에서 원본 크기를 고정하는 코드를 넣었지만 적용되지 않았습니다. 그 외 다른 몇 가지 스크립터도 넣었는데 전혀 변화가 없네요. 아쉽지만, 구글 블로그 이미지 삽입 원본 크기 지정은 현재로는 처리하는 방법을 찾지 못했습니다. 구글 블로그에서 이미지 삽입 시에는 번거롭지만, 항상 이미지 원본 크기로 설정하는 것을 잊지 말아야 합니다.
오늘은 그동안 구글 블로그의 고질적인 문제인 본문 줄 간격(행간)과 글자 크기를 수정하는 방법을 알아보았고, 더불어 이미지 삽입 시 원본 크기를 기본으로 설정하는 것은 찾지 못했습니다. 아쉽네요.
0 댓글