SHIINBLOG

ウィリスの宇宙交信記

超絶怒涛のスーパーミラクル雑記ブログ

はてなブログで画像クリックで外部リンク先に飛ぶようにする方法

【スポンサードリンク】

f:id:uxirisu:20170825024659j:plain

 

どうも!ウィリスです!

最近、HTML&CSSの勉強を始めました

 

いろいろ分かったような気がしてきて、

自分のブログをカスタマイズしたくなってのでちょくちょくやっていこうと思います

 

今日は「画像を外部リンクする方法」です!

 

ブログの記事上に上げた画像を閲覧者がクリックすると

あらかじめ決めておいたURLに飛ぶようにします

 

一応、

はてなブログで説明しますが

HTMLを使っているなら誰でも実現できると思います

 

自分のサイト内に飛ぶ内部リンクはまた別の機会に・・・

 

 

完成理想図

完成理想図は次のようになります

・自分の任意の画像貼り付け

・それをクリックするとあらかじめ決めておいたURLに飛ぶ

 

実際にサンプルを作ってみました

以下はウィリスさん(当ブログ運営者)のイメージキャラです

f:id:uxirisu:20170825012423p:plain

画像をクリックすると

Google画像検索で「味噌汁」と検索したページに飛びます

 

ちなみに↑のLINEスタンプ販売中です 

 

では手順を説明しましょう!

 

手順

手順はいたって簡単です

 

画像を貼り付ける

まずは画像をはてなブログの「見たまま編集モード」で貼り付けましょう

編集画面左上のこのタブをクリックすればOKです(デフォルトでそうなってる)

f:id:uxirisu:20170825013613p:plain

 

 ここで好きな画像を貼り付けてください

それが後々リンクを付随した画像になります

 

サンプルだとこうなります

f:id:uxirisu:20170825014303p:plain

  

 

HTML編集にする

お次は編集モードを「HTML編集」にしてください

編集画面左上のこのタブをクリックすればOKです

f:id:uxirisu:20170825013913p:plain

 

すると、わけわかめな言語が表示されます

これがHTML言語です

 

サンプルだとこうなります

f:id:uxirisu:20170825014253p:plain

 

上図の4行目から5行目まで

「<p><img class〜」から「</p>」までが画像を貼り付けた部分に対応するHTMLです

 

実は、はてなブログの見たまま編集で画像を貼り付けると

HTML言語で自動で書いてくれているんですね!

 

この部分をいじくります

 

HTMLを編集する

ここからがメインです

先ほど画像を貼り付けた部分が自動的にHTMLになっています

f:id:uxirisu:20170825014625p:plain

 

大きく書くとこんな感じ

f:id:uxirisu:20170825023508p:plain

 

 

(<p>と</p>で囲っているのは段落(paragraph)って意味で、この2つに囲まれた部分は一つの段落として扱われる )

 

①先頭の<p>と最後尾の</p>を消します

 

②さらに

ーーーーー

<a href="リンク先に指定するURLを書き込むところ">

ーーーーー 

ーーーーー

</a>

ーーーーー

 で挟み込みます

 

つまり、こうなります

f:id:uxirisu:20170825023518p:plain

 

 

リンク先に指定するURLをかきこむところ」にはリンク先にしたいページのURLをコピペしておいてください

両サイドのダブルクオーテェーション「"」と「"」は必要なので忘れずに!

 

これで、終了です!

意外とすぐでしたね!

 

 本来このコードを<p>と</p>で囲わなければいけませんが、はてなブログが自動でやってくれているようです

 

おまけ:<a>の意味

 <p>と</p>で囲むとその部分は一つの段落になるという話でしたが

<a>と</a>で囲むとどうなるのでしょうか?

 

<a>の「a」は「アンカーリンク」を意味しています

<a> と</a>で囲まれた場所をクリックすると、指定したリンク先に飛ぶようになります

 

リンクを指定する場合は「href属性」で指定します

属性というのは<a>とか<p>とかの追加情報のようなものです

 

<a>の場合はherf属性というものを使って、リンク先のURLという追加情報を付け加えます

それが「herf="リンク先に指定するURLを書き込むところ"」の部分なんですね!

 

 

 

以上です

まだまだ勉強したてなので間違っている点があれば教えていただけると幸いです