DIVI FEATURES

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

INTRODUCTION

Diviを使って、プラグインなしで目次やページ内のリンクを作る方法について説明していきます。

クリックすると同じページ内の指定の位置まで移動できるやつです。

例えばここをクリックすれば本記事のまとめまで飛びます。

CONTENTS

>> ページ内リンクの作り方

>> 目次の作り方

>> まとめ

>> デザイン関連記事

*目次をタップで各コンテンツに飛べます

INNERLINK

ページ内リンクの作り方

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

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

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

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

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

1. CSS IDを設定する

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

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

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

CSS IDに入力

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

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

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

2. リンクを設定する

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

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

ボタンリンクURLの部分に入力

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

クリックする事で1.の画像まで戻ります。

テキストやボタン要素を利用することが多いかなと思います。

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

TABLE OF CONTENTS

目次の作り方

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

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

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

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

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

目次に使えるDiviエレメント

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

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

テキスト

TABLE OF CONTENTS

・content 1

・content 2

・content 3

トグル

TABLE OF CONTENTS

・content 1

・content 2

・content 3

 

ブラーブ

$

content 1

$

content 2

$

content 3

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

当ブログではトグル要素を使って目次を作成しています。 

MATOME

まとめ

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

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

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

【神機能】Webサイト制作を10倍楽にするDIVIの使い方5選

作業効率を大きくあげるDiviのおすすめ機能を紹介しています。

【Divi】要素をスクロール追従させる方法(スティッキー)

スクロールしてもついてくる要素を外部プラグインなしで設定できます。

More of DESIGN

デザイン関連記事

デザイン関連の記事をピックアップして紹介します。

併せて読んでみてください。

【2020年版】定番ストックフォト6選を比較検証。おすすめはどれ?

定番のストックフォトを項目別に比較しています。

【初心者も簡単】YouTubeの再生回数を上げるサムネイルの作り方。

サムネイルの作成方法を解説しています。

【動画編集】Premiere ProとAfter Effectsの違い。初心者が知っておきたい6つの特徴について解説。

動画編集で使うPremiere ProとAfter Effectsの違いについて説明しています。

【動画編集】Premiere「Rush」と「Pro」8つの違いと使い方を解説。

Adobeの動画編集アプリPremiere RushとProの違いについて説明しています。

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるセットプランも紹介。

IllustratorとPhotoshopの違いについて説明しています。

【超便利】Adobe Stockとは? 初月無料&利用する5つのメリットを解説。

Adobe Stockを利用するメリットについて書いています。

【2020年版】Adobeのおすすめプランは?7の職業・デザイン別にコンプリートプランユーザーが解説。

Adobeを始める人にどのソフトとプランを使うべきかを書いています。

【無料・有料8選】おすすめフリー素材・画像イラストストックサイト【商用利用可】

無料から有料までオススメの画像サイトをまとめました。

【特典】2ヶ月間無料でAdobe CC・Stockのプランを利用する方法。これから始める方も。

利用しているプランを2ヶ月間無料にする方法について書いています。

【特典】Adobeのプランを2ヶ月無料で利用する方法

既存ユーザーも新規ユーザーも2ヶ月無料でCC/Stockを利用する方法についてです。

【商用利用可】おすすめフリー素材・画像サイト

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

Adobe Photoshopでできる10のこと

Photoshopでできるデザインや機能について解説しています。

【UI/UX】Adobe XDでできる6のこと

Adobe XDでできるデザインや機能について解説しています。

【3D】Adobe Dimensionでできる9のこと

Dimensionでできるデザインや機能について解説しています。

Pin It on Pinterest

Share This