ブログページ内リンクで目次を作る方法(同ページ内移動)

      2017/02/15

こんにちは、Mugcupです。

前回は、リンクについて説明をさせていただきましたが今回は内部リンクの作り方について書いていきます。よく目次で使用される方法でブログの同一ページ内移動、ジャンプする方法です。記事の文字数が増えてくると目次があると目的の場所まですぐ飛べる大変便利な機能です。どのブログサービスにも対応出来るようにいくつか上げていきます。

↓こちらの目次は開いて(showをクリック)4番目のTable of Contents Plus で作っています。

Sponsored Link

HTMLコードで作っていく方法

 情報系ブログとしてもSEO対策の面からしても目次は覚えておきたい機能の一つ。HTMLコードを使用していく方法は基本どのブログサービスでも使える方法です。(筆者はFC2ブログ時代にこの方法を使っていました)

それでは下記のテンプレートをコピー&ペーストしてみましょう。
こちらのブログにテンプレが載ってましたので参考にさせて頂きました。

2分でできる!ブログ記事にページ内リンクで目次を作る方法

具体的には下の画像を参考に、必要箇所を書き換えてください。

index1

index2

 

FC2テンプレートを使う方法

FC2ブログを使用している方はこちらのプラグインでの可能です。

以前、FC2ブログを使用していた時はこの方法を試しましたがうまくいかなかったので筆者はHTMLで行っていましたが興味ある方はこちらを参照ください。
超簡単!FC2ブログの記事に自動で目次を挿入する方法 | FC2ブログカスタマイズ

  1. JQueryファイルを配布サイトURL:小粋空間からダウンロードする
  2. 保存した”jquery.toc_0.0.2.js” ”jquery-toc.js”に変更します。 ※FC2ではファイル名の途中に”.”を含むファイルをアップロードすることができないためファイル名を変更する必要があります。
  3. ファイル名を変更した”jquery-toc.js”ファイルをFC2ブログにアップロードします。
  4. html、CSSテンプレートの変更

HTMLコード応用編

目次を枠線や装飾を施して囲んでみたい、という方はこのような事も出来ます。

 

上コードを利用して ”本文はこちら〜” 部分に一番はじめに説明したHTMLコードをいれると

 

■タイトルはこちら■

■目次

▶目次1
▶目次2
▶目次3
▶目次4
▶目次5

 

こんなこともできます。 囲い枠はこちらの 【続編】見出し付きの囲い枠 -その2 を参考にさせて頂きました。たくさん載っていましたのでいろいろ応用出来そうですね。

wordpressのプラグインTable of Contents Plusを使用する

 続いてwordpessをお使いの場合について説明していきます。

wordpressは比較的簡単に目次を作ることが可能なのでみなさんご存知の方も多いと思いますが、目次を自動生成してくれるプラグインのTable of Contents Plus を使用していきます。インストールまではざっと画像にて確認ください。

  • プラグイン→新規追加→TOC検索→インストール→有効化

toc1

有効化までできたら編集から基本設定をしていきます。

toc2

文字やスタイル、目次をはじめから表示するかしないか、など基本設定が済んだら、下の方にある”上級者向け”をクリックしてください。

toc

見出しレベルという箇所を決めていきます。ここは記事作成の時にスタイル→見出し部分があると思いますが、どこまでを目次として作成するかを決めましょう。

  • heading1=h1 →見出し1
  • heading2=h2 →見出し2
  • heading3=h3 →見出し3

2のみか2、3のみで充分かと思いますが、お好みで。設定を終えたら最後に一番下の更新をクリックで完了です。あとは自動的に目次が生成されます。

 

まとめ

 ブログのデザイン含め見やすさは読者にとって非常に重要でSEO対策では不可欠な要素です。
ですが無駄にデコレートしすぎるとそれも問題なので注意が必要でしょう。
気になった方は是非挑戦してみて下さい。

 - SEO対策, WordPress, ブログ関連, プラグイン