ページの途中にリンクする方法

こんにちは、かーずです。

ブログを書いていて、過去の記事に書いてあった「あの部分」を参照したいなーって思うことがあると思いますが、普通はそのアドレスへのリンクを張付ますよね。

でも、参照された記事にあまりにいろんなことが書かれていて、その記事のどこを読んで欲しいか特定するのが難しい場合、読む方としては困ります。

そんな場合は、記事の読んでもらいたいところにダイレクトに飛んでくれた方が読者にとってはありがたいですよね。
今回はその方法をご紹介します。
（ただし、この方法は自分で書いた記事を参照する場合のみ有効な方法です。それから、携帯からは認識されません。）

では始めます。

この方法は、参照される記事にも仕掛けをしておく必要がありますので、まず編集画面を開き、参照される記事の指定したい場所のHTMLタグを表示します。

そして、どのタグでもいいので、その場所に名前をつけてあげます。
この例でいくと、<br>タグに"section1"という名前を付けたところです。

<タグ名 id="名前">

たったこれだけです。

一昔前は、<a name="名前">ここに文章</a>みたいな感じで、<a>タグと"name"属性を組み合わせて実現するしか方法がありませんでしたが、現在は汎用の"id"属性があるのでとても便利です。

どのタグでもいいといいましたが、一応例外はあります。ただし、記事内に出てくるタグでその例外に引掛かる場面は多分ないと思われますので省略します。
それから、今回はあえて<BR>タグに名前をつけましたが、それはHTML編集をしない人でもほぼ確実に使われるタグだからそれを使っただけです。他にも<A>、<DIV>、<P>などほとんど全てのタグに名前をつけることができます。

ひとつ注意して欲しいのは同じ記事内に何箇所も名前を付ける時は必ず違う名前をつけなければならないと言うことです。同じ名前があちこちに出てきたらどれを参照していいか分からないですからね。

で、これを上書き保存して、準備は完了です。


次に、記事作成画面でまずは普通にリンク設定してください。（どのブログでも、リンクボタンなんかで簡単にできるはずなのでここは省略します。）

その後、またHTMLタグを表示してそのリンクにちょっと修正を加えます。
その画面でリンクを見ると、
<a href="http://ameblo.jp/mixturet/entry-10458625218.html>ここに文章が入ります</a>
こんな感じになっていますよね。

これを
<a href="http://ameblo.jp/mixturet/entry-10458625218.html#section1">ここに文章が入ります</a>
に修正します。赤文字部分は何を意味しているかはお分かりですね。さっき名付けた名前です。

普通にリンク作成した宛先に"#名前"を追加するだけです。

呼び出し元からの記述方法をまとめると

<a href="呼び出したい記事URL#名前">ここに文章が入ります</a>

これだけです。

ちょっとだけ手間が掛かりますけど、読んで欲しいところにダイレクトに飛んでくれるので、ごちゃごちゃいろいろ書いている記事に飛ばす場合には有効な方法ですよ

この方法を使えばこんな感じでリンクされます。 （PCのみ。ケータイからアクセスしても記事の先頭に飛びます）
どうですか、記事の途中にリンクされてますよね。

この方法を頭に入れておけば、「この部分いずれ使えるな～」って部分があれば、予め名前をつけておくといったこともできますよね。

以上、ためになるかはわかりませんけど、こんなこともできますよ～ということで紹介しました。

それでは～