はてなブログの目次の使い方｜作り方は4ステップだけ！
| 記事の種類 | はてなブログの使い方 |
| SEO対策 | 関係あり |
| SXO対策 | 関係あり |
| 難しさ | 超かんたん |
| 重要さ | 重要 |
※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖°
はてなでブログを始めた頃、ぴっぴも目次が表示されなくて困ったことがあります。
それが今では、記事に目次を表示できるようになりました！
実は目次のアイコンを押すだけでは、ダメだったんです。
そのような訳で今回は、はてなブログの目次の使い方を紹介します。
- 目次のアイコンを押す
- 見出しのアイコンを押す
- 見出しを入力する
- プレビュー画面で確認する
HTML編集以外、この4ステップで目次を記事に表示できます。
もちろんHTML編集でも、目次を表示できるので安心してくださいね。
なので今回の記事は、どうしても「はてなブログ」の記事に目次を表示したい方におすすめです。
ぜひ試してみてください！
はてなブログの目次の使い方
見たまま、はてな記法、markdownは「目次のアイコン」を押して見出しを作るだけです。
HTML編集の場合「目次のアイコン」がないので「<p>[:contents]</p>」と入力し、見出しを作れば目次を設置できます。
それからHTML編集の目次設置の方法は、目次ボタンのない「はてなブログのスマホアプリ」に使えるものです。ぜひ試してみてください！
見たまま、はてな記法、markdown
はい、見たまま、はてな記法、markdownの目次の設置は次のとおりです。
見出しがないと目次は表示されませんので、必ず見出しを入れてくださいね。
- 目次のアイコンを押す
- 見出しの名前を書く
- 見出しを選ぶ
- 目次を設置できたら念のため保存
1.目次のアイコンを押す
記事内の設置したいところに矢印を移動してください。
そしてマウスの左側のボタンを押して点滅する「｜」を表示します。
それができたら目次のアイコンに矢印を合わせてマウスの左側のボタンを押しましょう！
2.見出しの名前を書く
まず見出しの名前を記事に書きます。
次に上の画像みたいに書いた見出しを青くしえてください。
文字はマウスの左側のボタンを押したまま、その文字をなぞれば青くなりますよ。
3.見出しを選ぶ
文字を青くしたまま、見出し窓を押してくださいね。
すると上の画像みたいに窓が開いてメニューが現れます。
使う見出しを選んでボタンを押しましょう。
すると上の画像みたいに文字を囲んでいた青色が灰色になりますよ。
4.目次を設置できたら念のため保存
これで目次をブログ記事に設置できましたよー。
ご心配でしたらプレビュー画面に切り替えて確認してみてください。
念のためにここまでの作業を保存したら終わりです。
お疲れ様でした！
HTML編集
HTML編集で目次を表示する手順は次のとおりです。
- HTML編集画面にする
- 「<p>[:contents]</p>」と入力する
- 見出しを入れる
- 念のため保存
1.HTML編集画面にする
編集画面に移動します。
2.「<p>[:contents]</p>」と入力する
「<p>[:contents]</p>」と入力しましょう。
念のために言っておきますが、かぎかっこは入力しませんよ。
間違わないでくださいね。
3.見出しを入れる
見出しタグを書きます。見出しタグの書き方は上の画像みたいにしてくださいね。
- <h2>ここは見出しの名前</h2>
- <h3>ここは見出しの名前</h3>
- <h4>ここは見出しの名前</h4>
- <h5>ここは見出しの名前</h5>
4.念のため保存
これで目次がブログ記事に設置できました。
ご心配でしたらプレビュー画面に切り替えて確認してみてください。
念のためにそれまでの作業を保存したら終わりです。
お疲れ様でした！
はてなブログの目次の作り方は4ステップだけ！
はてなブログの目次の作り方は4ステップだけです！
- 目次のアイコンを押す
- 見出しのアイコンを押す
- 見出しを入力する
- プレビュー画面で確認する
HTML編集の場合、目次のアイコンを押せません。
なので直接「<p>[:contents]</p>」と入力、または他の編集モードに切り替えて「目次のアイコン」を押してください。