반응형
블로그에 목차가 필요해?
우선 가장 중요한 의문은 애초에 블로그 목차가 필요한가 하는 것입니다.
이 의문에 대한 대답은 ′기사에 의한다′입니다.
예를 들어 500자 정도로 정리하고 있는 시사 뉴스라면 목차는 필요 없고, 글자 수가 많아서 제목도 많이 사용하고 있는 기사에서는 목차가 필요합니다.
기사의 전모를 간단히 확인할 수 있다
기사에 목차를 마련함으로써 지금부터 읽고자 하는 기사가 어떤 것이 적혀 있는 기사인지 쉽게 독자에게 알릴 수 있습니다.
목차만 있을 뿐
부담없이 읽을 수 있는 기사인지 아닌지
궁금한 점에 대해 자세히 설명되어 있는 기사인지 아닌지
정말 알고 싶은 정보가 적혀 있는지 없는지
를 기사 첫머리에 전달할 수 있습니다.
하지만 반면 목차를 보고 궁금한 내용이 적혀 있지 않다는 것을 알게 된 경우 즉시 이탈해 버릴 가능성이 있습니다.
물론 블로그 운영자 입장에서는 목차 유무에 관계없이 끝까지 꼼꼼히 읽어줬으면 하는 마음이 강할 것입니다.
그러나 그것을 신경 쓰고 사용자의 편리성을 무시하면 SEO 평가에 악영향을 미칠 수 있습니다.
독서에 필요한 콘텐츠′도 중요한데, 그 콘텐츠 안에 사용자 편의성(사용자 경험)도 포함되어 있다고 합니다.
그러므로 목차의 영향으로 즉시 이탈될 가능성을 고려하더라도 사용자를 생각해서 목차를 설치해 주는 것은 중요합니다.
알고 싶은 항목만 읽게 하다
정리기사 등 1만 자를 훌쩍 넘는 볼륨이 매우 큰 기사의 경우 기사의 처음부터 끝까지 모두 읽히는 경우는 그리 많지 않습니다.
대부분의 사람들은 중간에 집중력이 떨어져서 흘려 읽는 것 외에 정말 궁금한 것이 써 있는 장소가 어딘지 모르는 문제가 발생하게 됩니다.
예를 들면 「하테나 블로그의 평판을 알고 싶은 사람」이 「하테나 블로그의 모든 것이 정리되어 있고, 후반에 평판도 정리되어 있는 수만 글자의 기사」에 접속했다고 합시다.
이 경우 독자들이 가장 알고 싶은 것은 훌륭한 블로그의 평판이지만, 목차가 없으면 어디에 평판이 정리되어 있는지 알 수 없는, 오로지 스크롤하여 쓸데없는 시간을 쓰게 됩니다.
그러나 목차가 있으면 어디에 평판에 관한 것이 적혀 있는지 알 수 있고, 목차에 맞춰져 있는 링크를 클릭·탭하는 것만으로 평판이 적혀 있는 장소로 이동할 수 있습니다.
리치 스니펫에 반영될 수 있다
목차를 설정함으로써 Google 검색 결과에 ′OO로 이동′이나 표제명이 추가된 리치 스니펫이 될 수 있습니다.
이를 통해 다른 검색 결과와 비교하여 차별화할 수 있기 때문에 약간이나마 우위를 점할 수 있습니다.
다만 목표 설정하면 절대 입지하는 별로 반영되냐면 그렇지 않습니다.검색 키워드에 따라서는 전혀 표시되지 않는 경우도 많으며, Google 알고리즘이 목차의 일부를 표시해서는 안 된다고 판단한 경우에는 다른 페이지의 디스크립션에는 목차가 포함되어 있더라도 자신의 페이지(기사)에는 표시되지 않을 수 있습니다.
검색 결과에 반영되지 않는 경우는 많지만, 목차가 없는 경우에는 표시될 기회가 절대로 없기 때문에 사용자에 대한 배려·SEO 어느 관점에서도 목차를 설치해 두는 것은 중요합니다.
하테나 블로그 목차 만드는 법
하테나 블로그에 목차를 설치하는 장점에 대해 어느 정도 이해할 수 있었을까요?그럼 바로 테나 블로그에서 목차를 만드는 방법을 해설해 보겠습니다.
표제를 설정하다
하나의 블로그에서 목차를 작성하려면 제목이 필요합니다.
기사 내에 표제어가 없는 경우 편집 화면 왼쪽 상단의 [표제어]를 클릭하여 표제어를 추가하십시오.
아니면 표제어로 설정하고 텍스트를 선택한 후 [Shift+Alt+2키]를 누르면 표제어 설정이 가능합니다.
헤드라인을 설정한 후 헤드라인을 삽입하려는 위치에 빈 행을 만들고 텍스트 커서를 맞춥니다.
커서 맞추면 텍스트 영역 상의 버튼군에 있는 목차 아이콘을 클릭합니다.
그러면 커서 맞추던 자리에 ′[:contents]′라는 항목이 추가되었을 것입니다.
기사가 읽혔을 때 [:contents]가 있는 곳에 기사 내 표제에 따라 목차가 작성되게 됩니다.
시험삼아 미리보기 표시해보시면 목차가 추가되었는지 확인하실 수 있을 겁니다.
이렇게 훌륭한 블로그에서는 표제어만 설정해 두면 간단하게 목차를 작성할 수 있게 되어 있습니다.
대제목만 목차로 하는 것은 기본적으로 할 수 없다
헤드라인이 많으니까 헤드라인만 목차화하고 싶은 것도 있겠죠.하지만 일반적인 목차 작성 방법으로는 대제목만의 목차를 작성할 수 없습니다.
하지만 그것은 어디까지나 통상적인 작성 방법이며, 조금 특이한 방식으로 하면 대제목만의 목차를 하나의 블로그에서 작성하는 것이 가능합니다.
방법에 대해서는 후술하는 「하테나 블로그의 목차 디자인의 커스터마이즈 방법」의 후반에 소개하고 있습니다.
하트나 블로그 목차 디자인 커스터마이징
지금부터는 목차 디자인을 커스터마이징하는 방법에 대해 알아보겠습니다.커스터마이징 하는 방법은 이해하면 쉽지만 처음 만지는 경우는 다소 어렵습니다.
커스터마이징 시 CSS라는 언어를 사용하는데 모르는 경우 기사 내에 소개하고 있는 CSS를 통째로 복사하도록 하십시오.
한 글자라도 빠지면 정상적으로 동작하지 않기 때문에 복사 오류도 조심합시다.
블로그 디자인을 커스터마이징하는 방법
목차 디자인을 커스터마이즈함에 있어 CSS를 편집하는 화면을 알아둘 필요가 있습니다.
먼저, 하테나 블로그 관리 화면의 왼쪽 메뉴에 있는 「디자인」을 선택합니다.
다음으로 [변경사항 저장하기] 아래에 있는 스패너 아이콘을 클릭합니다.
표시된 항목 중에 [디자인CSS]가 있으므로, 그것을 클릭하면 CSS를 편집할 수 있는 화면이 표시되어 CSS에 의한 디자인의 커스터마이징을 실시할 수 있습니다.
처음부터 조금 쓰여져 있는 것이 있습니다만, 이것들은 삭제하지 않도록 해 주세요.
추가된 내용에 따라 기존 디자인이 무너질 수 있습니다.
목차 커스터마이징용 CSS 소개
그럼 바로 목차 외형을 변경할 수 있는 CSS를 소개하겠습니다.모두 카피 페이스트만으로 사용할 수 있기 때문에, 마음에 드는 것이 있으면 시도해 보십시오.
바깥 테두리의 모서리를 둥글게 하다
이 코드에서는 바깥쪽 테두리를 둥글게 하고 테두리를 파란색으로 변경할 수 있습니다.
.table-of-contents {
padding: 15px10px15px35px; /* 테두리 내 여백(상우하좌) */
font-size: 100%; /*글자크기 */
border : solid 2px #7DB4EC; /* 선의 종류와 색상 */
background:#f7f7f7; /* 背景 */
border-radius : 8px;/* 숫자가 클수록 둥글어짐*/
}
.table-of-contents:before {
content: ′목차′;
font-size: 110%;
font-weight:bold;/* 글자 굵기 보통 normal */
color:#000; /* 글자색*/
}
매우 심플한 코드이기 때문에 색상 변경 방법만 알면 자유롭게 테두리 색상이나 목차 배경 색상을 변경할 수 있습니다.
리스트 아이콘을 변경하다
하테나 블로그 목차에서는 넘버링되지 않고 그냥 목록으로 표시됩니다.
여기 CSS를 도입하면 대제목과 소제목이 넘버링되게 되어 목차가 보기 쉬워집니다.
.table-of-contents {
margin-left: 0;
padding: 15px10px15px35px; /* 테두리내 여백(상우하좌) */
font-size: 100%; /*글자크기 */
border : dotted 1px#777; / * 선의 종류와 색상 */
background:#f7f7f7; /* 背景 */
}
.table-of-contents:before {
content: ′목차′;
font-size: 110%;
font-weight:bold;/* 글자 굵기 보통 normal */
color:#000; /* 글자색*/
}
/*대제목*/
.table-of-contents li{
font-weight:bold; /* 通常はnormal */
list-style-type:decimal; /* 마크 종류 */
}
/*중제목*/
.table-of-contents li ul li{
margin-left:20px;
font-weight:normal;
list-style-type:disc;
}
/*소제목*/
.table-of-contents li ul li ul li{
list-style-type:lower-latin;
}
대제목이 넘버링되는 것만으로 독자가 ′이 기사의 볼륨은 얼마나 되는지′를 판단하기 쉬워지기 때문에 매우 추천하는 커스터마이징입니다.
다른 어떤 커스터마이징보다 최소한 이 커스터마이징만 해두면 사용성이 향상될 것입니다.
목차를 그래피컬하게 돋보이게 하다
하테나 블로그 목차는 좋지도 나쁘지도 수수합니다.
좀 더 세련된 디자인으로 하고 싶은 경우는 이 코드를 사용할 수 있습니다./*목차 디자인 변경*/
.entry-content .table-of-contents {
position:relative;
margin-left: 0;
padding: 15px10px15px35px; /* 테두리내 여백(상우하좌) */
font-size: 100%; /* 글자크기 */
font-weight:bold;
list-style-type:decimal;/*숫자 이외가 좋으면 변경*/
background:#fff;
border-top: 40px solid #90caf3; /* ′이 기사의 목차′ 주위의 색상 */
border-left : 2px solid #90caf3; /* 선굵기 */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;
line-height: 200%; /* 행간 */
border-radius: 3px; /* 사각원형으로 하지 않을 경우 불필요 */
color:#444; /* 숫자 (마크색상 변경) */
}
/*′이 기사 목차′ 주위 변경*/
.entry-content .table-of-contents::before {
font-family: ′blogicon′;
content: ′ 039 이 기사의 목차′;
display: block;
font-size: 130%;
font-weight: bold;
position: absolute;
top: -40px;/*위로부터의 위치조정*/
left: 0px; /*왼쪽부터의 위치조정*/
color: #fff !important;
}
/*링크 색상 변경 및 밑줄 지우기*/
.entry-content .table-of-contents li a{
color:#444; /* 목차 리스트 부분의 텍스트 색상 */
text-decoration : none; /* 링크 밑줄 치고 싶지 않은 경우 */
}
목차 부분에 아이콘이 붙어 약간의 서적 목차와 같이 할 수 있기 때문에 이 방법도 추천합니다.
대제목만의 목차를 작성하는 방법
하나의 블로그 목차는 기사 내에 있는 표제어 모두를 사용해 작성되기 때문에 목차 삽입 설정에서 대제어만의 목차를 만들 수 없습니다.
원래 목차 설정이 존재하지 않기 때문에 목차를 커스터마이징하려면 CSS를 편집할 수밖에 없습니다.
만약 대제목만의 목차를 만들고 싶다면 아래의 CSS를 디자인 커스터마이징에서 추가해 주세요.
ul.table-of-contents > li > ul {
display: none;
}
이것으로 대제목만의 목차를 작성할 수 있습니다.
특정 기사만 대제목만을 작성하는 방법
앞의 방법은 모든 기사의 목차 영향을 미치기 때문에 일부 기사만 소제목을 포함한 목차를 작성하고자 하는 장면에 대응할 수 없습니다.
그런 경우 디자인 커스터마이징에 CSS를 추가하는 것이 아니라 기사마다 CSS를 추가합니다.
우선 투고 편집 화면의 [HTML 편집]을 선택합니다.
다음으로 텍스트 부분 말미에 아래의 CSS를 추가해 주세요.
이와 같이 기사마다 CSS를 개별 설정할 수도 있기 때문에 특정 기사만 대제목만의 목차를 작성하는 것이 가능합니다.
이쪽의 방법을 사용하는 경우는, 디자인의 커스터마이즈 CSS에서, 대제목만의 목차를 작성하는 코드는 삭제해 두어 주세요.
목차 디자인을 커스터마이징할 때 주의할 점
세련된 목차에 생겼다! 하지만 역시 멋진 제목으로 바꾸고 싶을 때가 있겠죠.
이럴 때는 반드시 이전에 추가했던 목차 CSS를 삭제한 후 새로운 CSS를 추가하도록 하십시오.
그렇게 하지 않으면 여러 CSS가 경쟁하게 되어 디자인이 무너질 수 있습니다.
CSS에 관해 지식이 있다면 자력으로 해결할 수 있지만 이미 완성된 것을 복사 페이스트 하고 있을 뿐 쓰는 법을 모르는 사람이라면 자력으로 수정하는 것은 우선 불가능할 것입니다.
그래서 최소한 자신만으로도 알 수 있도록 어디서부터 어디까지가 목차 CSS인지 알 수 있도록 해 두세요.
개행을 늘려서 알기 쉽게 하다
코멘트를 달다
자신이 알 수 있는 방법이라면 다른 방법을 사용해도 문제 없습니다.
코멘트를 넣는 경우는사이에 텍스트를 넣는 것으로 코멘트화할 수 있습니다.
이전에 삽입한 CSS를 삭제하는 것은 중요하다고 알고 있어도 삭제해서는 안 되는 다른 시리즈를 삭제해 버리면 본전도 없기 때문에 사고가 일어나지 않도록 대책을 세워 둡시다.
정리
블로그에 있어서의 목차는 「없어서 곤란한 것은 없지만, 있으면 편리하다」라고 하는 가려운 곳에 손이 닿는 컨텐츠의 하나입니다.
그런데 블로그에서는 한 기사 한 기사 목차를 설정해야 하기 때문에 이미 공개한 기사에 목차를 매기는 경우는 조금 힘듭니다.
하지만 그러한 작은 대처가 유저에게 도움이 될 수 있기 때문에, 기사에는 표제어를 설정해 목차를 설정하는 것이 좋습니다.
목차의 사용법이나 설치 방법에 따라서는 평균 체류 시간이 오르는 등 변화가 일어날 가능성도 있으므로, 액세스 해석을 하면서 목차 효과를 검증하는 것을 추천합니다.
우선 가장 중요한 의문은 애초에 블로그 목차가 필요한가 하는 것입니다.
이 의문에 대한 대답은 ′기사에 의한다′입니다.
예를 들어 500자 정도로 정리하고 있는 시사 뉴스라면 목차는 필요 없고, 글자 수가 많아서 제목도 많이 사용하고 있는 기사에서는 목차가 필요합니다.
기사의 전모를 간단히 확인할 수 있다
기사에 목차를 마련함으로써 지금부터 읽고자 하는 기사가 어떤 것이 적혀 있는 기사인지 쉽게 독자에게 알릴 수 있습니다.
목차만 있을 뿐
부담없이 읽을 수 있는 기사인지 아닌지
궁금한 점에 대해 자세히 설명되어 있는 기사인지 아닌지
정말 알고 싶은 정보가 적혀 있는지 없는지
를 기사 첫머리에 전달할 수 있습니다.
하지만 반면 목차를 보고 궁금한 내용이 적혀 있지 않다는 것을 알게 된 경우 즉시 이탈해 버릴 가능성이 있습니다.
물론 블로그 운영자 입장에서는 목차 유무에 관계없이 끝까지 꼼꼼히 읽어줬으면 하는 마음이 강할 것입니다.
그러나 그것을 신경 쓰고 사용자의 편리성을 무시하면 SEO 평가에 악영향을 미칠 수 있습니다.
독서에 필요한 콘텐츠′도 중요한데, 그 콘텐츠 안에 사용자 편의성(사용자 경험)도 포함되어 있다고 합니다.
그러므로 목차의 영향으로 즉시 이탈될 가능성을 고려하더라도 사용자를 생각해서 목차를 설치해 주는 것은 중요합니다.
알고 싶은 항목만 읽게 하다
정리기사 등 1만 자를 훌쩍 넘는 볼륨이 매우 큰 기사의 경우 기사의 처음부터 끝까지 모두 읽히는 경우는 그리 많지 않습니다.
대부분의 사람들은 중간에 집중력이 떨어져서 흘려 읽는 것 외에 정말 궁금한 것이 써 있는 장소가 어딘지 모르는 문제가 발생하게 됩니다.
예를 들면 「하테나 블로그의 평판을 알고 싶은 사람」이 「하테나 블로그의 모든 것이 정리되어 있고, 후반에 평판도 정리되어 있는 수만 글자의 기사」에 접속했다고 합시다.
이 경우 독자들이 가장 알고 싶은 것은 훌륭한 블로그의 평판이지만, 목차가 없으면 어디에 평판이 정리되어 있는지 알 수 없는, 오로지 스크롤하여 쓸데없는 시간을 쓰게 됩니다.
그러나 목차가 있으면 어디에 평판에 관한 것이 적혀 있는지 알 수 있고, 목차에 맞춰져 있는 링크를 클릭·탭하는 것만으로 평판이 적혀 있는 장소로 이동할 수 있습니다.
리치 스니펫에 반영될 수 있다
목차를 설정함으로써 Google 검색 결과에 ′OO로 이동′이나 표제명이 추가된 리치 스니펫이 될 수 있습니다.
이를 통해 다른 검색 결과와 비교하여 차별화할 수 있기 때문에 약간이나마 우위를 점할 수 있습니다.
다만 목표 설정하면 절대 입지하는 별로 반영되냐면 그렇지 않습니다.검색 키워드에 따라서는 전혀 표시되지 않는 경우도 많으며, Google 알고리즘이 목차의 일부를 표시해서는 안 된다고 판단한 경우에는 다른 페이지의 디스크립션에는 목차가 포함되어 있더라도 자신의 페이지(기사)에는 표시되지 않을 수 있습니다.
검색 결과에 반영되지 않는 경우는 많지만, 목차가 없는 경우에는 표시될 기회가 절대로 없기 때문에 사용자에 대한 배려·SEO 어느 관점에서도 목차를 설치해 두는 것은 중요합니다.
하테나 블로그 목차 만드는 법
하테나 블로그에 목차를 설치하는 장점에 대해 어느 정도 이해할 수 있었을까요?그럼 바로 테나 블로그에서 목차를 만드는 방법을 해설해 보겠습니다.
표제를 설정하다
하나의 블로그에서 목차를 작성하려면 제목이 필요합니다.
기사 내에 표제어가 없는 경우 편집 화면 왼쪽 상단의 [표제어]를 클릭하여 표제어를 추가하십시오.
아니면 표제어로 설정하고 텍스트를 선택한 후 [Shift+Alt+2키]를 누르면 표제어 설정이 가능합니다.
헤드라인을 설정한 후 헤드라인을 삽입하려는 위치에 빈 행을 만들고 텍스트 커서를 맞춥니다.
커서 맞추면 텍스트 영역 상의 버튼군에 있는 목차 아이콘을 클릭합니다.
그러면 커서 맞추던 자리에 ′[:contents]′라는 항목이 추가되었을 것입니다.
기사가 읽혔을 때 [:contents]가 있는 곳에 기사 내 표제에 따라 목차가 작성되게 됩니다.
시험삼아 미리보기 표시해보시면 목차가 추가되었는지 확인하실 수 있을 겁니다.
이렇게 훌륭한 블로그에서는 표제어만 설정해 두면 간단하게 목차를 작성할 수 있게 되어 있습니다.
대제목만 목차로 하는 것은 기본적으로 할 수 없다
헤드라인이 많으니까 헤드라인만 목차화하고 싶은 것도 있겠죠.하지만 일반적인 목차 작성 방법으로는 대제목만의 목차를 작성할 수 없습니다.
하지만 그것은 어디까지나 통상적인 작성 방법이며, 조금 특이한 방식으로 하면 대제목만의 목차를 하나의 블로그에서 작성하는 것이 가능합니다.
방법에 대해서는 후술하는 「하테나 블로그의 목차 디자인의 커스터마이즈 방법」의 후반에 소개하고 있습니다.
하트나 블로그 목차 디자인 커스터마이징
지금부터는 목차 디자인을 커스터마이징하는 방법에 대해 알아보겠습니다.커스터마이징 하는 방법은 이해하면 쉽지만 처음 만지는 경우는 다소 어렵습니다.
커스터마이징 시 CSS라는 언어를 사용하는데 모르는 경우 기사 내에 소개하고 있는 CSS를 통째로 복사하도록 하십시오.
한 글자라도 빠지면 정상적으로 동작하지 않기 때문에 복사 오류도 조심합시다.
블로그 디자인을 커스터마이징하는 방법
목차 디자인을 커스터마이즈함에 있어 CSS를 편집하는 화면을 알아둘 필요가 있습니다.
먼저, 하테나 블로그 관리 화면의 왼쪽 메뉴에 있는 「디자인」을 선택합니다.
다음으로 [변경사항 저장하기] 아래에 있는 스패너 아이콘을 클릭합니다.
표시된 항목 중에 [디자인CSS]가 있으므로, 그것을 클릭하면 CSS를 편집할 수 있는 화면이 표시되어 CSS에 의한 디자인의 커스터마이징을 실시할 수 있습니다.
처음부터 조금 쓰여져 있는 것이 있습니다만, 이것들은 삭제하지 않도록 해 주세요.
추가된 내용에 따라 기존 디자인이 무너질 수 있습니다.
목차 커스터마이징용 CSS 소개
그럼 바로 목차 외형을 변경할 수 있는 CSS를 소개하겠습니다.모두 카피 페이스트만으로 사용할 수 있기 때문에, 마음에 드는 것이 있으면 시도해 보십시오.
바깥 테두리의 모서리를 둥글게 하다
이 코드에서는 바깥쪽 테두리를 둥글게 하고 테두리를 파란색으로 변경할 수 있습니다.
.table-of-contents {
padding: 15px10px15px35px; /* 테두리 내 여백(상우하좌) */
font-size: 100%; /*글자크기 */
border : solid 2px #7DB4EC; /* 선의 종류와 색상 */
background:#f7f7f7; /* 背景 */
border-radius : 8px;/* 숫자가 클수록 둥글어짐*/
}
.table-of-contents:before {
content: ′목차′;
font-size: 110%;
font-weight:bold;/* 글자 굵기 보통 normal */
color:#000; /* 글자색*/
}
매우 심플한 코드이기 때문에 색상 변경 방법만 알면 자유롭게 테두리 색상이나 목차 배경 색상을 변경할 수 있습니다.
리스트 아이콘을 변경하다
하테나 블로그 목차에서는 넘버링되지 않고 그냥 목록으로 표시됩니다.
여기 CSS를 도입하면 대제목과 소제목이 넘버링되게 되어 목차가 보기 쉬워집니다.
.table-of-contents {
margin-left: 0;
padding: 15px10px15px35px; /* 테두리내 여백(상우하좌) */
font-size: 100%; /*글자크기 */
border : dotted 1px#777; / * 선의 종류와 색상 */
background:#f7f7f7; /* 背景 */
}
.table-of-contents:before {
content: ′목차′;
font-size: 110%;
font-weight:bold;/* 글자 굵기 보통 normal */
color:#000; /* 글자색*/
}
/*대제목*/
.table-of-contents li{
font-weight:bold; /* 通常はnormal */
list-style-type:decimal; /* 마크 종류 */
}
/*중제목*/
.table-of-contents li ul li{
margin-left:20px;
font-weight:normal;
list-style-type:disc;
}
/*소제목*/
.table-of-contents li ul li ul li{
list-style-type:lower-latin;
}
대제목이 넘버링되는 것만으로 독자가 ′이 기사의 볼륨은 얼마나 되는지′를 판단하기 쉬워지기 때문에 매우 추천하는 커스터마이징입니다.
다른 어떤 커스터마이징보다 최소한 이 커스터마이징만 해두면 사용성이 향상될 것입니다.
목차를 그래피컬하게 돋보이게 하다
하테나 블로그 목차는 좋지도 나쁘지도 수수합니다.
좀 더 세련된 디자인으로 하고 싶은 경우는 이 코드를 사용할 수 있습니다./*목차 디자인 변경*/
.entry-content .table-of-contents {
position:relative;
margin-left: 0;
padding: 15px10px15px35px; /* 테두리내 여백(상우하좌) */
font-size: 100%; /* 글자크기 */
font-weight:bold;
list-style-type:decimal;/*숫자 이외가 좋으면 변경*/
background:#fff;
border-top: 40px solid #90caf3; /* ′이 기사의 목차′ 주위의 색상 */
border-left : 2px solid #90caf3; /* 선굵기 */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;
line-height: 200%; /* 행간 */
border-radius: 3px; /* 사각원형으로 하지 않을 경우 불필요 */
color:#444; /* 숫자 (마크색상 변경) */
}
/*′이 기사 목차′ 주위 변경*/
.entry-content .table-of-contents::before {
font-family: ′blogicon′;
content: ′ 039 이 기사의 목차′;
display: block;
font-size: 130%;
font-weight: bold;
position: absolute;
top: -40px;/*위로부터의 위치조정*/
left: 0px; /*왼쪽부터의 위치조정*/
color: #fff !important;
}
/*링크 색상 변경 및 밑줄 지우기*/
.entry-content .table-of-contents li a{
color:#444; /* 목차 리스트 부분의 텍스트 색상 */
text-decoration : none; /* 링크 밑줄 치고 싶지 않은 경우 */
}
목차 부분에 아이콘이 붙어 약간의 서적 목차와 같이 할 수 있기 때문에 이 방법도 추천합니다.
대제목만의 목차를 작성하는 방법
하나의 블로그 목차는 기사 내에 있는 표제어 모두를 사용해 작성되기 때문에 목차 삽입 설정에서 대제어만의 목차를 만들 수 없습니다.
원래 목차 설정이 존재하지 않기 때문에 목차를 커스터마이징하려면 CSS를 편집할 수밖에 없습니다.
만약 대제목만의 목차를 만들고 싶다면 아래의 CSS를 디자인 커스터마이징에서 추가해 주세요.
ul.table-of-contents > li > ul {
display: none;
}
이것으로 대제목만의 목차를 작성할 수 있습니다.
특정 기사만 대제목만을 작성하는 방법
앞의 방법은 모든 기사의 목차 영향을 미치기 때문에 일부 기사만 소제목을 포함한 목차를 작성하고자 하는 장면에 대응할 수 없습니다.
그런 경우 디자인 커스터마이징에 CSS를 추가하는 것이 아니라 기사마다 CSS를 추가합니다.
우선 투고 편집 화면의 [HTML 편집]을 선택합니다.
다음으로 텍스트 부분 말미에 아래의 CSS를 추가해 주세요.
이와 같이 기사마다 CSS를 개별 설정할 수도 있기 때문에 특정 기사만 대제목만의 목차를 작성하는 것이 가능합니다.
이쪽의 방법을 사용하는 경우는, 디자인의 커스터마이즈 CSS에서, 대제목만의 목차를 작성하는 코드는 삭제해 두어 주세요.
목차 디자인을 커스터마이징할 때 주의할 점
세련된 목차에 생겼다! 하지만 역시 멋진 제목으로 바꾸고 싶을 때가 있겠죠.
이럴 때는 반드시 이전에 추가했던 목차 CSS를 삭제한 후 새로운 CSS를 추가하도록 하십시오.
그렇게 하지 않으면 여러 CSS가 경쟁하게 되어 디자인이 무너질 수 있습니다.
CSS에 관해 지식이 있다면 자력으로 해결할 수 있지만 이미 완성된 것을 복사 페이스트 하고 있을 뿐 쓰는 법을 모르는 사람이라면 자력으로 수정하는 것은 우선 불가능할 것입니다.
그래서 최소한 자신만으로도 알 수 있도록 어디서부터 어디까지가 목차 CSS인지 알 수 있도록 해 두세요.
개행을 늘려서 알기 쉽게 하다
코멘트를 달다
자신이 알 수 있는 방법이라면 다른 방법을 사용해도 문제 없습니다.
코멘트를 넣는 경우는사이에 텍스트를 넣는 것으로 코멘트화할 수 있습니다.
이전에 삽입한 CSS를 삭제하는 것은 중요하다고 알고 있어도 삭제해서는 안 되는 다른 시리즈를 삭제해 버리면 본전도 없기 때문에 사고가 일어나지 않도록 대책을 세워 둡시다.
정리
블로그에 있어서의 목차는 「없어서 곤란한 것은 없지만, 있으면 편리하다」라고 하는 가려운 곳에 손이 닿는 컨텐츠의 하나입니다.
그런데 블로그에서는 한 기사 한 기사 목차를 설정해야 하기 때문에 이미 공개한 기사에 목차를 매기는 경우는 조금 힘듭니다.
하지만 그러한 작은 대처가 유저에게 도움이 될 수 있기 때문에, 기사에는 표제어를 설정해 목차를 설정하는 것이 좋습니다.
목차의 사용법이나 설치 방법에 따라서는 평균 체류 시간이 오르는 등 변화가 일어날 가능성도 있으므로, 액세스 해석을 하면서 목차 효과를 검증하는 것을 추천합니다.
반응형