※本サイトのコンテンツには広告が含まれている場合があります

ブログレベルアップ

WordPressで【目次に戻る】リンクを入れる方法は?簡単なやり方を解説!

長い記事を読んでいて、
 

みずー
みずー
ここに目次に戻るリンクが欲しいな。

 
と思ったことありませんか?

目次から読みたい場所に飛べるのは便利ですが、逆に【目次に戻る】リンクってほとんどありません。

もう一度読み返したい部分があっても目次に戻るのが面倒で、あきらめることもあります。

【目次に戻る】リンクがあれば、もっと記事を読んでもらえる可能性が高いですし、結果滞在時間も長くなります。

今回は、目次に戻るリンクを簡単に作成する方法をご紹介します。

ここで紹介する方法を使えば、下のような目次に戻るリンクが作成できます。

目次に戻るリンクを作成

 

みずー
みずー
【目次に戻る】リンクで、ユーザビリティ・滞在時間アップを狙いましょう!

 

【目次に戻る】リンク作成の事前準備

【目次に戻る】リンクを簡単に作成するために、準備して欲しいものが2つあります。

  1. 目次は『Table of Contents Plus』で作成
  2. 『AddQuicktag』を導入

 

みずー
みずー
既に2つとも導入している場合は、次の
『【目次に戻る】リンク作成方法』へ進んでください。

【目次に戻る】リンク作成方法へ進む▶▶

 

まず目次ですが、『Table of Contents Plus』プラグインで作成してください。
これは必須項目です。

目次に戻るリンクは、『Table of Contents Plus』内の「#toc_container」タグに紐づけて作成するためです。

目次をTable of Contents Plusで作成

 

みずー
みずー
『Table of Contents Plus』は、Wordpressブログの目次ならこれ!ってくらい有名なプラグイン!
おすすめです。

 

まだ導入していない人は、

WordPressのダッシュボード

プラグイン

新規追加

で、『Table of Contents Plus』を検索して導入してください。
 
 

次に、『AddQuicktag』プラグインです。

AddQuicktagプラグインをインストール

 
『AddQuicktag』は、よく使うコードやタグ、定型文などを登録しておけば、ボタン一つで編集画面に挿入してくれます。

AddQuicktagは無くても出来ますが、毎回コードの手書きが必要となり、時間もかかるしかなり不便です。

当ブログ(catwalk)でも、吹き出しや表などいろんなコードをAddQuicktagに登録して便利に使ってます。
 

みずー
みずー
AddQuicktagが無いとブログ書けない。。ってくらい必須のプラグインです。

 
導入していない人は、プラグインの新規追加から検索してインストール→有効化しておいてください。

AddQuicktagプラグインをインストール

 

みずー
みずー
準備ができたら、【目次に戻る】リンクを作成しましょう。

 

【目次に戻る】リンク作成方法

前の項目で説明した事前準備ができたら、目次に戻るリンクを作成する方法は簡単です。
 
 
Add quick tagに、コードを登録するだけ!
 
 
これだけで、一発で【目次に戻る】リンクを挿入することができます。
 

みずー
みずー
それでは、手順を説明していきます。

 

  1. まず、Add quick tagの設定画面を開きます。
  2. WordPressのダッシュボード

    プラグイン

    Add quick tagの設定画面を開く

    プラグインAdd quick tagの設定

     

  3. 次に、Add quick tagにリンクコードを登録します。
  4.  

    みずー
    みずー
    次のリンクコードをコピペしてAdd quick tagに登録すればOK!

    <a href="#toc_container">目次に戻る▶▶</a>

    Add quick tagに目次に戻るコードを設定
    みずー
    みずー
    上の画像の➀~➃について説明します。

     
    ボタン名:わかりやすい名前を自由につけてOK

    開始タグ:下のリンクコードをコピペする

    <a href="#toc_container">目次に戻る▶▶</a>

    ※ 「目次に戻る▶▶」の部分がサイトに表示されます。

    『目次へ戻る』リンクのサンプル

      

    みずー
    みずー
    「目次へGO!」など、好きな文言に変更してOKです。

     
    一番右のボックスにチェックする
    チェックすると、全てのボックスにチェックが入ります。

    最後に【変更を保存】を押して登録

みずー
みずー
これで、【目次に戻る】リンクの設定は完了です。

 
記事編集画面を開くと、【目次に戻る】ボタンが追加されていますので確認してください。

Wordpress編集画面内の【目次に戻る】ボタン

 
ビジュアルエディタだと、Quicktagsのプルダウンメニューに追加されています。

Wordpressビジュアルエディタ編集画面内の【目次に戻る】

 

みずー
みずー
それでは、実際に【目次に戻る】リンクを作成しましょう!

 

実際に【目次に戻る】リンクを作成する

『目次に戻る』リンクの作成は驚くほど簡単です!

  1. 投稿の編集画面でリンクを入れたい場所にカーソルを合わせ
  2. Add quick tagで作成した【目次に戻る】ボタンを押すだけ

 

みずー
みずー
記事内の好きな場所にいくつでも設置できます。

 

『目次に戻る』リンクコードを挿入

 

みずー
みずー
ビジュアルエディタの場合も、手順は同じです。

 
目次に戻る▶▶

【目次に戻る】リンクでユーザビリティアップ!

ずっと導入したいと思っていたけど方法がわからなかった【目次に戻る】リンクですが、驚くほど簡単にできました。
 

みずー
みずー
この記事で紹介した方法で問題なく動いていますが、
「もっとこうしたらいいよ。ここは間違ってる。」などありましたら、教えていただければありがたいです。

 
【目次に戻る】リンクは、記事が長くなればなるほど必要とされ、感謝される機能です。

導入は簡単です。

ブログのユーザビリティと滞在時間向上のために、ぜひ取り入れてみてください。
 

みずー
みずー
最後まで読んでいただき、ありがとうございました! 
記事の更新情報などはツイッターで行ってます。
良かったらフォローお願いします!=>みずーのツイッター

目次に戻る▶▶

=>『ブログ運営』カテゴリに戻る=>『ブログレベルアップ』カテゴリに戻る

POSTED COMMENT

  1. こまりちゃん より:

    わかりやすい解説有難うございます!参考 にさせていただきました

    • みずー より:

      こまりちゃんさん、コメントありがとうございます(*^^*)

      参考にしていただけて嬉しいです!
      【目次に戻る】リンク、簡単で便利です(≧▽≦)

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA