편집이 어려운 블로그스팟
구글 블로그인 블로그스팟을 사용한 지 꽤 시간이 흘렀지만, 여전히 익숙해지지 않는 부분들이 많습니다.
자유도는 높지만 기본 기능들이 그다지 친절하지 않아, 사용하면서 불편함을 느끼는 분들이 저뿐만은 아닐 것 같습니다.
블로그스팟에서 처음 글을 작성하던 날, 글자 크기를 어떻게 설정해야 할지, H태그를 어떤 방식으로 써야 할지 몰라 글을 난잡하게 작성했던 기억이 아직도 생생합니다.
하다하다, 다른 편집기에서 편집해서 블로그스팟 글쓰기 화면에 붙여넣는 방법도 여러가지 시도 했을 정도였습니다. .
블로그스팟의 편집기는 불친절합니다. 내가 원하는 모양을 뽑아내려면 공부해야할 것이 많습니다.
각 제목별 문단을 어떻게 다를 것인가?
블로그스팟에서 어느 정도 글을 작성해보신 분이라면, 각 제목과 문단 서식을 아래 메뉴에서 설정한다는 사실을 이미 알고 계실 것입니다.
이는 구글·네이버 SEO는 물론, 애드센스 승인에도 반드시 적용해야 하는 핵심 요소입니다.
 |
| 블로그스팟 제목 수준 설정 메뉴 |
각 항목을 조금 더 세부적으로 설명하면 다음과 같습니다.
주 제목은 H1, 제목은 H2, 부제목은 H3, 소제목은 H4에 해당합니다. 이 H1~H4 태그는 HTML에서 제목의 레벨을 구분하는 요소입니다.
여기에 한 가지 더 말씀드리면, 본문에서는 H1 태그를 사용하면 안 됩니다.
그 이유는 구글 블로그스팟의 글쓰기 화면에서 이미 ‘제목’란에 입력한 글 제목이 자동으로 H1 태그로 지정되기 때문입니다. 따라서 본문에 H1이 다시 등장하면 SEO 측면에서 감점 요인이 됩니다.
그래서 일반적으로 본문에서는 H2 태그부터 사용합니다. 각 문단의 제목은 블로그스팟 편집기의 ‘제목’ 옵션을 선택해 설정하면 되고, 이 경우 해당 제목은 자동으로 H2 태그가 적용됩니다. 지금 이 글 상단의 문단별 제목들도 모두 이러한 방식으로 지정한 것입니다.
문단 구조도 같은 원칙에 따라 설정하면 됩니다.
-
상위 문단의 제목은 ‘제목’(H2)
-
그보다 한 단계 아래는 ‘부제목’(H3)
-
더 세분화된 경우는 ‘소제목’(H4)
이와 같이 구조화하면 SEO와 가독성 모두에 유리한 문서 구조를 만들 수 있습니다.
- 블로그 글 제목(h1) : 초보자를 위한 블로그스팟 글 쓰기 노하우
- 제목((h2) : html 편집기 사용하기
- 부제목(h3) : html 편집기 메뉴 위치
- 부제목((h3) : html 편집기 기본 문법이해
- 소제목(h4) : <div> .... </div> 구문 이해
- 소제목(h4) : </br> 의 이해
- 제목(h2) : 인용구 활용하기
- 부제목(h3) : ......
h태그를 활용해도 보기좋은 간격을 벌린 문서를 만들기는 어렵습니다.
H태그를 활용하더라도 제목과 문단 사이의 간격을 일관되게 유지하기가 쉽지 않습니다. 글이 길어질수록 전체 가시성을 균일하게 맞추는 일이 점점 어려워지고, 특히 저처럼 문단 간 간격을 동일하게 유지하는 방식을 선호한다면 더더욱 신경 쓸 부분이 많아집니다.
문제는 한 번 간격이 어긋나기 시작하면, 글 전체를 다시 검토하고 간격을 조정하고 또 수정하는 반복 작업에 시간을 허비하게 된다는 점입니다. 상당히 비효율적이고 피로감도 큽니다.
게다가 엔터 키를 여러 번 눌러 간격을 벌리려 해도, 전혀 적용되지 않는 경우가 종종 있습니다. 이럴 때면 “구글 블로거는 왜 이렇게 기본 기능이 불친절할까”라는 생각이 들 수밖에 없습니다.
하지만, 각 제목과 윗 문장과의 간격을 쉽게 벌리는 방법이 있습니다.
<style>
/* 문단 간격 조정 (h태그와 본문 사이) */
h2 { margin-top: 80px; }
h3, h4, h5, h6 { margin-top: 60px; }
</style>
이 스타일을 제 블로그의 설정 영역 중 한 곳에 붙여넣기만 하면 적용이 완료됩니다.
먼저 결과물을 보여드린 뒤, 설정 방법을 순서대로 안내해드리겠습니다.
아래 캡처 화면은 해당 스타일을 적용하기 전 글이 표시되는 모습입니다.
보시는 것처럼 상단 박스와 그 아래 굵게 표시된 제목(H2) 사이의 간격이 좁아 전체적으로 답답한 인상을 주고 있습니다.
 |
| CSS 스타일을 적용하기 전 문단 띄워쓰기 |
CSS 스타일을 적용한 후 모습니다.
윗 상자와의 간격이 적당히 벌어져 있습니다.
 |
| CSS 스타일을 적용한 후 문단 띄워쓰기 |
그럼 이 CSS 스타일을 어디에 적용해야 되는 걸까요?이건 3가지 방법이 있습니다.
CSS 스타일 적용하는 방법
작성 글 자체에 설정하는 방법
가장 간단하고 손쉬운 방법입니다.먼저 HTML 보기 모드로 전환합니다.
아래 그림처럼 왼쪽 상단의 제목 바로 아래 연필 모양 아이콘을 클릭합니다.
/* 문단 간격 조정 (h태그와 본문 사이) */
h2 { margin-top: 80px; }
h3, h4, h5, h6 { margin-top: 60px; }
</style>
위의 스타일을 적용한 제 글의 html 보기 화면입니다.
 |
| html보기에서 css 스타일 적용하기 |
이 방법은 개별 글 마다 스타일을 적용하는 방식으로
하지만 단점이 있습니다. 매번 글 쓸때마다 적용해야하고,
추후에 바꾸고 싶으면 각 글마다 다시 들어가 하나씩 고쳐야 한다는 점입니다.
블로그스팟 레이아웃 메뉴에 가젯으로 추가하는 방법
위에서 설명한 방법보다는 조금 더 복잡하지만, |
| 구글 블로그 레이아웃 메뉴 위치 |
 |
| 가젯 추가 버튼 |
이 중에서 Html/자바스크립트 가젯(위젯)을 선택합니다.
 |
| 가젯추가 버튼 누르기 |
위의 HTML/자바스크립트를 선택하면 아래와 같은 창이 열립니다.
이 콘텐츠 란에 위에서 제가 공유드린 CSS Style을 복사해서 붙여넣어 주세요
 |
| 레이아웃 배치 위치 - 페이지 본문 섹션에 배치 |
블로그 테마 html 자체에 강제 입력하는 법
위에서 설명한 방법보다는 조금 더 복잡한 방법입니다.다만, 자신 없으시면 시도하시지 않는 것을 추천드립니다. 잘못 건드셔서 오류가 나면 뒷감당이 힘들 수 있습니다.
 |
| 블로그스팟 테마 수정 화면 |
]]></b:skin> 또는 </b:skin> 태그를 검색합니다.추가하려는 CSS 코드를 이 태그 바로 위에 붙여 넣으시면 됩니다.
b:skin 태그는 블로그스팟 템플릿의 주요 CSS 코드가 들어가는 영역의 끝입니다. 여기에 추가하면 기존 스타일에 덮어씌우는 사용자 정의 코드가 됩니다.
댓글 쓰기