ブログの記事内に目次と見出しがあると記事自体もわかりやすいですよね。

でも初心者の方は
「むずかしそう」「HTMLってやつ使うんでしょ?絶対ムリ」「そもそもHTMLってなんだよ」など思うかもしれません。

そこで今回、初心者の方でも簡単に目次と見出しを作ることができるように詳しく解説します。

とても簡単なんで安心して参考にしてください。
 


今回の手順で作業すれば

スクリーンショット 2018-10-23 22.23.48

このような、目次と見出しをつくることができます。

では、早速つくってみましょう!

目次と見出しの作成方法

ライブドアブログでは他のブログと違い、目次や見出しを自動に作成することはできません。
全て手動で入力となります。

全て手動で入力してては、大変ですし時間がかかるので、
今回はコピペができるようにサンプルの様式をつくりましたので、
参考にしてみてください。

目次

<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">

<b>目次</b><br />

<a href="#1">見出し1</a><br />

<a href="#2">見出し2</a><br />

<a href="#3">見出し3</a><br />

<a href="#4">見出し4</a><br />

<a href="#5">見出し5</a><br />

</div>

 


見出し


<h2 id="1">見出し1</h2>

 

ここに文章を入力。

 

<h2 id="2">見出し2</h2>

 

ここに文章を入力。

 

<h2 id="3">見出し3</h2>

 

ここに文章を入力。

 

<h2 id="4">見出し4</h2>

 

ここに文章を入力。

 

<h2 id="5">見出し5</h2>

 

ここに文章を入力。
 

目次

まずは、目次からつくっていきます。

① ライブドアブログのマイページを開きます。

2

開くとこの画面になります。


② 「ブログを書く」をクリック!

3


4

クリック!すると、この画面になります。


③ 「HTMLタグ編集」をクリック!

5


④ 本文にHTMLタグの「目次」を入力します。

6

入力が完了したら、再度「HTMLタグ編集」をクリック!

7


⑤ 目次の完成です。

8

見出し

次に見出しをつくっていきます。
要領は、目次のつくり方と同じです。


① さきほどの目次の続きで、「HTMLタグ編集」をクリック!

9


② 本文にHTMLタグの「見出し」を入力します。

11

入力が完了したら、再度「HTMLタグ編集」をクリック!

12


③ 見出しの完成です。

13


④ 目次と見出しの確認を行います。一番下の「プレビュー」をクリック!

14


15

クリック!すると、この画面になります。
ちゃんとリンクが飛べるか確認したら、完成です。

カスタマイズ方法について

つぎに設定した目次のカスタマイズの例を出します。
カスタマイズ方法はいろいろあるので、
今回は比較的かんたんな
「目次の背景の色を変更する場合」と「目次のタイトルを変更する場合」を紹介します。

目次の背景の色を変更する場合

ここでは、さきほど作成した目次の背景の色の変更を紹介します。
とてもかんたんなので試してみてください。

目次を作ったときに「HDMLタグ編集」からつくりましたね?
「HDMLタグ編集」上で色の変更を行います。


① 赤マル「#ffffff」が現在の背景色「白」のカラーコードとなっています。
  赤マルを変更し、色の変更を行います。

①


② じぶんの好みの色を決めます。ぼくはいつもここのサイトを参考にさせていただいてます。


カラーコード一覧作成ツール
参考:MyIsland 

今回は、「みどり」にします。みどりのカラーコードは「#ccffcc」です。


③ ①で紹介した赤マル「#ffffff」「#ccffcc」に変更します。

②


④ そうすると、目次の背景がみどりになっています。これで完成です。

③


かんたんでしたね。ぜひ、みなさんもやってみてください。

目次のタイトルを変更する場合

ここでは、さきほど作成した目次のタイトルを変更する場合を紹介します。
とてもかんたんなので試してみてください。

今回は、「HDMLタグ編集」上の操作は不要です。

⑴


① 目次を選択します。

⑵


② 「文字サイズ」「文字の色」「文字に蛍光ペン」などカスタマイズ可能です。
  じぶんの好みでカスタマイズしてください。  

⑶


⑷


⑸


③ 完成です。
  今回は「文字サイズ」+2、「文字の色」あか、「文字に蛍光ペン」きいろ
  文字を太く、文字を斜め、文字の下に線
  というカスタマイズです。いろいろあるので、試してみてください。

⑹


ライブドアブログでの便利な設定方法

ライブドアブログには「定型文」として、文章が保存できることを知っていますか?

定型文の登録さえしてしまえば、
今回の目次と見出しをかんたんに記事内に挿入できます。
ブログ設定の定型文で登録できます。

ぜひ、使ってみてください。

スクリーンショット 2018-10-24 17.58.09


目次と見出しのサンプル

再度、目次と見出しのサンプルを貼っておきます。
ぜひ、参考にしてください。


<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">

<b>目次</b><br />

<a href="#1">見出し1</a><br />

<a href="#2">見出し2</a><br />

<a href="#3">見出し3</a><br />

<a href="#4">見出し4</a><br />

<a href="#5">見出し5</a><br />

</div>

 

<h2 id="1">見出し1</h2>

 

ここに文章を入力。

 

<h2 id="2">見出し2</h2>

 

ここに文章を入力。

 

<h2 id="3">見出し3</h2>

 

ここに文章を入力。

 

<h2 id="4">見出し4</h2>

 

ここに文章を入力。

 

<h2 id="5">見出し5</h2>

 

ここに文章を入力。



最後までご覧いただき、ありがとうございました。

ツイッターもやっているので、ぜひフォローしてください。




スポンサードリンク