雪ん子’s report

スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

他ページへのリンク(ジャンプ)




こんばんは。雪ん子です。

前回はページ内のリンクについて紹介しました。
 
今回は他ページへのリンク(ジャンプ)方法です。
 

 

他ページへの普通のリンク

 

指定したページに移動してもらう

 

<a href="リンク先のURL">文字・画像</a>

 
※「文字・画像」の部分が文中に表示される部分です。
 
 

<a href="http://www.snow0303.com/entry/2017/12/06/ページ内リンク(ジャンプ)を使ってみる">ページ内リンクを使ってみる</a>

 
押すと移動します

ページ内リンクを使ってみる
 

色を変える

 
"リンク先のURL"の後に
style="color:色;"
を追加
  
今回は「red」としていますが、もちろん色コードでOKです。 
 

<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タグボード