早速ですが、ブログを読んでいるときに、
「先程の……」
とか
「最初にお話しした……」
と、なっていることがありますよね。
もちろん私も使います。
で、「先程」「最初」の内容が直前にあるならすぐ見返すことができます。
でも、だいぶ読み進めてから「最初」と言われてしまうと、物忘れが激しい私は最初まで戻って確認、また元のところに進んで読み続けることになります。
長い文章だとちょっと大変(^_^;)
という事で、目次をタップすると移動するように、「最初に…」まで簡単に戻れる方法は無いものか？と調べまくって見つけましたー！
ページ内リンクの書き方
出発地
<a href="#アンカー名">文字・画像</a>
到着地
オススメ（ＡＭＰでも使えます）
<◯◯ id="アンカー名">文字・画像</◯◯>
こんな感じで。
<p id="アンカー名">文字・画像</p>
<div id="アンカー名">文字・画像</div>
◯◯の部分は色々当てはめることができます。
※以下の例文は「p」で紹介させていただきます。
ちなみに、ちょっと前までの到着地の書き方
（現在は非推奨となっています）
<a name="アンカー名">文字・画像</a>
出発地 <a href="#アンカー名">文字・画像</a> 到着地 <p id="アンカー名">文字・画像</p>
これがワンセット。
アンカー名のところには自分で好きな文字を入れてＯＫですが、必ず同じ文字を入れてください。
同じ文字でないとジャンプしません。
文字・画像の部分は同じにする必要はありません。
例）
<a href="#雪ん子">◯◯◯</a> <p id="雪ん子">■■■</p>
試してみる
では早速。
こちらのリンクを押してみてください！
→押してみてね
<a href="#A">押してみてね</a>
お帰りなさい
<p id="B">お帰りなさい</p>
どうでしょうか？
下まで行って、戻ってこれたはず。
こっそりリンクを作る
出発地はタップできないと困ってしまいますので、<a href="#アンカー名">文字・画像</a>の文字・画像は省くことができません。
しかし、到着地は到着する地点を設置するだけなので<p id="アンカー名">文字・画像</p>の文字・画像は省いて<p id="アンカー名"></p>としてもＯＫです。
何も表示されずスッキリさせることができますね。
見出しへのリンクを作る
目次の項目を押して、「見出し」へ移動できるってことは......
もしかして、「見出し」は到着地と設定されているのでは？
と思って試してみました。
「画像を使ってみる」の見出しへ
<a href="#画像を使ってみる">「画像を使ってみる」の見出しへ</a>
予想的中！
他ではブログをやっていないので分かりませんが、はてなブログなら見出しに手を加えなくても移動先として設定出来ることは判明しました。
アンカー名の付け方
色々なブラウザで対応出来るように、基本は半角英数を使うことをオススメします。
しかし、私は参考にさせていただいたサイトの説明をよく読まずに日本語で付けてしまいました。
目次へのリンクを作るなら日本語になるし……
結果として、Chrome、ドルフィンブラウザ、Firefoxではジャンプできました。
はてなブログ側の設定で出来るようになっているのかもしれません……
と、言うより。
この記事を書いていて改めて気づいたのですが、アンカー名は表示されないので、そもそもちゃんとした名前を付けなくてもいいんですよね(笑)
「見出し」へのリンク以外は、A、B、C等と簡単な名前で十分ですね。
リンクの見た目
色を変える
アンカー名の後に
style="color:色;"
を追加
今回はredとしていますが、もちろん色コードでＯＫです。
（<a href=～で説明しますが、<p id=～も同じ方法で変更可能です。）
文字・画像
<a href="#アンカー名" style="color:red;">文字・画像</a>
アンダーラインを消す
アンカー名の後に
style="text-decoration:none;"
を追加
そもそもスマホだとアンダーラインがひかれておらず、PC版のみ線がひかれているんですよね。
文字・画像
<a href="#アンカー名" style="text-decoration:none;">文字・画像</a>
画像を使ってみる
先程のボタンは文字のボタンでしたが、画像を使うことも可能です。
<a href="#A">押してみてね</a>
の「押してみてね」を<img src="画像のURL">に変更します。
※一般的な他のページへのリンク<a href="他ページのURL">文字・画像</a>でも使えますよ。
画像のURLの調べ方はこちら
→画像のURL(アドレス)の調べ方
<a href="#A"><img src=" https://cdn-ak.f.st-hatena.com/images/fotolife/s/snow0303/20170610/201706101920◯◯.jpg"></a>
※押すと少し下の方に移動します
画像の大きさを変えたい場合は、
幅 width="○○"
高さ height="○○"
を加えます。幅のみ、高さのみでもOK。
○○は数字だけ、○○px、○○%でも。
他にもあるかな……？
<a href="#A"><img src=" https://cdn-ak.f.st-hatena.com/images/fotolife/s/snow0303/20170610/201706101920◯◯.jpg" width="50%"></a>
※押すと少し下の方に移動します
まとめ
この記事では説明のためにたくさんジャンプしました。
ただ、実際の記事ではジャンプしすぎるとドコにいるの分からなくなったり、読んで欲しい部分を飛ばされてしまったりするので、ほどほどにしましょう。
お世話になったサイト
ページ内ジャンプ HTML
http://www.shoshinsha.com/hp/ref/html/a_name.html
2018/10/08
id:game_walker さんの記事を拝見して一部修正しました。
【はてなブログ】ページ内リンクが上手くいかない時の対処 - id属性を使う
いらっしゃいませ！
<p id="A">いらっしゃいませ！</p>
こちらのリンクで「試してみる」へ戻れます
→「試してみる」へ戻る
<a href="#B">「試してみる」へ戻る</a>
こちらのリンクで「画像を使ってみる」へ戻れます
→「画像を使ってみる」へ戻る
<a href="#画像を使ってみる">「画像を使ってみる」へ戻る</a>
