Livedoorブログ(ライブドアブログ)を利用していますが
SEO対策で目次が必要?
SEO対策は、勉強中でWebライティングについては、後日、記事にしたいと思います。
また、長文のブログを書いた時はブログ記事の上部に(始めに)
目次を設置しておけば、読みたいところに飛べて読みやすくなります。
無料のLivedoorブログでも簡単に目次が作成できます!
目次の作成
色々な方法がありますが
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
薄い水色: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ブログでも簡単に目次が作成できます。
これからブログを始める方や機能不足で、引越しを考えるが有償に躊躇している方は
他に「吹き出し会話」なども出来ますので、先ずは試してみてください。
スポンサーリンク
コメント