ページ内の特定の場所へジャンプさせるリンクの張り方

リンクを張るためにはaタグを使いますが、同じページ内の特定の位置にジャンプさせたり、異なるページの特定の位置にジャンプさせる方法がわからないという方も多いと思います。

Web制作者であれば当然知っていることですが、初心者の方から質問を頂く事が多いテクニックの一つです。テクニックというほど難しくなく、すぐにマスターできますので、知らなかった方はこれを機に覚えてみましょう。

縦に長いページの場合、最後まで読んで貰えない事も多いですが、ページの冒頭に目次を付けてページ内リンクを張ることで、その人が気になった項目だけでも見て貰える可能性がでてきます。

この目次がまさにページ内ジャンプになっています。同じページ内のジャンプではなく、他ページの特定の場所へ飛ばすこともできます。ページ下部に「ページトップへ」というリンクを張り、ヘッダーに飛ばすのも同じ手法を使ったものです。

ページ内ジャンプのやり方

ページ内ジャンプのやり方は、飛ばす先の目印となるアンカーを作り、リンクにそのアンカー名を追加するだけです。

アンカーを作る

アンカーの作り方は2つありますので、好きな方を選んでください。

<a name=”アンカー名”>文字</a>
<要素 id=”アンカー名”>

要素というのは、ページ内の見出しになるh2やh3が使われることが多いです。具体的に書くと以下のようになります。

<h3><a name=”a01″>見出し</a></h3>
<h3 id=”a01″>見出し</h3>

私はidを指定する方法を良く使います。

アンカー名はそのページ内でユニークであれば何でも良いのですが、「a01」や「a1」といったようにa+数字を使っている人が多いようです。ページ内に同じアンカー名が無ければ何でもOKです。

アンカーへリンクを張る

ジャンプ先のアンカーができたら、次にそのアンカーへ飛ばすリンクを張ります。

<a href=”#アンカー名”>文字</a>

リンク先として「#+アンカー名」を指定するだけなので簡単ですね。イメージリンクのaタグにアンカーを指定しても大丈夫です。

<a href=”#a01″>見出し</a>

具体的にはこのようになります。

<a href=”http://rensabanet.com/blog/hp/12979/#a01″>見出し</a>

このように絶対URLの後にアンカー名を付けることで、特定のページの特定の場所に飛ばすことができます。私は同ページ内でも絶対URLでリンクを張るようにしています。

ブログなどでトップページに複数の記事を全文表示しているような場合、リンクの指定方法によっては、同じページ内に同じアンカー名が複数あるような状態になりますので注意しましょう。

目次をデザインする

文章の途中にあるテキストリンクで、ページ内の特定の場所へジャンプさせる場合は、上記で説明したやり方で普通にジャンプさせれば良いのですが、ページ内の目次として使う場合には、目次部分をデザインした方が良いかもしれません。

リンクをリストにしてただ並べるだけでも問題ありませんが、デザインすると一気にクオリティが上がったように見えます。

»記事内の目次の作り方とデザイン

アンカー名の指定やリンクの張り方までは同じ手順ですが、最後に目次のリストをdivで囲いそのdivに対してCSSの背景画像を設定しデザインしています。

リスト自体にclassを振ってデザインしても良いですし、liは特に何もしなくてもOKです。やり方はいくつかありますので、自分のやりやすい方法でやってみましょう。目次に背景画像を設定するだけで、だいぶクオリティが上がったように見えます。

ページ内リンクをスクロールで飛ばす

ページ内リンクをクリックした時に、ジャンプではなくスクロールする形にしたい場合は、jQueryを使うのが一般的です。

私自身、jQueryは良く分かっていないのですが、興味がある方は試してみてください。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年4月21日

サブコンテンツ

このページの先頭へ