リンククリックでページ内の指定位置へジャンプさせる方法

リンククリックでページ内の指定位置へジャンプさせる方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、リンクをクリックすると、ページ内の指定位置へジャンプさせる方法についてご紹介します。

この方法を使うと、例えば、長い記事を小見出しを付けていくつかに区切っている場合などに、記事冒頭に簡単なメニューを付けて記事内の好みの項へジャンプできるようにするといったことができるようになります。

一例として、アメブロカスタマイズ目次ではそういった使い方をしていますので、もしイメージしにくい場合は実際にご覧になってみてください。

では、以下でやり方をご紹介します。

ジャンプ先を設定する

まずは、ジャンプ先となる位置に「name」という属性を持ったアンカータグ(aタグ)を記述します。

記事内の好みの位置に「見えないしおり」を挟み込むイメージです。

(しおり用)aタグは以下のように記述します。

<a id="midashi1" name="midashi1"></a>

太字「midashi1」の部分にはお好きな名前を設定することができます。

ただし、この名前はページ内で重複することのないように命名しなければうまく動作しません。

特に1ページに複数の記事が表示される設定になっている場合は注意する必要があるかと思います。

また、アメブロの初期状態でもいくつか使われている名前があり、それらも使えませんので注意が必要です。

もし、使える名前がわからない場合は、ひとまず投稿して動作確認をし、変な位置にジャンプするようなら変更するという手順でやるといいでしょう。

なお、「id=」と「name=」の2つを同名で設定していますが、通常この方法が慣例となっていますので、このようにしておかれると良いと思います。

ジャンプ元を記述する

次に、ジャンプ元のリンクとなるアンカータグ(aタグ)を記述します。

こちらは通常の「href」属性を持ったアンカータグで、次のように記述します。

<a href="#midashi1">見出し1</a>

リンク先URLの指定はジャンプ先の(しおり用)aタグの名前の前に#を付加したものとなります。

以上の方法で、クリックで記事内の指定位置に一瞬でジャンプするリンクを設置することが可能です。

そこで、試しに、この記事にも設置してみました。

実は、この記事の先頭には、

<a id="a2013052501_midashi1" name="a2013052501_midashi1"></a>

という(しおり用)aタグを記述してあります。

で、そこにジャンプするには、

<a href="#a2013052501_midashi1">記事の先頭へジャンプ</a>

というリンクタグを記述しておけばOKです。

というわけで↓こちらがそのリンクです。
記事の先頭へジャンプ

注意

なお、実はアメブロでこの方法を使うと、ジャンプ先の位置をアメーババーが隠してしまって、ぴったり良い位置に表示することができない場合があります。

その場合は、アメーババーがページ最上部に固定されないようにすることで回避できると思いますので、アメーババーが上部に固定表示されることにこだわらない場合は試してみてください。

以上、リンククリックでページ内の指定位置へジャンプさせる方法をご紹介しました。

よかったら参考にしてくださいね。

関連記事

アメーババーがページ最上部に固定されないようにする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ