100歳人生の準備、はじめました。

  1. WEBサイト

【Jimdo】同じページ内にアンカーリンクを設定する方法

ページ内リンク(アンカーリンク)は
同じページ内にジャンプするように
指定ができるので便利です。

アンカーリンクを配置することにより、
同じページ内の10行目、
といった具合に指定した箇所にジャンプさせることができます。

ページ内リンクを設定すると、
画面をスクロールする必要なく指定された場所へ
移動(ジャンプ)することができます。

先日、Jimdoで作ったウエブサイトに
アンカーリンクを付けたいと思い、
Jimdoの公式サイト「ジンドゥークリエイターサポート」
https://help.jimdo.com/hc/ja/articles/115005522443
で検索し、その方法を試そうと思ったのですが
記載されている情報が不足していたりと
うまく設置できませんでした。

そこでいろいろ調べ、
アンカーリンクを付ける方法を見つけたので
ご紹介しておきます。

ページ内リンクは次の二つを設定する必要があります:

  • 起点(ジャンプポイント)
  • 着地点(ジャンプ先)

順番に説明していきますね。

1.起点(ジャンプポイント)を設定します

まず、ジャンプの起点と着地点のそれぞれに文章を用意します。

入力したい箇所にポインターを合わせ
「+コンテンツを追加」が表示されたらクリック。
「文章」を選択。
入力欄が開くので、文字や文章を入力。
(例では、起点に「ディナー>>」、着地点に「ディナー」と入力)

ジャンプの起点に「ディナー>>」と入力
着地点に「ディナー」と入力

【point!】
同じ文章の方が分かりやすいですが、必ずしも
同じ文章である必要はありません。

① HTMLの編集を開く:
起点と着地点の文章の準備ができたら、HTMLの編集を開きます。
(開きたい文字の横あたりをクリックすると編集画面が開きます)

②</>のマークをクリックすると、HTMLの編集画面が開きます。

表示されたコードの中に、起点として入力した文字(今回は ディナー>> )
を見つけてください。

③ディナー>>の文字のすぐ両脇に

文字のひだり側に <a href=”#A”>
文字の右側に  </a>

を追記します。

※全て半角です。
※このサイトからコピーして使用する場合は、
一旦、テキストファイルなどに貼り付けてからご使用ください。

例)
ディナー>>
 ↓追記後         
<a href=”#A”> ディナー>> </a>

④さらに「アンカー名」を付けて「A」の部分と差し替えます。
「#」はつけたままにしておくことを忘れずに!
(今回の例は、dinnerというアンカー名をつけてみます)

<a href=”#A”> ディナー>> </a>
     ↓
<a href=”#dinner”> ディナー>> </a>

注意:複数のページ内リンクを設置する場合、
アンカー名には同じ名前は使用できません。
また、スペースや特殊文字 (/, (, ), _, ., ;, ,)の使用もできません。

これで起点の準備ができました。

2.着地点(ジャンプ先)を設定します

⑤ HTMLの編集画面を開く:
1.起点(ジャンプポイント)を設定しますと同じ手順で
①②まで進み、 HTMLの編集画面を開いてください。

表示されたコードの中に、着地点(ジャンプ先)として
入力した文字(今回は ディナー )を見つけてください。

⑥着地点「ディナー」の文字のすぐ両脇に

文字のひだり側に <div id=”A”>
文字の右側に </div>

を追記します。

<div id=”A”>ディナー</div>

⑦さらに「A」を「アンカー名」に変更します。
着地点には「#」は不要です。
(今回の例は、dinnerというアンカー名です)

例)
ディナー>>
 ↓追記後         
<a href=”dinner”> ディナー </a>

これで着地点のアンカーリンクもつけられました。

最後に、きちんとジャンプするか確認して完了です!
お疲れ様でした。

WEBサイトの最近記事

  1. 【いちからはじめるJimdo】ホームページにリンクを設定する方法

  2. ホームページに動画を入れてみよう<WordPress編>

  3. 【Jimdo】同じページ内にアンカーリンクを設定する方法

  4. 初期費用0円、運用費も0円!初心者向け、予約機能付きホームページの作り方をリリースしました…

  5. 【サロンOPENへの道】無料で作る、予約システム付きホームページ。フローチャートで選ぼう!…

関連記事