SIRIUS 同じページ内で指定の場所にリンクする方法
1つの記事が非常に長くなってしまう場合がありますね。
その場合、一番見て欲しいページ内の特定の場所に訪問者を飛ばしたいですね、それに他のページの指定の場所(ページ内の特定の場所)に訪問者を飛ばしたいケースも有ります。
例えば、下記リンクをクリックすると、このページの見出し「ページ内リンク先」まで移動します。
ここでページ内指定の場所に飛ばす方法をご紹介したいと思います。
同じページ内で指定の場所にリンクする方法
その場合に使用するのが『a name』タグです。
<a href="#ラベル" >〜 </a> …リンクの元
<a name="ラベル"> 〜 </a> …リンクの先
具体的に表示するとこのようになります。
<a href="#abc">ここから飛ばします</a>
<a name="abc">飛ばしたい先です</a>
設定の手順
1、リンク先(到達点)の設定
まず、リンクの到達点となる任意の要素に、name識別名abcなどを付けておきます。
2リンク元(出発点)の設定
リンク元の href="" には、到達点のURIを指定します。
Iname識別名abcなどについて
name名を付ける際には、以下の点に注意してください。
- 1つのname名は、同じ文書内で1ヵ所にだけ使用できます。(重複させてはならない)
- 使用できる文字は、半角の英数字、ハイフン( - )、アンダーバー( _ )、コロン( : )、ピリオド( . )、です。
- ハイフン以外の記号は使わない方が無難です。
- アルファベットで始めなければなりません。
- 数字や記号で始めてはならない
- 大文字と小文字の区別があります。
別ページの特定部分へリンクする
ちなみに他のページから指定の場所に飛ばしたい場合は
<a href="ここにHTMLを入力#ab">ABの位置へジャンプ</a>
『ここにHTMLを入力』の部分にHTMLを入力することで、違うページから指定の場所に飛ばすことができます。
例えば:
<a href="http://wxiaoy.com/sirius/index.html#ab">ヨウからの特典を受け取る方法</a>
と入力すると、ヨウの『シリウスレビュー』の『ヨウからの特典を受け取る方法』記事の場所まで飛ばすことができます。
こんな感じです:
別ページのトップではなく、指定した場所に飛んでいます。このパターンも結構使います、やってみてね。
ページ内リンク先
テストですよ
関連ページ
- シリウス(SIRIUS)で2カラムサイドメニュー幅変更方法
- デフォルトテンプレートの2カラムサイドメニュー幅変更方法について説明します。
- シリウスでサイドメニューのフリースペースを増やす方法
- シリウスでサイドメニューのフリースペースを増やす方法について説明します。
- SIRIUSシリウスで更新履歴の位置を変更する方法
- SIRIUSシリウスで更新履歴の位置を変更する方法について解説していきます。
- SIRIUSシリウスで更新履歴の背景画像を変更方法
- SIRIUSシリウスで更新履歴の背景画像を変更方法について、解説していきます。
- SIRIUSシリウスの更新履歴枠の角を丸くする&影をつける方法
- SIRIUSシリウスの更新履歴枠の角を丸くすると影をつける方法について解説していきます。
- SIRIUSでカーソルを置くとリンク画像を動かす設定方法
- SIRIUSでカーソルを置くとリンク画像を動かす設定方法について、詳しく解説していきます。
- SIRIUS サイドバーに画像付きのプロフィールを設置方法
- SIRIUS サイドバーに画像付きのプロフィールを設置方法について、詳しく解説していきます。
- SIRIUS クラスの設定機能で蛍光ペンを設定方法
- SIRIUS クラスの設定機能で蛍光ペンを設定方法について、詳しく解説していきます。
- SIRIUSに無料でメールフォームを設置する方法
- SIRIUS(シリウス)に無料でメールフォームを設置する方法について、詳しく解説していきます。
- SIRIUSで記事途中に飾り枠を挿入する方法
- SIRIUS(シリウス)で記事途中に飾り枠を入れる方法について、詳しく解説していきます。
- SIRIUSで動くボタンを作成方法
- SIRIUSで動くボタンを作成方法について、詳しく解説していきます。
- SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法
- SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法について解明します。
- SIRIUSで1つの記事を複数のカテゴリに登録する方法
- SIRIUSで1つの記事を複数のカテゴリに登録する方法について説明します。
- SIRIUSで蛍光ペンをカスタマイズする
- SIRIUSで蛍光ペンをカスタマイズする方法
- SIRIUSでトップへ戻るボタンを実装する方法
- SIRIUSでトップへ戻るボタンを実装する方法について紹介します。
- SIRIUSシリウスの見出しフォントに影をつける方法
- SIRIUSシリウスの見出しフォントに影をつける方法を紹介します。
- SIRIUSのサイトにYouTube動画を『埋め込み』方法
- SIRIUSのサイトにYouTube動画を『埋め込み』方法について紹介していきます。
- SIRIUSでGoogleマップをサイトに埋め込む方法
- SIRIUSでGoogleマップをサイトに埋め込む方法についてご紹介していきます。
- SIRIUSでトップへ戻るボタンに画像を使用する方法
- SIRIUSでトップへ戻るボタンに画像を使用する方法について紹介していきます。
- SIRIUSで画像を横に自動スライドさせて動かす方法
- SIRIUSで画像を横に自動スライドさせて動かす方法を紹介していきます。
- SIRIUS(シリウス)で画像を振り子のように左右に揺らす実装方法
- SIRIUS(シリウス)で画像を振り子のように左右に揺らす実装方法を紹介します。
- SIRIUS(シリウス)で<MAQUEE>タグを使って簡単に画像を動かす
- SIRIUS(シリウス)で
タグを使って簡単に画像を動かす方法をご紹介します。