Wikiのように記事の最後に注釈をつけて、そこへリンクさせる方法

スポンサーリンク


文章を書いた時に、補足となる説明が必要だったとします。こんな風に→(*注1

補足説明を文中に書くと、長くなって文章が散漫になってしまったりするかもしれません。また、ドラえもん(*注2)のように、多くの人が知っているけど、知らない人がいる場合に備えて注釈を入れるなどという場合もあります。

実際に(*注1)か(*注2)をクリックすると、この記事の最後の注釈に飛びます。今回は、Wikiのように、記事の最後に注釈をまとめて書いておき、記事中から、そこへリンクを張る方法です。

リンクを張る実例

ページの途中へのリンクの張り方は、以前の記事に詳しく書いています。ですので、理屈の説明は省略します。今回は実例のみの説明です。

ここでは、すでに本文と、それに対応する注釈を書き上げているものとします。

まず、注釈にidをつけます。

<span id=”note1“>注1の説明文。</span>

<span id=”note2“>注2の説明文。</span>

これで、「注1の説明文」にはnote1というidが、「注2の説明文」にはnote2というidが、それぞれ振られました。

次に、本文中の(*注1)(*注2)という部分にリンクのタグを書き加えます。

<a href=”#note1“>*注1</a>

<a href=”#note2“>*注2</a>

「*注1」をクリックすると、note1へ飛ぶようにしたいのでリンク先は、先頭に#をつけてからnote1と書きます。同様に「*注2」をクリックすると、note2へ飛ぶように、先頭に#をつけてからnote2と書きます。

これで、「*注1」をクリックすると「note1」へ移動しますし、「*注2」をクリックした時には「note2」へ移動するようになりました。

注釈へのリンクを別ウインドウで開く

もし、本文を読んでいる途中で注釈をクリックして、その度に画面が注釈へ移動してしまったら、かえって面倒です。注釈が別ウインドウで開いてくれれば、本文はそのままの位置でいられます。

そのためには、リンクの「aタグを」以下のようにします。

<a href=”javascript:void(0);onclick=”window.open(‘#note1‘);”>*注1</a>
<a href=”javascript:void(0);onclick=”window.open(‘#note2‘);”>*注2</a>

実行例:実際に右のリンクをクリックすると別ウインドウで開きます。 → *注1  
*注2

別ウインドウで開く事の説明に関しては、次の記事を参照してください。


*注1:注1の説明文。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。

*注2:注2の説明文。ドラえもん目覚まし時計はいかがですか?

アラームをセットすると
 「今日も楽しかったね。おやすみ!」
 「明日も頑張って起きようね。おやすみ!」
アラーム時間になると
 「おはよう!今日も楽しい1日のはじまりだー!」
 アラームを止めると
 「ぐっすり眠れたかなー?どこでもドアでお出かけしよう!」
アラーム時間になると
 「起きろー起きろー!遅刻するぞー!はやくはやく!」
 アラームを止めると
 「頑張って起きたね!さぁ、はりきっていこう!」
 などのおしゃべりで起こしてくれます。
ドラえもんを揺らすと
 「う~、暑くてとけちゃいそう。」
 「外で遊んであったまろう!」



関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください