閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

Jimdoウェブデザイン
ページの特定箇所へリンクする

Jimdoでは、コンテンツの「文章」から簡単にリンクを設置できます。

しかし、この機能は単純にページからページへのジャンプとなり、同じページの特定の箇所にジャンプする、あるいは別のページの特定の箇所にジャンプするように設定したい場合は、ひと手間を加えることになります。

同じページの特定箇所へジャンプする

着地点にidを設定する

特定の箇所にジャンプするには、まず着地点(アンカー)がどこかを指定する必要があります。

着地点となるHTMLタグ(開始タグ)の中に、下の画像のようにid=" "を記述します。

Jimdo HTMLの編集ボタン Jimdo HTMLの編集画面 アンカー(id)を設定する

上の画像ではidの値をgoalとしていますが、任意の文字や数字でOKです。ただし、文字は半角アルファベットで記述します。

特定箇所にジャンプするとき、見出しを着地点するケースが多いと思いますが、Jimdoではコンテンツの「見出し」から見出しを作成すると、HTMLを調整できないので、その場合はコンテンツの「文章」から設定するのが簡単です(参考:「文章」でHTMLを編集する)。

コンテンツ「文章」の「HTMLを編集」から文章を見出しに変更する

リンクを設定する

発リンクしたい文章(アンカーテキスト)に対して、メニューから適当なページへリンクを設定します。

アンカーテキストにリンクを設定する

こうすることで、リンクするための基本コードが生成されて処理が簡単になります。

ここで「HTMLの編集」を開くと、アンカーテキストが<a href=" "> </a> でくくられていますので、" "の部分を、"#id名"に書き換え、保存します。

「HTMLを編集」画面で設定されたURL
「HTMLを編集」画面でURLを変更する

発リンクを設定するときには、id名の前に#が必要になります。

これで同じページ内の指定した箇所へのリンクが設置されました。

別のページの特定箇所へジャンプする

特定箇所にジャンプするリンクは、同じページ内であっても、別のページ内であっても、基本は同じです。

ただ別のページの場合には、発リンクを設定するときに別のページのurl/#id名と記述します。

「HTMLを編集」画面で別ページの特定箇所のURLを記述する
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

こちらも役立つかも?

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter