SAMPLE IMAGE この画像は差し替えてご利用ください

039 ページ内にリンクを設定する

ページ内の特定の場所にリンクを張るには、コンテンツに割り振られた id セレクタ名をリンク先として設定します。

id セレクタ名を調べるには、ブラウザーのデベロッパーツールを利用して調べます。

リンクの仕組み

リンクのソースコードは以下のようになる

 

<a href="……" title="リンク先ページ">リンク元文字列</a>

 

"……"は、リンク先の"ページ名"と"ID”との組み合わせで、IDはページ内の特定の箇所をピンポイントで示します。

 

これは、リンク元文字列をクリックすると、”ページ名”のページの"ID"の箇所へジャンプすることを意味します。

リンク元にリンクを設定する

➊ リンク元のコンテンツ(文字列など)に、リンク先のページを内部リンクで設定しておきます

ここでは、リンク元の文字列 "リンク元とリンク先が異なるページにある場合の内部リンクの貼り方" に内部リンクを貼ります。

 リンク元の文字列を選択する

リンクアイコンをクリックする

「内部リンク」タブを選択する

リンク先があるページを選ぶ

※リンク先がリンク元と同じページであっても同様に、リンク先となるページ(すなわちリンク元と同じページ)を選ぶ

「リンクを設定」をクリックする

「保存」をクリックする

jdg03G_06:リンク先ページへ内部リンクを貼る
jdg03G_06:リンク先ページへ内部リンクを貼る

リンク元のソースコードで、リンクの仕組みを確認します。

まずリンク元で[HTMLを編集]をクリックしてソースコードを表示します。

jdg03G_08:リンク元のソースコードを編集する
jdg03G_08:リンク元のソースコードを編集する

ソースコードの解説です。

jdg03G_09:リンク元ののソースコード
jdg03G_09:リンク元ののソースコード

➋ リンク先 id セレクターをコピーする

リンク先を設定するページをプレビュー表示します。

リンク先となる要素(見出しなど)を右クリックし、[検証]を選択し、デベロッパーツールを表示する。ここでは、「リンク元とリンク先・・・」という文字列をリンク先とします。

'cc'から始まるidセレクタのタグにマウスポインターを移動すると、 リンク先となる要素が反転することを確認します。

該当の id セレクタを右クリックし、[Copy]→[Copy selector]をクリックします。

コピー後はデベロッパーツールを閉じます。

jdg03G_07:リンク先i d セレクターをコピーする
jdg03G_07:リンク先i d セレクターをコピーする

➌ リンク元のページで、リンク元コンテンツにリンクを貼る

① リンク元のページで、リンクを設定するコンテンツ、あるいは文字列を選択し、

②[HTMLを編集]をクリックし、ソースを表示します。

jdg03G_08:HTML編集
jdg03G_08:HTML編集

③ HTMLソースでリンク先ページに、ページ内リンク先を[貼り付け]で追加します。

jdg03G_10:リンク先 id セレクターを貼り付ける
jdg03G_10:リンク先 id セレクターを貼り付ける

④ HTMLソースで、内部リンク先が追加されたのを確認したら、OK]をクリックし、ソースを閉じます。

⑤[保存]をクリックします。

❹ 設定されたリンクを確認する

リンク元のページをプレビューモードで表示し、リンク元の文字をクリックして、リンク先へジャンプするかどうかを確認します。