gori0I9A9903_TP_V
みなさん、ブログを書いていると「もくじ」入れてみたくなりませんか?

「もくじ」が入ってると、記事の内容が一目でわかるし、気になる文章のところまですぐに飛べるし、なんと言ってもブログの記事がスタイリッシュに見えます!(たぶん)

ところが、ライブドアブログには「もくじ」を入れる機能はないんですよね。

そんなわけで、今回は「PCから見た、ライブドアブログにコピペで簡単にもくじを入れる方法」をご案内します。

ちなみに出来上がりはこんな感じ。
20180814223956

ぼっちのこのブログは、デザインをいじってしまってるため見出しが水色になってますが、初期設定のままだとシンプルな黒文字の見出しになります。

紛らわしくてごめんなさい。


さて今回の目次です。
 ↑  クリックすると見出しにジャンプします。

「もくじ」と「見出し」を挿入する

まずはライブドアブログのマイページから「記事を書く」をクリックして、記事を書く画面に移動します。

20180814222701
画面上のほうにある、「HTMLタグ編集」をクリック。
20180814225941
そうしたら次のテンプレートをコピーして貼り付けます。
<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>
ここに文章を書く

貼り付けたら「プレビュー」を見てみましょう。
20180814230816
こんな感じになってると思います(通常、見出しは水色ではなく黒い太字です。

あとは好きなように見出しと文章を当てはめていけば、素敵なブログ記事(?)の完成です。

定型文に「もくじ」のテンプレを登録しておく

毎回記事を書くたびに、先ほど貼り付けた「もくじ」のテンプレートをどこからかコピーして張り付けるのは面倒なので、ライブドアブログの「定型文」にテンプレートを登録しておきましょう。

20180814232136
右上のほうの赤枠のところですね。

ここをクリックすると、登録してある定型文のウインドウが開きます。
20180814232415
こんな感じで、定型文を登録しておけば次回から「ブログに貼る」をクリックするだけで、「もくじ」が挿入されるので便利です。

定型文を登録

20180814232828

まずは「ブログ設定」を開きます。

20180814233200
「基本設定」の中の「定型文」をクリック。
20180814233220
「定型文の管理」の画面になったら、赤枠の「新しい定型文を作る」をクリック。

20180814233703
「定型文の追加」のウインドウが開くので、
  • 「ラベル」に定型文の名前(今回は「目次」)を入力。
  • 「定型文」に先ほどのテンプレートをコピペ。
  • 「OK」をクリックして登録完了。
これで「もくじ」のテンプレートを定型文に登録する作業は完了です。

これからライブドアブログで記事を書くときは、簡単に「もくじ」を挿入することができます。

まとめ

このページの冒頭でも書きましたが、「もくじ」があると記事がとっても見やすくなります。

特に、気合入れて長い記事を書いたときは、「もくじ」がないと読みたい文章のところまでページをスクロールするのは大変です。

今や、他の方々のブログを見ても、当たり前のように「もくじ」が入ってます。

ブログを見に来てくれた人に、わかりやすいと思ってもらえる記事を書くように心がけたいですね。