【WordPress】ページ内の任意の位置にジャンプする

WordPress

WordPressで記事を作成していると、ページ内でジャンプさせたくなるときありますよね。今回は、ページ内で任意の位置にジャンプする方法をご紹介します。

ジャンプする先のことを「アンカー」、ジャンプするために設置する仕掛けのことを「リンク」といいます。

【HTML】ページ内ジャンプする方法

大きく2つあります。

  • TinyMCE Advancedプラグインを設置する
  • HTMLで記入する

HTMLで記入する方法をご紹介します。

【HTML】ページ内ジャンプ設定の流れ

手順は2つです。

1.アンカーを設置する。
2.リンクを貼る。

アンカーを設置する

ジャンプする先を決めます。

ジャンプしたい行と行のあいだに下のコードを挿入してください。

<a id=“半角英数字”></a>

「英数字」に任意の英数字を入れてください。このとき英数字は半角です。
また、ページ内で複数のジャンプをする場合は、他と被らないように設定してください。コツとしては、記事上部からの番号(01、02、・・・、〷)やジャンプする場所の名称(Point、Reazon1、Reazon2、Example、Point2)等にすると、ダブりなく設定しやすいです。

以下で手順を一つずつ説明します。
1.ジャンプ先にしたい場所に空欄を設置(環境はWindows、ビジュアルエディター、テーマはCocoonです)

2.空欄右端の「+」を押して、「カスタムHTML」をクリック。よく使うものの中にカスタムHTMLがない場合は、ブロックの検索に「HTML」を入力して検索すると見つけることができます。

3.上で示したコード(<a id=“半角英数字”></a>)を入力

リンクを貼る

どこからジャンプするのかを決めます。

手順を一つずつ説明します。
1.クリックしてジャンプさせたい文章を選択し、リンクボタンを押します(Ctrl+Kでもよい)

2.リンクボタンをクリックすると、入力するための空欄が出てくるので、そこに「#英数字」を入力し、Enterキーを押す。
 ※ここで入力する英数字は、アンカーと同じもの

動作確認

アンカー設置と、リンク貼り付けができたら、プレビュー等で動作確認することをおすすめします。

ちなみに、本ページにもページ内ジャンプを設置してみた
↓↓↓

「ページ内ジャンプ設定の流れ」トップへ

うまく動作しないときの対処方法

動作確認してみてうまくいかないときは、以下の点を確認してみてください。

・入力したコードは半角か
 よく間違える原因の一つです。「”」や「#」スペースが全角になっていないでしょうか。

・「#」があったり、なかったり
 #はアンカーには不要です。リンクには必要です。

コメント

タイトルとURLをコピーしました