前回はページ内のリンクについて紹介しました。
今回は他ページへのリンク（ジャンプ）方法です。
他ページへの普通のリンク
指定したページに移動してもらう
<a href="リンク先のURL">文字・画像</a>
※「文字・画像」の部分が文中に表示される部分です。
<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる">ページ内リンクを使ってみる</a>
押すと移動します
↓
ページ内リンクを使ってみる
色を変える
"リンク先のURL"の後に
style="color:色;"
を追加
今回は「red」としていますが、もちろん色コードでＯＫです。
<a href="http;//www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる" style="color:red;">ページ内リンクを使ってみる</a>
押すと移動します
↓
ページ内リンクを使ってみる
アンダーラインを消す
"リンク先のURL"の後に
style="text-decoration:none;"
を追加
<a href="http;//www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる" style="text-decoration:none;">ページ内リンクを使ってみる</a>
押すと移動します
↓
ページ内リンクを使ってみる
色を変えて、アンダーラインも消す
<a href="http;//www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる" style="color:red; text-decoration:none;">ページ内リンクを使ってみる</a>
押すと移動します
↓
ページ内リンクを使ってみる
画像を使う
「文字・画像」の部分を<img src="画像のURL">にします。
画像のURLの調べ方はこちら
→画像のURL(アドレス)の調べ方
<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/snow0303/20170610/201706101920◯.jpg"></a>
押すと移動します
↓
画像の大きさを変えたい場合は、
幅 width="○○"
高さ height="○○"
を加えます。幅のみ、高さのみでもOK。
○○は数字だけ、○○px、○○%でも。他にも思い当たるものがあれば、お好みでどうぞ。
<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/snow0303/20170610/201706101920◯.jpg" width="50%"></a>
押すと移動します
↓
指定したページを新しいタブで開いてもらう
<a href="リンク先のURL" target="_blank">文字・画像</a>
※"リンク先のURL"とtargetの間には半角スペース
<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる" target="_blank">ページ内リンク（ジャンプ）を使ってみる</a>
押すと新しいタブが開きます
↓
ページ内リンク（ジャンプ）を使ってみる
他ページの指定した部分に移動してもらう
指定した部分とは
ページの頭ではなく、ページの途中の「ココを見て欲しい！」と言う部分です。
指定したい部分に
<p id="アンカー名">文字・画像</a>
を記載することで可能になります。
<p id="アンカー名"></a>
としてしまえば、何も表示されないのでこっそり設置可能です。
ちなみに、はてなブログでは「見出し」は到着地として設定されているので、見出しを指定部分として利用することも可能です。
アンカーについての詳細は前回の記事でご確認下さい。
→ページ内リンク（ジャンプ）を使ってみる
他ページの指定した部分に移動してもらう
<a href="リンク先のURL#アンカー名">文字・画像</a>
ひとつ前の記事の見出し「色を変える」に移動してみます。
<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる#色を変える">色を変える</a>
押すと移動します
↓
色を変える
新しいタブでページを開き、指定した部分に移動してもらう
<a href="リンク先のURL#アンカー名" target="_blank">文字・画像</a>
<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク（ジャンプ）を使ってみる#色を変える" target="_blank">色を変える</a>
押すと移動します
↓
色を変える
他のページではなく、画像を開くことも可能
<a href="画像のURL">画像を開く</a>
<a href="http://img.f.hatena.ne.jp/images/fotolife/s/snow0303/20170223/201702231236◯.jpg">画像を開く</a>
押すと画像が開きます
↓
画像を開く
画像で画像を開く
<a href="画像のURL"><img src="画像のURL"></a>
もちろん幅・高さの設定も可能 ※
<a href="http://img.f.hatena.ne.jp/images/fotolife/s/snow0303/20170223/201702231236◯.jpg"><img src="http://img.f.hatena.ne.jp/images/fotolife/s/snow0303/20170610/201706101920◯.jpg" width="50%"></a>
押すと画像が開きます
↓
<a href="http://img.f.hatena.ne.jp/images/fotolife/s/snow0303/20170223/201702231236◯.jpg" target="_blank"><img src="http://img.f.hatena.ne.jp/images/fotolife/s/snow0303/20170610/201706101920◯.jpg" width="50%"></a>
押すと別の画面で画像が開きます
↓
おまけ
他ページのURLについては絶対リンクと相対リンクがあるようなのですが……
上手くいかないので説明は控えさせていただきます。
こちらを参照してください。
仕組みを理解しよう：相対リンクと絶対リンク - HTMLタグボード
