WordPress ページのどこでも「目次」を作る方法[ページ内リンク]

こんにちは、いとチャンです。

これ知ってます!

WordPressにはブロックエディター[見出し]を使って「目次」を作る方法がありますが

たまに、文章の途中で単独に「目次」を作成したくなる事ってありません。

そんなときに、便利なのが

「ページ内リンク」です。

いわば、ページ内で自分の好きな位置にジャンプできるというものです。

今回は、一番簡単な[アンカー]を使って文章を飛ばす方法を紹介します。

目次

1、ジャンプ元の作成

まず、目次になる文章を書き込みます。

1,目次-1

2,目次-2

上部文章のリンクさせたい範囲を指定します。

指定した状態でブロックエディター[リンク]🔗をクリックします。

「検索またはURLを入力」欄に

[#+id名]

を入力します。(idは何でもいいです)

今回は、 [#1] を入力します。

(豆知識)
「新しいタブで開く」の左側のボタンを右にスライドさせると
リンクさせたときに現在の画面を残したまま別のタブで画面が表示されます。(これ便利です)

入力したら [internal] をクリックします。

1,目次-1

2,目次-2

「リンク」を設定すると指定した範囲に下線が書かれ文字が青くなります。

1,目次-1をクリックすると(画像-4)が表示されます。

[#+id名]を変更したい場合は、

[編集]をクリックすると(画像-5)が表示されて編集可能になります。

これで、ジャンプ元の「リンク」設定は完了です。

2、ジャンプ先の作成

「目次-1」

上の「目次-1」にジャンプさせます。

「目次-1」にカーソルを合わせ

画面右側のブロックエディターの[高度な設定][HTMLアンカー]

「1」と入力します。

これで設定完了です。

プラビュー画面・実際の画面で「1,目次-1」をクリックすると「目次-1」にジャンプします。

(豆知識)

設定は簡単なのですが

(画像-6)の形で「目次-1」に[アンカー]を設定すると

実は、実際にジャンプさせた場合、

「目次-1」の下にジャンプしてしまい

「目次-1」が見えなくなります。

そこで、

「目次-1」の前の行に[スペース]等を設置してそこに[アンカー]を設定すると

「目次-1」が見えた状態でジャンプします。(これ便利です)

まとめ

以上が、[アンカー]を使った「ページ内リンク」の方法ですが

これは、目次ばかりではなく文章・画像と

リンクできるものに対しては設置可能です。

皆さん、いろいろ試してみて他に発見がありましたら教えてくださいネ!

また、「ページ内リンク」のやり方は他にもあります。

他の方法に関しては、後日勉強してから発信しますネ!?

ご読解ありがとうございました!

またネ!!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

定年退職のおじさんです。
某ゼネコン会社で現場監督をやっていました。主に、改装工事の現場管理・工事計画・積算を行っておりました。
パソコンが大好きです。
これからは、今まで学んだパソコンや建築の知識等の色々なノウハウを発信していきたいと思います。
よろしくお願いいたします。

コメント

コメントする

目次
閉じる