【保存版】【すぐできる】ブログで目次をつくる一番わかりやすい方法

このエントリーをはてなブックマークに追加




こんばんは。本日2回目の投稿です。
前回の記事から目次をつけるようにしました。
これはSEO対策的にも信憑性のある記事として認識されるためにも必要なことなので、いろいろ調べながらやりました。

結果、WordPressの場合、プラグインを使う方法と、自分でHTMLコードで書く方法の2パターンしかなく
プラグインが私の場合、意外とわかりにくかったので、簡単にできる方法としてHTMLコードを書くパターンを
メインに紹介したいと思います。

ほんと簡単な目次の作り方なので、デザインにこだわりたい方はもっと詳しい内容をしらべてみてください。

目次

 1.概要説明
 2.
やり方、マニュアル
 3.
コピペ素材提供します
 4.
プラグイン紹介

■概要説明

WordPress利用者向けですが、ほかのブログでも利用可能だと思います。
ここで記載する内容はHTMLのコードを使った方法で、一番シンプルな内容になります。
もしデザインや色目などこだわりがある場合はこの記事では解決しませんので、ご了承ください。
まさにこの記事の目次のような、最低限必要な内容をまとめています。

HTMLって何?おいしいの?コードとか全然わからない‥という方も
説明の順に沿ってやってもらえればうまくいくようにまとめています。
最後にコピペ用の素材も提供していますので、頑張って目次を形にしましょう!
(私も苦労しましたので・・・)

■やりかた マニュアル

それでは順にやっていきましょう。

出来上がりはこの記事の目次を想定してください。

これができるようになります。
できるようになったらまたアレンジしてみてくださいね。

①まずは「目次」と入力してください。

*段落で文字サイズを大きくするor見出しにするはお任せします

②目次と入力したら、別のブロックで目次のタイトルを入力していきます。

この時「段落」もしくはビジュアル編集での作業になります。

<入力内容>
 1.概要説明
 2.やりかた マニュアル
 3.コピペ素材提供します
 4.プラグイン紹介

③目次ごとのタイトルが入力できたら、ビジュアル編集からHTML編集に切り替えます。

④HTML編集に切り替えると下記のように記載されていると思います。

(実際はこのようにきれいには整列していないかもしれないので、<P>~</P>をさがしてください。)

<P> 
 1.概要説明<br>
 2.やりかた マニュアル<br>
 3.コピペ素材提供します<br>
 4.プラグイン紹介<br>  
</P>

解説すると Pは文章・段落という意味で<P> </P> で囲まれたコード以外のテキストの内容が文字としてビジュアに反映されます。
途中にある<br>は改行の意味なので、ビジュアル表示の時、<br>で改行が入ります。

⑤ ➃で入力した内容に次のコードを追加していきます。HTML編集はそのままです。

<P> 
  <a href=”#1″> 1.概要説明 </a> <br>
  <a href=”#2″> 2.やりかた マニュアル </a> <br>
  <a href=”#3″> 3.コピペ素材提供します </a> <br>
  <a href=”#4″> 4.プラグイン紹介 </a> <br>
</P>

追加分 →  <a href=”#●”> ○○○○ </a> 上の内容にこのコードをそれぞれ追加しただけです。

これで、目次がハイパーリンクになり、ページ内リンクする用意ができました。

⑥ここまでで「目次」の表面上は形になりましたが、最後に一つ作業が残っています。

今できているハイパーリンクは指定したリンク先がまだないのでこれから作っていきます。

目次のタイトル通り記事を書いていくと思いますが、
各タイトルを見出しで書きます。そのタイトルに今までの要領でHTMLを入れます。

例えば見出しをH3で設定したとします。編集はHTML編集でOKです。

その時のコードの書き方は 目次の一番最初「概要説明」であれば
 <h3 id=”1″>1.概要説明</h3>
と記載します。

これで、リンク先の指示されている場所を作りました。

その他のタイトルも上記同様に id=”●” とテキストの内容に注意して入力してみてください。「

そうするとこの記事と同様の目次とページ内リンクが作成できます。



■ コピペ素材提供します。

簡単コピペ素材です。

「目次」と入力 他の表記でもOK。段落でも見出しでもOKです。

<a href=”#●●”>見出しタイトルはいる</a><br>
<a href=”#●●”>見出しタイトルはいる</a><br>
<a href=”#●●”>見出しタイトルはいる</a><br>
<a href=”#●●”>見出しタイトルはいる</a><br>

 *●●には簡単な数字などを振り分けると楽です。
 *●●は見出しタイトルごとに別のものを設定してください。

ページ内リンク先を指定します。

目次で設定した見出しタイトルを入力します。

<h3  id=”●●”>設定した見出しタイトル</h3>

  それぞれの見出しタイトルごとにこのコードを記載します。
  id=”●●”と目次で先に設定した”#●●”が同じところにリンクが飛びますので
  タイトルとidが同じであることを確認してください。

■ プラグイン紹介

私は理解に苦しみましたが、プラグインでも設定できるようです。
ただし、途中からプラグインを利用すると、一括で内容が反映されてしまうため
今までの記事に影響があるかを確認してから利用してください。

■ Table of Contents Plus

これをうまく使えば目次が自動生成できますが、最新のバージョンでの検証がなされていないので
不安はあります。

色んな方が紹介されているので参考にしてみてください。

ぜひ参考になれば幸いです。

まめしば




LINEで送る
Pocket

Leave a Reply