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

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

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

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

リンク元とリンク先が同じページにある場合

異なるページにリンク先とリンク元がある場合は、「リンク元とリンク先が異なるページにある場合の内部リンクの貼り方」へ進みます。

➊ 事前にリンク元を作成しておきます

ここでは、中見出しと、2カラムの各コンテンツに文字を入力する。

jdg03G_01:リンク元
jdg03G_01:リンク元

➋ リンク先を設定するページをプレビューする

➌ リンク先となる要素(見出しなど)を右クリックし、[検証]を選択し、デベロッパーツールを表示する

jdg03G_02:リンク先を「検証」
jdg03G_02:リンク先を「検証」

❹ 'cc'から始まるidセレクタのタグにマウスポインターを移動する

jdg03G_03:デベロッパーツール
jdg03G_03:デベロッパーツール

❺ リンク先となる要素が反転することを確認する。

id セレクターの上にマウスを載せ、リンク先となる要素が反転するのを確認します。

反転しない場合は、タグ上でマウスポインターを動かして反転するタグまで移動する。

❻ 該当の id セレクタを右クリックし、[Copy selector]を選択する

jdg03G_04:id セレクターをコピーする
jdg03G_04:id セレクターをコピーする

コピーするセレクターは、class="cc-xxxx" ではなく、id="cc-xxxx" の id セレクターです。

❼ コピー後はデベロッパーツールを閉じる

❽ Jimdo ページを[編集]画面に戻す

❾ リンク元のページに戻り、リンクを設定するコンテンツ、あるいは文字列を選択

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

❿ リンクをクリックし、[外部リンクかメールアドレス]タブをクリック

⓫ コピーしたリンク先セレクターを貼り付け、[リンク設定]をクリック

⓬[保存]をクリックするとリンクが設定される

⓭ 他のリンク元にも同様にしてリンクを張る

以上が、リンク元とリンク先が同じページ内にある場合のリンクの設定方法です。

リンク元とリンク先が異なるページにある場合

リンク元とリンク先が同じページにある場合は、「リンク先とリンク元が同じページにある場合のリンクの貼り方」へ進みます。

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

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

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

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

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

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

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

「保存」をクリックする

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

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

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]をクリックし、ソースを閉じます。

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