4.プチ☆カスタマイズ

ページ内リンク - HTMLのお勉強

ページの途中へリンクする方法  <a name="※"></a>

別のページにリンクをつけるのではなく、同じページ内で、リンクを付けたい、という場合の方法。

ページの途中をリンクの着地点にする方法です。

例えば、Q&Aページを作りたい・・・なんていう場合、はじめに、質問内容である<Question>リストを記載して、クリックすると、下に書いてある<Answer>に飛ぶという感じ。

長々とスクロールしてみるよりも、閲覧者にとっては効率的ですよね。

1. 同一ページ内の指定箇所へのリンク

▼実際、体験してみましょう。1番目の質問です。順にクリックしてみてください。

 

Q:1番目の質問です。

Q:2番目の質問です。

Q:3番目の質問です。

Q:4番目の質問です。

Q:5番目の質問です。

 

Q:1番目の質問です。

A:

 

Q:2番目の質問です。

A:

 

Q:3番目の質問です。

A:

 

Q:4番目の質問です。

A:

 

Q:5番目の質問です。

A:

 

 

■設定は2箇所。この2つがペアです。

 

1.着地点に下記のタグを入力しておきます。

  <a name="任意の文字"></a>

 

2.リンク箇所に下記のタグを入力します。

  <a href="#任意の文字">リンク先の名称</a>

 

 ※任意の文字は、半角英数で設定しましょう。

 

 

■使い方参考:上記サンプルのHTMLソース

 

<p><a href="#1">Q:1番目の質問です。</a></p>
<p><a href="#2">Q:2番目の質問です。</a></p>
<p><a href="#3">Q:3番目の質問です。</a></p>
<p><a href="#4">Q:4番目の質問です。</a></p>
<p><a href="#5">Q:5番目の質問です。</a></p>
<p>&nbsp;</p>
<p><a name="1"></a>Q:1番目の質問です。</p>
<p>A:</p>
<p>&nbsp;</p>
<p><a name="2"></a>Q:2番目の質問です。</p>
<p>A:</p>
<p>&nbsp;</p>
<p><a name="3"></a>Q:3番目の質問です。</p>
<p>A:</p>
<p><a name="4"></a>Q:4番目の質問です。</p>
<p>A:</p>
<p>&nbsp;</p>
<p><a name="5"></a>Q:5番目の質問です。</p>

 

【着地点が画像や見出しの場合】

文章項目がないと、直接タグを入力できないので、画像や見出の上に「コンテンツ追加」で「文章」を設置してHTMLソースを書き込みます。

保存をクリックするとおもてにに表示されませんが、大丈夫。実際にクリックして確認してください。

2. 別ページ内の指定箇所へのリンク

▼実際体験してみましょう。クリックすると別ページに行くので、戻ってきてくださいね。

 

「料版から有料版にアップグレードした場合 」へリンク!

 

 

■設定は2箇所。同一ページとリンク箇所が変わります。 

 

1.着地点に下記のタグを入力しておきます。

  <a name="任意の文字"></a>

 

2.リンク箇所に下記のタグを入力します。

  <a href="ページのURL#任意の文字">リンク先の名称</a>

 

※任意の文字は、任意の同じ半角英数の文字です。

 

■使い方参考:上記サンプルのHTMLソース

この2つがペアです。

<a href="https://jim-do-it-yourself.jimdofree.com/%E3%83%9B%E3%83%BC%E3%83%A0/%E7%84%A1%E6%96%99%E7%89%88%E3%81%A8%E6%9C%89%E6%96%99%E7%89%88%E6%AF%94%E8%BC%83/#yuryo">「有料版から有料版にアップグレードした場合 」へリンク!</a>  ←リンクされます。

 

<a name="yuryo"></a>有料版から有料版にアップグレードした場合←着地点です。

 

 

【重要:別ページのURLについて】

jimdoのページURLは、日本語で表示されていますが、HTMLソースでは、半角英数に自動的に置き換えられてるので、上記の様に長いURLとなります。

ページのURLは、編集画面上でなく、必ず実際に表示されるページのURLをコピペして入力するのを間違えないように注意してください。