今日も元気に、こんにちは★キャロリーナです！
初心者の私が、やってみて感じたこと、難しかったことを紹介していきます。
本日は、「はてなブログに目次をつける」です。
はてなブログの初期設定が終了し、よし記事を書いてみよう！と思ったのですが、目次のつけ方がわからない...
初心者の私でも簡単にできた方法を紹介します！
まずは、結果！
初心者の私でも、簡単に目次を作ることができました！
目次にする見出しを考える
まずは、目次の構成を考えることが必要です。
見出しは、以下の3つがあります。どのような構成で文章を作成するか計画をしましょう。
- 大見出し
- 中見出し
- 小見出し
見出しを作る
記事を作成するを選択し、
ブログ編集画面の画面左上の方に表示されてる「見出し」をクリックすると、「大見出し」「中見出し」「小見出し」「標準」と出ます。
どれかを選択し、見出しの文字を入力するだけです！
私のブログの見出しを作るには、「大見出し」を選択しています。
目次を作る
調べると、やり方は２つあるそうです。
初心者は、1が簡単とのことで私は、1の方法を選択しました。
- 「目次」ボタンを押す。
- [ ] で :contents を囲んで入力します。
なんと、「目次」を表示したい見出しの前にカーソルを置いて、下のピンク枠で囲んだ所をクリックするだけです。
すぐにできました！感動！
初めて書いた記事に目次がつきました！
もともと Haruniを使ってるからか、「目次」とも表示され、色もかわいくて満足です！他にも目次の編集は、色々できるそうなので、余裕ができたら試したいと思います。（文字の大きさを変えたり、枠を付けたり、数字を変えたり）
目次が表示されない場合は、以下のコードをデザインの設定画面のデザインCSSにコピペするとできます！
/*目次のデザイン変更*/
.table-of-contents {
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字サイズ */
border:dotted 1px #777; /* 線の種類と色 */
background:#f7f7f7; /* 背景 */
}
.table-of-contents:before {
content: "目次";
font-size: 110%;
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}
とっても簡単でしたね！！！
