読者です 読者をやめる 読者になる 読者になる

bunoshi

働き方を考えるブログ

はてなブログの目次の作り方。目次が簡単に作れる「目次記法」が便利。

ブログ運営-はてなブログカスタマイズ ブログ運営

はてなブログで目次が簡単に作れる「もくじ記法」が出来たんですね。

今までも自動で目次を作る方法とかあったんですが、あんまり見出しを使わないのと、全部の記事に反映されるから使わなかったんです。

でも「もくじ記法」が出来た事で、目次をつけたい記事だけに入れられるから本当に便利! お勧めしちゃいます!

 

目次記法の使い方

記事に[:contents]と入れるだけ。それだけでこんな目次が出来ます。

f:id:ranmaru-24mensou:20151017095908p:plain

ね?便利でしょう?

まぁ、見た目が味気ないのは仕方が無いとして、[:contents]だけで目次が出来るのはありがたい!

とは言え見た目が味気ないし、目次だと言うのも分からないのでちょっと手を加えました。

 

目次が記述されている場所を探す

まずはCSSのどの部分に目次が記述されているかを調べました。といってもGoogle Chromeで記述を確認したい部分を右クリックして要素を検証をクリックするだけ。

f:id:ranmaru-24mensou:20151017100401p:plain

そうすると目次の要素、と言うかページ全体の要素が確認できるので、目的の目次の要素を探します。

f:id:ranmaru-24mensou:20151017100602p:plain

あった。

右クリックした周辺の要素を表示してくれて、カーソルを重ねると該当する部分の色が変わるのですぐ分かるはず。

これで目次は「teble-of-contents」だってことが分かりますよね。

じゃぁ見た目をいじろう!

 

目次の見た目を変える

先に言っておくと分かってやっているわけじゃないからね!

 

これを読んだり、ネットで調べたりしてやっています。

それで、だ。調べたらすでにソースがあった。

www.yukihy.com

すっごくわかりやすく書かれているのでこちらのサイトを見た方が早いです。

 

え?

じゃぁ記事にするなって?

紹介したかったんだよ。

 

bunoshiで使っている目次のソース

いちよう貼っておきます。さっきのサイトを参考に背景に色をつけるのが嫌だったので線だけ囲っています。

.table-of-contents {
border: 1px solid #e4e4e4;
padding: 20px 10px 20px 40px;
list-style-type: decimal;
border-radius: 5px;
font-size: 90%;
}
.table-of-contents:before{
content: "目次";
font-size: 120%;
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}

記述する場所は「デザイン設定」⇒「カスタマイズ」⇒「デザインCSS」の中です。

テーマによっては反映されない事があるらしいのでご注意を。

 

最後に

目次があると記事が読みやすくなって良いですね。目次をつけたい記事に一言書くだけで付けられるのもすごくありがたい。必要無い記事も多いですから。


転職30代の転職派遣から正社員ニート・フリーターから正社員働き方コラム転職サイト転職エージェント雑記ブログ運営
免責事項

Presented by bunoshi