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

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

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

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

目次記法の使い方

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

ね?便利でしょう?

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

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

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

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

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

あった。

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

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

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

目次の見た目を変える

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

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

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」の中です。

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

最後に

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

面倒な登録が不要の転職アプリ

※記事の中でも紹介しているかも。でも本当にお勧めできるアプリなんです。

次のような悩みを感じていませんか?

  • すぐ転職するわけじゃないが情報が欲しい
  • 転職を考えているが活動する時間がない
  • 仕事がつらくて、できれば辞めたいと思う
  • 転職エージェントに登録するのは抵抗がある

こういった悩みを抱えている方に紹介したいのが、ジョブクルの転職アプリ。
その理由は次の6つの特徴があるからです。

  • 面倒な登録が不要
  • 完全無料
  • チャットで転職コンシェルジュに相談できる
  • 電話や面談をする必要がない
  • 退職や転職に関する相談なら何でもOK
  • 転職エージェントと遜色のないサービスが受けられる

ぼくも転職エージェントを利用したことがありますが、電話で話したり面談で会うことが意外と億劫なんです。
「無理に勧められそう」とか「断られたらいやだな」と言う不安も感じます。
それにちょっと相談したいだけで、本当に登録していいのかどうかも悩みますよね。

そんな不安を全て取り除き、気軽に転職のプロに相談できるのがジョブクルの転職アプリです。

ぼくも実際に使ってみましたがかなり具合がいい。
なによりチャットで転職のプロに、気軽に相談できるところがすごく気に入っています。
しかもサービスの内容は転職エージェントと比べても大きな違いはありません。

気軽に相談できてしかも親切に対応してもらえる。
インターフェイスの使い勝手に少し不満はありますが、電話をする必要も、会いに行く必要もないのは大きなメリットです。
良かったら試してみてくださいね。

ジョブクル
ジョブクル
開発元:Smiloops
無料
posted withアプリーチ