ブログでページ内リンクを使ってみたくなりました。ググっても簡単にはできなさそうです。
でも、新しくなったBloggerのブログ作成画面の上の方にある「リンクを挿入/編集」をクリックすると、「アンカーを作成/編集」というのがあることに気づきました。実は、以前からあったのか、なかったのかも覚えていないのですが、ひょっとしたらこれを使えばページ内リンクができるのではないかと思い試してみました。
今までページ内リンクというのを使ったことがなく、よくわかっていないところがありますので、間違っていたらすみません。
作成例
まず、どういうのができたのかを見てください。
「目次」の第1章をクリックすると、「第1章」に、「第2章」「第3章」をクリックするとそれぞれの章に飛びます。
なかなか快適です。
目次
第1章
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
第2章
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
第3章
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
どのようにしたのか
「目次」の「第1章」を選択して、「URLを作成/編集」をクリックします。
「リンク先」URLに、「#chapter1」を入力してOKを押します。「第2章」「第3章」もそれぞれ同じようにして、「#chapter2」「#chapter3」を入力します。
次に、飛んで行く先の「第1章」を選択して、「アンカーを作成/編集」をクリックします。「名前」のところに「chapter1」を入力します。今度は「#」をつけません。「第2章」「第3章」も同じようにして「chapter2」「chapter3」と入力します。
問題
このようにすると、「目次」のそれぞれの章をクリックすると、それぞれの章に飛ぶのですが、飛んだ先の「第1章」にもリンクが張られます。それをクリックするとページの最初に戻ります。
HTMLを見てみると、次のようになっています。
リンク先の「第1章」:<a href="#" id="chapter1">第1章</a>
リンク先の方は、「a href="#"」なのでページ冒頭に戻ってしまうのです。
HTMLを書き換える
そこで、試しに「第2章」の方のHTMLを書き換えてみました。リンク先の方だけです。
を
にしました。これで飛んだ先の「第2章」からリンクが消えました。
また問題が……
よかった、よかった、と思ったのもつかの間、また問題が発生しました。「第2章」を「小見出し」にして、ページを公開してみると、「目次」の「第2章」から本体の「第2章」に飛ばないのです。
そこでまたHTMLを見てみると、なんと、
となって、「id="chapter2"」がいつの間にか消えてしまっていました!
Google様は、勝手な改変を許してくださらないのです。へへ~い。
結局、また本体の「第2章」を選択して、「アンカーを作成/編集」をクリックして、「名前」のところに、「chapter2」を入れました。
HTMLを見ると、
となって、またリンクがついたままになりました。
まとめ
ということで、なんとかページ内リンクを張れないものか、あれこれ格闘してみました。
ひとまず、あまりHTMLなどいじらずに、おとなしく、素直に、諦めつつ、美しさなどにはこだわらず書いていけば、とりあえずページ内リンクが張れるということがわかりました。
飛んだ先もリンクになっていると、色がついてしまうのが嫌なのですがしょうがありません。
まあ、いずれ誰かもっといいやり方を教えてくださるかもしれません。
しばらく、様子を見ましょう。