편집이 어려운 블로그스팟
구글 블로그인 블로그스팟을 사용한지 시간이 꽤 지났지만, 아직 익숙해지지 않는 여러가지 면들이 있습니다.
자유도가 높은 대신, 기본적으로 제공하는 기능들이 친절하지 않은 느낌이다보니, 사용하면서 불편한 기분이 드는건 저뿐만이 아닐 것 같습니다.
처음 블로그스팟으로 글을 쓰던 그 날에 글자 크기를 어떻게 해야할지,
h태그는 어떤식으로 해야할지 알기 어려워 글을 엉망진창으로 썼던 악몽같던 기억이 새록 떠오릅니다.
블로그스팟의 편집기는 친절하지 않습니다. 세밀한 조정을 하려면 공부해야할 것이 많습니다.
각 제목별 문단을 어떻게 다를 것인가?
각 제목들과 문단들을 아래 메뉴에서 정한다는 것을 알고 계실 겁니다.
구글과 네이버 SEO 및 애드센스 승인을 위해 필수로 적용해야 하는 항목입니다.
 |
| 블로그스팟 제목 수준 설정 메뉴 |
- 주 제목은 h1
- 제목은 h2
- 부제목은 h3
- 소제목은 h4
이렇게 하면 그 제목은 h2태그가 부여됩니다.
- 블로그 글 제목(h1) : 초보자를 위한 블로그스팟 글 예쁘게 쓰기 노하우
- 제목((h2) : html 편집기 사용하기
- 부제목(h3) : html 편집기 메뉴 위치
- 부제목((h3) : html 편집기 기본 문법이해
- 소제목(h4) : <div> .... </div> 구문 이해
- 소제목(h4) : </br> 의 이해
- 제목(h2) : 인용구 활용하기
- 부제목(h3) : ......
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 코드가 들어가는 영역의 끝입니다. 여기에 추가하면 기존 스타일에 덮어씌우는 사용자 정의 코드가 됩니다.
댓글 쓰기