MENU

【SWELL】特定位置までスクロールで移動するリンクの作成方法

当ページのリンクには広告が含まれています。
SWELL
  • URLをコピーしました!

目次の見出しをクリックすると、本文中の見出しの位置までスクロールで移動すると思います。このような「クリックで特定位置までスクロールで移動するリンク」をSWELLで作成する紹介します。

目次

動作イメージ

ここをクリックすると記事の最後までスクロールします。

特定位置までスクロールで移動するリンクの作成方法

STEP
HTMLアンカーを設定

スクロールの移動先にHTMLアンカーを設定します。

「移動先のブロックを選択」→「高度な設定」→「HTMLアンカー」に任意の文字列を入力します。ここでは「shita」と入力しています。

shita
HTMLアンカーの設定方法
HTMLアンカーに使える文字

HTMLアンカーには半角英数字だけでなく、ほとんどの記号や日本語も使用できます。ただし、スペース(半角/全角)は使用できません。

とはいえ、実際には半角英数字ハイフン(-)アンダースコア(_)のみを使用したほうが良いでしょう。

HTMLアンカーに使用しないほうが良い文字列

見出しには自動的にHTMLアンカーが設定されます(目次をクリックすると見出しまでスクロールするのはこのためです)。

見出しのHTMLアンカーは「index_id0」「index_id1」「index_id2」……となります。見出しと同じHTMLアンカーを付けてしまうと、誤作動の原因になるので使用しないほうが良いでしょう。

STEP
HTMLリンクを設定

通常のリンク作成と同じようにリンクを作成します。URLには「#」と「先程設定したHTMLアンカー」を設定します。今回はHTMLアンカーを「shita」としたので、「#shita」になります。

#shita
スクロール先HTMLリンクの設定方法

以上で完了です。

ここをクリックすると元に戻ります。

進化し続ける至高のWordPressテーマ

「ワプラボ」もSWELLを使っています!

レンタルサーバーおすすめランキング

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