【Divi】目次・ページ内リンクの作り方【プラグイン不要】

現在、Diviを10%OFFで購入できる特別セール開催中。

Diviが10%OFF 本日のセールはこちら

https://www.elegantthemes.com/discount/today

新規利用の方も、現在年間プランを利用している方も10%OFFでDiviを購入でます。

目次とページ内リンクの仕組みはほぼ同じなので、先にシンプルなページ内リンクの作り方について説明します。

ページ内でリンクを作るのは非常に簡単で、2ステップで完了します。

1. CSS IDを設定する(リンク先)

2. リンクを設定する(好きな要素)

すべて外部プラグインなしで使える機能です。

到着点にしたい要素にCSS IDを設定します。

ID名は何でも良いので自分の好きな名前を設定しましょう。

同じページ内に複数のリンクを設定する場合は、CSS IDの名前が被らないように設定します。

到着点にしたい要素にCSS IDを設定します。

今回は、上の画像要素にCSS ID「sample」と名付けました。

ID名は何でも良いので自分の好きな名前を設定しましょう。

設定したCSS IDの要素まで飛ばしたい要素にリンクを作成します。

同ページ内であればリンクは「#(CSS ID名)」とだけ入力すればOKです。

今回は下のボタンのリンクを#sampleに設定します。

クリックすると1.の説明で使った画像まで戻るので押してみて下さい。

テキストやボタン要素を利用することが多いかなと思いますが、どのモジュールでも設定できます。

手順はこれで以上です。めちゃくちゃ簡単ですね。

基本的にやることは先ほど紹介したページ内リンクの作り方と同じです。

異なるのは、目次の場合リンク先がhタグ要素であるということです。

特にブログにおいて目次、hタグの設定は重要です。

当ブログではh2までを目次の項目に載せています。

h3やh4まで細かい項目を目次に載せたい場合は外部プラグインを利用した方が時間短縮になるかと思います。

目次作成用に使えるエレメントの例を紹介します。

特に決まった型などはないので自分好みにカスタマイズしましょう。

テキスト

TABLE OF CONTENTS

・content 1

・content 2

・content 3

トグル

ブラーブ

などなど、文字が打ててリンク設定できる要素であれば何でも大丈夫です。

当ブログでは、目次が長くなった場合折り畳めるのでトグル要素を使って目次を作成しています。

今回紹介した方法で作成した目次は、Googleの検索上位に入るとしっかり反映されます。

当ブログの記事の例を下に挙げますが、メタディスクリプション下の青い文字が目次の部分です。

目次を作る要素は何でもよく、<h2>タグがページ内でリンク化されて飛べるようになっているかが重要のような気がします。

ページ内リンクと目次の作り方について説明しました。

最初に飛んできた方は少し下の方に「BACK TO TOP」ボタンがあるのでそれで記事上部まで戻れます。

ブログの場合、目次は意外とクリックされる部分でもあるのでしっかり作ることをおすすめします。