코딩의 능력이 너무 낮아서 기존 포스팅을 따라가기가 너무 어려웠습니다. 검색의 검색을 거듭한 끝에 블로그스팟의 목차를 만드는 방법을 알게 되었습니다. 물론 수동입니다.^^
저와 비슷한 분들이 있으실 것 같아서 수동이지만 목차를 만든 방법을 공유하도록 하겠습니다.
목차
블로그스팟에 목차를 사용해야 되는 이유
구글블로그인 블로그스팟에 목차를 사용해야 되는 이유는 SEO 점수를 올리기 위해서 입니다. SEO점수를 올리면 포스팅이 노출이 잘 될 확률이 높아지기 때문입니다. SEO를 모두 맞추는건 사실 어렵습니다. 해당 내용에 대한 정보도 매우 전문적이라서 접근이 어렵지만 그래도 알고 있는 SEO의 내용은 최대한 맞추는게 블로그의 질적 향상에 도움이 될 것입니다.
또한 목차를 사용하게 되면 사용자 입장에서 이 포스팅의 내용이 어떤 정보를 전달하고자 하는지 목차를 통해서 알게 됩니다. 그러므로 블로그스팟에서 포스팅을 할 때 목차를 적용한다면 포스팅의 노출에서도 도움이 되며, 사용자 입장에서도 사용성의 편리성을 높여주는 포스팅을 제공하게 되는 것입니다.
블로그 스팟에 목차를 반영하는 방법
서론에 언급 드렸다시피 저는 HTML 초보입니다. 그래서 소스를 심어서 반영하여 적용하는 방법을 시도해봤지만 생각보다 어려워서 포기하고 CSS도 저한테는 조금 많이 어려워서 정말 간단한 것 제외는 적용하기가 힘들었습니다.
그래서 저만의 초보적인 방법으로 목차를 만들게 되었습니다. 비록 수동이라 조금 힘들 수도 있지만 2~3번만 연습해보면 무척 간단한 방법이랍니다.
01. 완성작 예시
현재 포스팅에서 보여지고 있는 목차입니다.
이 목차도 제가 알려드린 방법으로 만든 것이니 참고해주시길 바랍니다.
02. 연필아이콘 클릭
블로그스팟의 글쓰기 화면에서 편집기에서 연필 아이콘을 클릭해주세요. 연필 아이콘은 가장 왼쪽에 위치하고 있습니다.
03. HTML 보기 클릭
연필 아이콘을 클릭하면 HTML보기와 새 글 작성 보기 2가지 중에 선택을 할 수 있는 창이 보입니다. HTML보기는 HTML소스를 입력하는 곳이고 새 글 작성 보기는 HTML이 적용된 화면이 보여지는 곳입니다.
HTML 보기를 클릭해줍니다.
처음에 글을 안 썼다면 빈 화면이 보일 것입니다. 글을 채우시고 했다면 HTML 소스가 보일 것입니다.
초보의 경우에는 빈 상태로 블로그스팟 목차 만드는 것을 시작하는 걸 추천합니다.
소스가 많을 경우에는 어디에 넣어서 만들어야 될지 무척 헷갈리기 때문입니다.
04. HTML 보기에 목차 만드는 소스를 붙혀넣기
목차를 만드는 HTML소스를 붙혀서 넣습니다. (
소스출처보기)
위에 해당 화면처럼 넣어주시면 됩니다.블로그스팟 목차 만드는 소스 코드입니다. 초록색 부연 설명 텍스트는 삭제하고 사용해주세요.
<details class="sp toc" open="">
<summary data-show="Show all" data-hide="Hide all">목차</summary> <목차를 열고 닫는 기능을 하는 것 같습니다. 목차 텍스트는 원하는 텍스트로 변경이 가능합니다. >
<div class="toC">
<ol>
<li><a href="#heading">Your_Heading</a></li> <목차의 1차 리스트를 만들어주는 소스입니다. >
...
...
...
</ol>
<!--[ Sample ToC with subheading ]--> <목차의 1차 리스트의 하위 목차를 만들어주는 소스입니다. >
<ol>
<li><a href="#heading">Your_Heading</a> <Your_Heading에 목차의 이름으로 변경해주세요 >
<ol>
<li><a href="#subHeading">Sub_Heading_1</a></li> <Sub_Heading_1에 2차 하위 목차의 이름으로 변경해주세요 >
...
...
...
</ol>
</li>
</ol>
</div>
</details>
05. 블로그스팟 목차 화면 확인하기
위의 소스를 HTML보기에 넣고 새 글 작성 보기 화면으로 돌아왔을 때 보여지는 화면입니다.
1차 목차 리스트만 나열되는 곳과 2차 하위 목록까지 나열되는 목차 2가지 형태 중에서 내가 필요한 형태로 사용하시면 됩니다.
여기까지만 작성해도 목차를 만드는 것은 완료가 됩니다. 하지만 저는 한 가지 기능을 더 추가하였습니다. 목차 제목을 클릭했을 때 해당 컨텐츠 내용으로 이용하는 기능입니다.
이것도 무척 간단하기 때문에 잘 따라오세요
06. 목차 제목 클릭 시 해당 컨텐츠로 이동시키기
블로그스팟의 목차 제목을 클릭했을 때 해당 컨텐츠로 이동시키기 위해서는 소스를 하나 더 추가하면 됩니다. 해당 목차에 제목에 <id=' '>를 추가해주면 됩니다.
목차 제목 클릭 시 컨텐츠로 이동시키는 HTML소스
<h2 id='heading'>Your_Heading</h2>
<h3 id='subHeading'>Sub_Heading_1</h3>
새 글 작성 보기 화면에서 제목 텍스트를 주 제목, 제목, 부제목, 소 제목으로 설정해주고 난 다음 HTML을 보면 해당 텍스트 앞에 h1, h2, h3, h4이 붙어있는 걸 확인할 수 있습니다.
그럼 우리는 HTML에서 위의 소스처럼 <id=' '>를 추가해줍니다.
그리고 위에 목차 HTML에서 <a href="#subHeading">의 subHeading의 이름을 id에 넣은 이름과 맞춰줍니다.
예시로 보여드리면
<li><a href="#H2_1">Your_Heading</a></li>
<h3 id='H2_1'>Sub_Heading_1</h3>
위의 소스의 빨간색으로 표시된 부분처럼 동일하게 맞춰주면 목차를 클릭했을 때 해당 컨텐츠의 위치로 이동하게 만들어지는 겁니다.
블로그스팟에 목차 반영한 결과물 확인
블로그스팟에 목차를 반영한 결과물을 확인 하실려면 해당 포스팅의 목차 제목을 클릭해보세요
그럼 해당 컨텐츠의 위치로 이동합니다.
초보인 저도 할 수 있으면 여러분도 할 수 있습니다.
블로그스팟의 목차 만드는 방법 잘 따라오셔서 꼭 해내시길 바랍니다.
