WordPressで目次のページ内ジャンプ設定方法

ページ内ジャンプ

前の記事(WordPressでプラグインを使用せずに目次を作成!)で枠を付けた目次の作成方法を紹介したんじゃけど、今回はそれに ページ内ジャンプ(ページ内リンク) を貼り付け、目次をクリックしたらその場所まで一気に飛んでいく様にする為のwordpressの手法を説明する。ブチ簡単なで。

プラグイン「TinyMCE Advanced」を入れとる前提での話じゃけど、テキストエディタでHTMLタグをキー入力で打つという操作は不要。ビジュアルエディタ上での操作だけでページ内ジャンプの設定は完結できる。

プラグイン「TinyMCE Advanced」の設定方法や使用方法は「バス部」のサイトに詳しく説明が書かれとるけん今から導入する人は参考にしてくれ。

 

ページ内ジャンプの概要

ページ内ジャンプを設定する手順はたったの二つじゃ。

リンクを貼る ⇒ アンカーを作る (「アンカーを作る」 ⇒ 「リンクを貼る」でも可)

はい、これだけ。

しかも最初にも書いたんじゃけど、プラグイン「TinyMCE Advanced」を入れとったらビジュアルエディタ上での操作だけで簡単にページ内ジャンプを設定できるんじゃ!

 

ページ内ジャンプの作成方法

プラグイン「TinyMCE Advanced」を入れとる前提で話を進めるけんの。このプラグイン入れとらん人はコードも記載するけん、それをコピペでもOKじゃ。

目次を作成するのにはテキストエディタを使うんじゃけど、リンク貼り付けとアンカーの作成はビジュアルエディタのみで可能じゃ。

その一、リンクを貼る

①先ずは目次作成。
前回の記事(WordPressでプラグインを使用せずに目次を作成!)で説明した<div>タグを使用して目次を下記のように作成する。

目次
タイトル1
タイトル2
タイトル3

 

別に枠無しで下記の様に文字だけでもええと思う。コレは好みじゃ。コレじゃったらテキストエディタを使う必要はない。

目次
タイトル1
タイトル2
タイトル3

 

②次にリンクを貼る。
リンクを貼る目次の「見出し」をドラッグした状態で「リンクの挿入/編集」ボタンをポチッ!

0223link

 

「リンクの挿入/編集」アイコンをクリックすると下記のウィンドウが現れる。あらかじめドラッグしとった文字「タイトル1」がリンク文字列の箇所に表示されとる。

URLの箇所にアンカーにする文字を打ち込むんじゃけど、アンカーを複数登録する場合は文字を必ずどこか変更して、アンカーとする文字がダブらんようにせんといかん。
(もう少し記事下に行くとページ内ジャンプのデモ用意しとるんじゃけど、今回は「#title1」、「#title2」、「#title2」と言う風にアンカーを設定した。)

このURLにアンカーとする文字を打ち込む時に、最初に「#」を付けると言う決まり事があるけん気をつけるように。「#」の後は任意の文字を打ち込む。自分が解ればどんな文字でも問題ない。

今回の例では目次の「タイトル1」には「#title1」というアンカーのリンクを設定した。URLを打ち込んだら「リンク追加」ボタンを押して決定する。しつこいけど頭に「#」を忘れるなよ!

0223link_01

【参考まで、HTMLのコードは<a href=”#title1″>タイトル1</a>となる。】

 

その二、アンカーを作る

アンカーすなわち、目次をポチっと押したら飛んでいく目的地を指定する。

ページをスクロールしてアンカーを作成する「見出し」(目的地)の場所まで進む。そして、先ほどと同じように「見出し」をドラッグする。

今回の例では「タイトル1」をドラッグとなる。ドラッグした状態でビジュアルエディタの「アンカー」ボタンをポチっと押す。
0223anchor

 

 

アンカーボタンを押したら、立ち上がったウィンドウの「名称」の箇所にリンクを貼った時に記入したURLに記述した「#title1」のうち、「#」を除いた「title1」のみを記入する。必ず忘れんように「#」を外す事!
0223anchor_01

 

名称に「title1」を打ち込んだら「OK」を押して完成。これでページ内ジャンプの全ての設定が完了した。

後は見出しの数だけ同じ作業を繰り返すだけじゃ。たったこれだけじゃけん、ブチ簡単じゃろ?

ページ内ジャンプの設定はビジュアルエディタのみでできるけん簡単じゃ!

【参考まで、HTMLのコードは<a id=”title1″></a>タイトル1となる。】

 

ページ内ジャンプのデモ

下のタイトル1~3をクリックしたら直ぐ下のアンカーを設定した場所まで飛ぶけん確認してみてくれ。

飛びます!飛びます!
⇓   ⇓  ⇓   ⇓

 

飛びます!飛びます!
⇓   ⇓  ⇓   ⇓

 

飛びます!飛びます!
⇓   ⇓  ⇓   ⇓

 

タイトル1

 

飛ぶかも!飛ぶかも!
⇓   ⇓  ⇓   ⇓

 

飛ぶかも!飛ぶかも!
⇓   ⇓  ⇓   ⇓

 

飛ぶかも!飛ぶかも!
⇓   ⇓  ⇓   ⇓

 

タイトル2

 

飛べると信じとる!
⇓   ⇓  ⇓   ⇓

 

飛べると信じとる!
⇓   ⇓  ⇓   ⇓

 

飛べると信じとる!
⇓   ⇓  ⇓   ⇓

 

タイトル3

 

デモは以上。飛ばんかったらゴメン。

ってな感じじゃ。解ったかのう。

最後に

目次に枠を作るのはテキストエディタでHTMLをちょこっとイジらんといかんけど、ページ内ジャンプの設定はビジュアルエディタで「リンクの挿入/編集」と「アンカー」ボタンをポチるだけじゃけん簡単じゃろ?

まあ、「#」を付けたり付けんかったりがウッカリ忘れそうじゃけど、そこだけ押えとけば問題ない。

今回のページ内ジャンプのやり方じゃと、目次をクリックしたら一瞬でアンカーの箇所の「見出し」まで移動するんじゃけど、どうやらスルスルスルーっとスクロールして動かす方法もあるみたいじゃ。

「jQuery」というのを使うみたいなんじゃけど、サッパリわからん。奇跡が起きて万が一、俺に理解ができたらこのブログにも導入してみたいと思う。

まあ、無理かも・・・

(星を押して評価してつかーさい)
悪い← 評価 → 良い
1つ星2つ星3つ星4つ星5つ星 (42 投票, 平均: 3.67 / 5)
読み込み中...

SNSでもご購読できます。

 

関連記事

 

コメント

  1. はへほ より:

    こんちわ
    なんど読んでも広島弁が痛快じゃのぅ
    って、中身もそうとう参考になりますばい。

    何度も読んでるのは
    飛びますと飛び先が混乱してしまうからですわ~

    Excelの昇順、降順とおなじで
    始めにインプットされんと、いつまでも出来んのじゃわ~

    1. 仲枝 より:

      いや~お褒めの言葉?ありがとう!
      適当に書いとるけん読みにくいのは許してつか~さい。

  2. satoshi より:

    ページ内リンクの仕方分かりました。感謝!

    1. 仲枝 より:

      役に立ってえかったわい!わざわざコメントありがとう~!

  3. えび より:

    質問なのですが・・リンクとアンカーの設定後、プレビューでリンクをクリックすると、見出しの次の行から表示されて、見出しは見えなくなるのですが何かコツはあるのでしょうか?

    1. 仲枝 より:

      それぞれの環境によって挙動が変わるけん何ともいえんね〜。申し訳ない!
      表示する端末を変えても同じ症状なんじゃろうか?

      モニターの表示設定(拡大率)、スマホならその機種特有の問題(ソフト&ハード)、ブラウザの種類、WordPressのテーマの問題、テーマをカスタマイズしたかどうか、WordPressのバージョン、テーマをカスタマイズするプラグイン・・・
      とりあえず一つずつ試すしかない・・・
      頑張ってつかーさい!!

コメントを残す


CAPTCHA