ページ内リンクの作り方-SIRIUS2

『ページ内 リンク（ジャンプ）』とは、記事内の特定のテキストや画像などをクリックすると（そこに設定済みの）ページ内の特定の位置まで一気に戻る（or 進む）ことができる機能です。

ページ内リンクの代表と言えば、SIRIUS2ではページ右下に表示される「トップに戻る」ボタンでしょうか。

クリックするとするするっとページ先頭まで戻りますでしょ。

ここでは一般的なページ内リンク（ジャンプ）の作り方をご紹介します。

なお一部は完全手動になりHTMLコードを扱うことにもなりますが、記事作成においてはかなり便利な機能なので知っておいて損はありません。

まずはリンク（ジャンプ）元の作成方法をご紹介します。

サンプルで下のようなページ内リンクを作ってみました。

リンク部分をクリックすると下の方にあるリンク先まで一気に移動します。

上のページ内リンクの作り方ですが、まずは「ここをクリックすると詳細ブロックまで飛びます」というテキストを打ち込みます。

次にクリックさせたい部分を範囲選択して、記事装飾メニューの『リンク』アイコンをクリックします。

『アンカーテキスト』にはクリックさせたいテキストが記入済みなので、あとはジャンプ先に設定する予定の”ID”を『リンク先URL』に記入します。

ここではIDに「shosai」と設定してます。

OKをクリックして確定させると下のようなコードに自動変換されます。

ブラウザ上では（特に設定をいじってなけば）リンクが付いたテキスト上には青下線がついてクリックできる状態になります。

別ページや別サイトでもリンク可

同じページ内ではなく別ページの特定のリンク先に飛ばしたいというケースもあります。

その場合はページを指定してから「#」＋IDという付け方になります。

別サイトの場合は下のようにページURLを指定したあとに#＋IDです。

リンク先の設定

続いてリンク先（クリックしたらジャンプする場所）の設定です。

最初の方にある”ここをクリックすると詳細ブロックまで飛びます”という実際のページ内リンクをクリックすると、このページの下の方にある「ここが詳細ブロックの先頭になります」というテキストの位置までジャンプしたかと思います。

そのジャンプ先のテキストは実際には下のようなコードで書かれてます。

こちらは完全手動での設定になります。

まず「ここが詳細ブロックの先頭になります。」というテキストを打ち込みます。

次に段落を意味する『<p>～</p>』というHTMLタグでテキストを囲みます。

次に<p>の後ろに半角スペースを打ち込み、”ここがリンク先ですよ～”という意味合いの（先ほど設定したID）「id="shosai"」を加筆します。

これで完成です。

（ブラウザ上でのリンク先のテキストの表示に変化はありません）

（H2やH3などの）見出しにもページ内リンクを付けられます。

ただし【記事タイトル】内の見出しは”いろいろと面倒な場所”なので、【記事タイトル】内に記入予定の見出しがある場合は【記事本文】内の先頭にH2見出しとして書くことをおすすめします。

その作成方法は基本的には先ほどの段落のやり方と同じです。

見出しの場合は見出し設定を付けた時点で自動的に下のように専用のコードが補完されます。

あとは下のようにh2（h3,h4...）の後ろに半角スペース＋IDを付与すれば完成です。

SIRIUS2のボックス装飾などブロック単位（div）にも指定できます。

例えば［ボックス］→「通常枠」を指定すると下のようなコードが自動生成されます。

この場合は”"nmlbox"”の後ろに半角スペース＋ID挿入となります。

”div”の後ろでも問題ありません。その場合は下のようになります。

画像にもページ内リンクを付けられます。

画像を挿入すると下のようなコードが生成されます。

画像の場合は”img”の後ろに半角スペース＋ID挿入となります。

ここが（リンク先）の詳細ブロックの先頭になります。

元の位置に戻るにはここをクリックしてください。