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

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

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

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

リンクの仕組み

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

 

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

 

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

 

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

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

※ 以下の操作ガイドは、Google Chrome を使っています。

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

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

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

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

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

 入力ボックス右端の▼をクリックし、リンク先があるページを選ぶ

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

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

保存」をクリックする

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

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

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

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

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

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

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

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

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

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

該当の id セレクタを右クリックし、Copy]→[Copy selector]をクリックします。(この操作で、id セレクタが、クリップボードにコピーされる)

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

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

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

① 編集モードにしたリンク元のページで、リンクを設定するコンテンツ、あるいは文字列を選択し、編集メニューを表示する

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

jdg03G_08:HTML編集
jdg03G_08:HTML編集

③ リンク元となるHTMLソースで、すでに設定済みのリンク先ページ情報に、ページ内リンク先の id セレクタを[貼り付け]で追加します。追加箇所は、下図に示すように、リンク先ページ情報の最後にする。ページ情報の最後の部分は "・・・073/" のように、/(スラッシュ)と "(ダブルクォーテーション)となっている。この部分の / と " の間にカーソルを点滅させ、次に Ctrl + V(貼り付け)キーを押す。 (この操作で、クリップボードにコピーされていた id セレクタが貼りつく)

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

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

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

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

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