ページ内リンクの方法
これは Hatena Blog に限ったことじゃなく、HTMLを扱うページ内移動に使うタグになります。多項目にわたる事柄などがあるときに使うと便利です。
ページ内ジャンプの良い例は Hatena Blog では『目次』です。
『編集 見たまま』で項目に『見出し』を設定し目次を入れると記事を表示したときに、この目次から該当項目に移動することが出来ます。この移動がページ内リンクです。
このページ内移動リンク（ジャンプ）はとっても簡単に出来ますので利用してみてはいかがでしょうか。
実例としてこの記事にこれらのタグをサンプルとして使用しています。ジャンプを試してみてください。
簡単にといっても、これはどうしても『HTML編集』が必要になりますけど、ここに掲載したタグをコピペするだけで使えますのでトライしてみてください。
追記：2019年6月17日
HTMLはブログ形式のルールが優先されるのでブログでは知識がそれなりにないと、簡単なタグといえどかなり面倒です。 Hatena Blog の『HTML編集』でタグを挿入しても気に入らないと（はてな記法じゃないと？）削除されたりします。
なので上下移動で一番便利なのは『目次』かなと思います。
こちらの記事で、目次を使って上下移動を実験してありますので参照ください。
最終的にはCSSが便利と思いますので、時間があるときに『猿でも分かるジャンプボタンの取り付け方』にチャレンジした記事を書きたいと思います。猿は私のことです。
最下段と最上段への移動
ページ内リンクのほとんどは目次でカバーできますけど、目次を使うような内容じゃない場合の雑記ブログなどに用いると便利かもしれないタグです。
最下段へ移動
<p><a href="#bottom">〇〇〇</a></p> ← #id は目的地マーク
↑をHTML編集でページ行頭にコピペで記述します。
次に
<p><a id="bottom">〇〇〇</a></p> ← id の目的地へジャンプ
↑を移動したい下段にある段落行の上にコピペします。急ぎの方はここを読んでくださいの行の上です。
『〇〇〇』は好きな文字列で構いませんし、文字が不要なら全角スペースを入れてください。文字が無いとこの部分のタグは自動で削除される可能性があります。
文字列があれば削除されないので、全角スペースも文字の一種ですからスペースでも大丈夫なわけです。文字列があると混同を誘うので『〇〇〇』よりも見えない全角スペースの方が良いと思います。
『最下段へ』の文字列も任意に変えてい良いですし、見たまま編集で文字サイズを小さくすると目立たなくなって良いと思います。
最上段へ移動
最下段の逆です。同じタグを逆にしてコピペするだけです。
<p><a id="bottom">〇〇〇</a></p> ← id の目的地へジャンプ
↑をHTML編集でページ行頭にコピペで記述します。対になるもう一つのタグは最下段の行にコピペします。ページ内リンクをこれだけしか使わないのであれば id も変更する必要がないですが、それでももしもの為に id 変更をして次のようにしましょう。
<p><a id="p_top">〇〇〇</a></p> ← id の目的地へジャンプ
<p><a href="#p_top">先頭行へ</a></p> ← #id は目的地マーク
コピペの方法は最下段へ移動の時と同じ方法です。
ひとつのブログ内にページ内リンクを複数設けるときは id はそれぞれのリンクで帰る必要があります。リンク先の id 目指してジャンプするので同じ id を使ってしまうと同じ場所にジャンプするからです。
HTML編集の実際
『HTML編集』ってわけが分からないって先入観は捨ててください。分からなくて構いません。例えば『HTML編集』で全文がこんな風になっていたとします。
<h3>きょら海、奄美大島、行くどまままっこり！</h3>
<p> </p>
<p>だいぶ前に申し込んであった同じ内容のツアーは、申し込んでおいた日は催行中止になりました。 </p>
<p> </p>
<p>それで再度同じ内容のツアー募集があったので、催行未定でしたけど何とか梅雨明け頃になりそうな感じで、自分的にも日程がちょうど良さそうな日に申し込みました。</p>
<p> </p>
<p>さてさて今回の申し込みツアーは催行されるのでしょうか？</p>
<p>[:contents]</p>
<p> </p>
<h4>なぜこの日を選んだのか</h4>
<p>選択した日程は6月26日発、2泊3日です。で、なぜこの日を選んだかといえば、ぼつぼつ梅雨が終わるのではないかと想定してです。</p>
<p> </p>
<p>天気も大事ですが、わたしは雨でもそれなりに旅行は楽しめちゃうタイプなので、他の同行ツアー客が雨だからどうのこうのなんて不平を言うのをよそに、雨は雨の旅行で雨も観光だよって考えでとらえます。</p>
<p> </p>
<p>でも、さすがに富士山すそ野ぐるり1周の月一で17回のツアーは、なんだかほとんど雨や小雨や曇りで富士山がろくに見られなかったのはかなり残念な気がしましたけど、ツアー自体は楽しかったです。</p>
<p> </p>
<p>で、この日程選択にした最大の理由は<strong>旅費が安いから</strong>です。梅雨の範疇に入る季節のツアーって旅費がかなり安いのです。本格的なシーズン前だから旅行会社も肩慣らし的なツアーって感じでお得な料金設定を出してきているのじゃないかと思います。</p>
<p> </p>
<p>もっとも高いゴールデンウィークの5月3日は催行が終わりましたけど、これから来る8月11日もゴールデンウィークと同じな料金設定からすると、このツアーに2回参加して3万円のお小遣い付きってな料金設定なのです。</p>
<p> </p>
これらの記述の上と下に、先のジャンプタグをコピペすればいいのです。
<p><a href="#bottom">〇〇〇</a></p> ← #id は目的地マーク
<h3>きょら海、奄美大島、行くどまままっこり！</h3>
・・・略・・・
<p> </p>
<p><a id="bottom"></a>〇〇〇</p> ← id の目的地へジャンプ
ほら、これだけでページ内ジャンプが出来るのです。簡単でしょう。まずは幾つもやろうとしないでこれだけでやってみましょう。
複数ジャンプ方法
最上段からから最下段へのジャンプ、最下段から最上段へのジャンプの両方やりたい場合ってありますよね。これは次のようなタグを同じ方法で行頭と文末に記述するだけです。
<p><a href="#bottom">最下段へ</a> <a id="p_top"></a>〇〇〇</p>
・・・HTML本文略・・・
<p><a id="bottom"></a>〇〇〇 <a href="#p_top">先頭行へ</a></p>
余談ですが Hatena Blog では『編集 見たまま』や『HTML編集』を開くたびにこれらの 〇〇〇などの前のアンカー記号の間に半角スペースが次から次へと追加されていくみたいです。
これは Hatena Blog の仕様なので直せませんから、気が付いた時に『編集 見たまま』でスペースが増えていると思ったらそのスペースは削除してください。
注意としてはアンカー（錨）のマークがあると思いますので、アンカーは消さないでください。
ブログは出来れば全部読んでもらいたいですよね。ページ内移動する方はブラウザをスクロールして最下段まで行って、スターを押して帰るだけの訪問者です。
それでも急ぎの方に、ここだけでも読んで欲しいなんてときには良いのかもしれません。
『最下段』や『〇〇〇』は好きな文字列で構いませんし、ジャンプ先の『〇〇〇』の方は文字が不要なら全角スペースを入れておいてください。
ジャンプ先の文字が無いと、この部分のタグは自動で削除される可能性があります。
全角スペースも文字の一種ですからスペースでも大丈夫なわけです。先に書いたように『最下段へ』の文字列も任意に変えてい良いですし、見たまま編集で文字サイズを小さくすると目立たなくなって良いと思います。
もっとかっこよくやるにはスクリプトがありますから、こちらはネットに情報があるので参考にしながらやると良いです。
アイコンでジャンプ
ページ内ジャンプに画像（アイコン）を使うって方法もありますので、こってりたくさん情報のもへじですから当然その情報も入れておきます。
なお画像のアイコンはどなたでも自由にコピペしてお使いになって構いません。もへじが今朝作成したアイコンですから、コピーして使っても誰にも文句を言われることがないです。えっと、後で使用料を＼(∇￣メ)
アイコンをこの記事からコピペしてご自分の記事に貼り付けてください。
は、<p><a id="bottom"></a></p>とします。
は、<p><a id="p_top"> </a></p>と記述します。
矢印アイコンは<img class="hatena-fotolife" title="" src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/i-shizukichi/20190616/20190616102647.gif" alt=":plain" />ってなりますので、このタグの前に<p><a id="p_top">を、タグの後に</a></p>を入れてください。
この二つのアイコンを使用するにはそれぞれに対応したジャンプ先が必要です。下向き矢印には <p><a id="bottom">〇〇〇</a></p>が最下段の行に、上向き矢印には<p><a id="p_top"></a>〇〇〇</p>が最上段の行に必要になります。それぞれ二つでセットです。
この画像アイコンを使う場合は id の変更をする場合は矢印アイコンの id も同じく変更してください。変更は当然『HTML編集』からです。
終わりに
この記事は id:ecoplace さんのブログに『下から上へシャー！！って移動してくれる可愛いアイコンも早く作れるようになりたい！！』って書いてありましたので、納豆に岩塩を使って食べることを教えてくれたことへのお礼を兼ねての記事です。
id:ecoplace さんはたぶんCSSやスクリプトでジャンプできる記述をしたいのだと思いますが、そちらはいくつかの手順を踏まなくてはいけないので、少し難度が高いかと思いますが一度記述してしまえばすべてのページで利用できるようになるので便利は便利です。
そういったいジャンプのできる解説ブログはすでに幾つもあります。
基本はコピペして Hatena Blog のデザイン編集の『｛｝デザインCSS』に解説ブログからコピペしてきて貼り付けるだけなのでそんなに難しくないですから、やる気と根気で何とかなっちゃいます。もへじのブログにも一時だけ取り付けていました。スクリプトだとヘッダーにも記述が必要だったと思います。
HTMLで使用するプログラミングは全く分からなくて、多少HTMLが弄れる程度なのでそちらは専門ブログを参照してください。
おまけ
目次を使うアイディアで思いつきました。目次を上下移動のためだけに使うのってのもありです。
早速やってみました。
目次で「ページ内リンクの方法」をクリックすれば記事冒頭に行けます。
あとは目次を自分なりに応用するだけです。目次をこのためだけに使ったってなんら悪くないので、もっと簡単にやりたい方は目次の利用はおすすめです。
記事の先頭行と記事最後尾行に目次を二つ入れて、目次項目を先頭行と最後尾行の見出しにすればよいのです。先頭行に『Top』見出しで、最後尾行に『 Bottom』見出しとすれば上下にジャンプが出来ます。
または、『結論だけ読みたい方はここへジャンプ』的な見出しをひとつ作ると良いかなと思います。ここまで読めば、結論へジャンプしても良いよと思う場所に目次を入れます。
使う見出しは『小見出し』が良いと思います。
♥ ♥ ♥ ♥ ♥
〇〇〇 先頭行へ
