4.プチ☆カスタマイズ
ページ内リンク - HTMLのお勉強
ページの途中へリンクする方法 <a name="※"></a>
別のページにリンクをつけるのではなく、同じページ内で、リンクを付けたい、という場合の方法。
ページの途中をリンクの着地点にする方法です。
例えば、Q&Aページを作りたい･･･なんていう場合、はじめに、質問内容である＜Question＞リストを記載して、クリックすると、下に書いてある＜Answer＞に飛ぶという感じ。
長々とスクロールしてみるよりも、閲覧者にとっては効率的ですよね。
１. 同一ページ内の指定箇所へのリンク
▼実際、体験してみましょう。1番目の質問です。順にクリックしてみてください。
A：
A：
A：
A：
A：
■設定は２箇所。この２つがペアです。
１．着地点に下記のタグを入力しておきます。
<a name="任意の文字"></a>
２．リンク箇所に下記のタグを入力します。
<a href="#任意の文字">リンク先の名称</a>
※任意の文字は、半角英数で設定しましょう。
■使い方参考：上記サンプルのHTMLソース
<p><a href="#1">Q：１番目の質問です。</a></p>
<p><a href="#2">Q：２番目の質問です。</a></p>
<p><a href="#3">Q：３番目の質問です。</a></p>
<p><a href="#4">Q：４番目の質問です。</a></p>
<p><a href="#5">Q：５番目の質問です。</a></p>
<p> </p>
<p><a name="1"></a>Q：１番目の質問です。</p>
<p>A：</p>
<p> </p>
<p><a name="2"></a>Q：２番目の質問です。</p>
<p>A：</p>
<p> </p>
<p><a name="3"></a>Q：３番目の質問です。</p>
<p>A：</p>
<p><a name="4"></a>Q：４番目の質問です。</p>
<p>A：</p>
<p> </p>
<p><a name="5"></a>Q：５番目の質問です。</p>
【着地点が画像や見出しの場合】
文章項目がないと、直接タグを入力できないので、画像や見出の上に「コンテンツ追加」で「文章」を設置してHTMLソースを書き込みます。
保存をクリックするとおもてにに表示されませんが、大丈夫。実際にクリックして確認してください。
２. 別ページ内の指定箇所へのリンク
▼実際体験してみましょう。クリックすると別ページに行くので、戻ってきてくださいね。
■設定は２箇所。同一ページとリンク箇所が変わります。
１．着地点に下記のタグを入力しておきます。
<a name="任意の文字"></a>
２．リンク箇所に下記のタグを入力します。
<a href="ページのURL#任意の文字">リンク先の名称</a>
※任意の文字は、任意の同じ半角英数の文字です。
■使い方参考：上記サンプルのHTMLソース
この２つがペアです。
<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をコピペして入力するのを間違えないように注意してください。