WordPressで記事を作成していると、ページ内でジャンプさせたくなるときありますよね。今回は、ページ内で任意の位置にジャンプする方法をご紹介します。
ジャンプする先のことを「アンカー」、ジャンプするために設置する仕掛けのことを「リンク」といいます。
【HTML】ページ内ジャンプする方法
大きく２つあります。
- TinyMCE Advancedプラグインを設置する
- HTMLで記入する
HTMLで記入する方法をご紹介します。
【HTML】ページ内ジャンプ設定の流れ
手順は2つです。
１．アンカーを設置する。
２．リンクを貼る。
アンカーを設置する
ジャンプする先を決めます。
ジャンプしたい行と行のあいだに下のコードを挿入してください。
<a id=“半角英数字”></a>
「英数字」に任意の英数字を入れてください。このとき英数字は半角です。
また、ページ内で複数のジャンプをする場合は、他と被らないように設定してください。コツとしては、記事上部からの番号（01、02、・・・、〷）やジャンプする場所の名称(Point、Reazon1、Reazon2、Example、Point2)等にすると、ダブりなく設定しやすいです。
以下で手順を一つずつ説明します。
１．ジャンプ先にしたい場所に空欄を設置（環境はWindows、ビジュアルエディター、テーマはCocoonです）
２．空欄右端の「＋」を押して、「カスタムHTML」をクリック。よく使うものの中にカスタムHTMLがない場合は、ブロックの検索に「HTML」を入力して検索すると見つけることができます。
３．上で示したコード（<a id=“半角英数字”></a>）を入力
リンクを貼る
どこからジャンプするのかを決めます。
手順を一つずつ説明します。
１．クリックしてジャンプさせたい文章を選択し、リンクボタンを押します（Ctrl+Kでもよい）
２．リンクボタンをクリックすると、入力するための空欄が出てくるので、そこに「#英数字」を入力し、Enterキーを押す。
※ここで入力する英数字は、アンカーと同じもの
動作確認
アンカー設置と、リンク貼り付けができたら、プレビュー等で動作確認することをおすすめします。
ちなみに、本ページにもページ内ジャンプを設置してみた
↓↓↓
うまく動作しないときの対処方法
動作確認してみてうまくいかないときは、以下の点を確認してみてください。
・入力したコードは半角か
よく間違える原因の一つです。「”」や「#」スペースが全角になっていないでしょうか。
・「#」があったり、なかったり
#はアンカーには不要です。リンクには必要です。
コメント