Livedoorブログ(ライブドアブログ)を利用していますが
SEO対策で目次が必要?
SEO対策は、勉強中でWebライティングについては
後日、記事にしたいと思います。
また、長文のブログを書いた時は
ブログ記事の上部に(始めに)
目次を設置しておけば、読みたいところに飛べて
読みやすくなります。

無料のLivedoorブログでも簡単に目次が作成できます!




目次の作成

色々な方法がありますが
HTMLを貼り付けるだけで、目次が作成できます。

①新しい記事を書くで「HTMLタグ編集」を押して
HTML編集画面を開きます。
無題
②以下のHTMLを貼り付けてください。
<div style="border: solid 2px #ffb03f; padding: 0.5em 1em 0.5em 2.3em; position: relative;background: #fffaf4; ">
<b style="font-size:125%;">目次</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><br>

<h2  id="1"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し1</b></div></h2>
<br>ここに文章を入力。<br>

<h2  id="2"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し2</b></div></h2>
<br>ここに文章を入力。<br>

<h2  id="3"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し3</b></div></h2>
<br>ここに文章を入力。<br>

<h2  id="4"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し4</b></div></h2>
<br>ここに文章を入力。<br>

<h2  id="5"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し4</b></div></h2>
<br>ここに文章を入力。<br>
③貼り付けた後、「HTMLタグ編集」を押すと
いつもの編集記事に戻り、目次が作成されています。
無題


目次のカスタマイズ

①例えば目次?もくじ?
そのまま、文字の大きさや色を好みに編集できます。
無題
②私の好みの色になりますが
背景などの色の変更もできます。
・目次部分
 先頭の行で、HTMLカラーコードを指定します。
<div  style="border: solid 2px #ffb03f; padding: 0.5em 1em 0.5em 2.3em; position: relative; background: #fffaf4;">
 赤色箇所:枠線の色
 青色箇所:背景
・見出し
 各見出しの行で、HTMLカラーコードを指定します。
<h2  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;">見出し1<br />
 赤色箇所:縦線の色
 青色箇所:背景
・HTMLカラーコード
 他に良く使われる、薄い黄色や水色の例ですが
 好みのHTMLカラーコードを指定してください。
 薄い黄色:ffff99
 薄い水色:f0ffff

③見出しの数
例では、5つですが、5以下の場合は
目次の行と、見出し行を削除してください。
また、追加する場合は、HTMLの編集になります。
・目次の追加
 目次の見出し5の下に1行追加します。
<li><a  href="#5">見出し5</a></li>
<li><a  href="#6">見出し6</a></li>
 続いて、見出しを追加します。
<h2  id="5"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し5</b></div></h2>
<br>ここに文章を入力。<br>
<h2  id="6"><br /><div  style="padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"><b>見出し6</b></div></h2>
<br>ここに文章を入力。<br>
 太文字箇所が、目次と結び付ける数字です。

⑤このまま記事を書けますが
毎回、同じこと繰り返すのは面倒ですよね。
同じ目次が利用できるように、テンプレートしましょう。


目次のテンプレート化

①「HTMLタグ編集」を押して
作成した目次のHTMLをコピーします。

②「ブログ設定」の「定型文」に進みます。
無題
③「新しい定型文を作る」を押します。
無題
④「ラベル」には覚えやすい名前を入力
「定型文」には①でコピーしたHTMLを貼り付けて
「OK」を押します。
無題
⑤以降、目次を使う場合は編集画面の
「定型文」ボタンで、呼び出すことが出来ます。
無題


まとめ

無料のLivedoorブログでも簡単に目次が作成できます。
これからブログを始める方や
機能不足で、引越しを考えるが
有償に躊躇している方は
他に「吹き出し会話」なども出来ますので
先ずは試してみてください。
 

にほんブログ村 小遣いブログ ANAマイル・SFC修行へ