| 記事の種類 | はてなブログの使い方、はてなブログの書き方 |
| SEO対策 | 関係あり |
| SXO対策 | 関係あり |
| 難しさ | 超かんたん |
| 重要さ | 重要 |
次のような方にオススメ！
- はてなブログの目次の使い方を知りたい
- はてなブログの目次の作り方を知りたい
- はてなブログの目次が表示されない
- はてなブログを目次で読みやすくしたい
はてなでブログを始めた頃、ぴっぴも目次が表示されず困ったことがあります。
それが今では、記事に目次を表示できるようになりました！
実は見出しを作らないないと、目次のアイコンを押しても目次は表示されないんです。
そのような訳で今回は、はてなブログの目次機能の使い方（ブログの目次の作り方）を紹介します。
- 目次のアイコンを押す
- 見出しのアイコンを押す
- 見出しを入力する
- プレビュー画面で確認する
HTML編集以外、この4ステップで目次を記事に表示できます。
もちろんHTML編集でも、目次を表示できるので安心してくださいね。
なので今回の記事は、どうしても「はてなブログ」の記事に目次を表示したい方におすすめです。
ぜひ試してみてください！
記事を書いた人
ひよこブロガー
- ・ブログ開始69日で合計1万PV
- ・ブログ開始75日で収益獲得
- ・アクセスの約90％が検索流入
応援していただけるとスゴク嬉しいです！
( ﾟдﾟ)ﾊｯ!
自己紹介させてください。
あらためまして、ぴっぴです！
現役のはてなブロガーで、ぴっぴのはてなブログでアフィリエイトでは「はてなブログ」に関する記事を書いています。
そして、本ブログのコンセプトは、はてなブログに関して困っている方を一人でも減らすことです。
ブログの更新をしていない1年半の間も、おかげ様で毎月約2900人の方に本ブログを利用していただいています。
はてなブログの目次機能の使い方（ブログの目次の作り方）
見たまま、はてな記法、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>」と入力、または他の編集モードに切り替えて「目次のアイコン」を押してください。
これから記事を書く方へご案内
ぴっぴのはてなブログでアフィリエイトでは、編集画面の使い方が分かる「画像でわかる【はてなブログの記事の書き方】」をご用意しています。
記事の内容
- 使用頻度の高い【機能の使い方を21枚の画像】で紹介
- オススメの記事の内容
- ネタの探し方
- 記事の品質の上げ方
このような盛りだくさんの内容になっています。
「良い記事を書きたい」または「検索する手間を省きたい」という方は、下記のリンクより「画像でわかる【はてなブログの記事の書き方】」をご覧ください。
