画像をクリックすると別のページに飛ぶようにしてみる

　今日は画像にリンクを張ってみよう。

　普通なら画像をクリックするとその画像が拡大表示される。

　でも、中には画像をクリックすると別のページに飛ぶって言うリンクの張り方もあるんだ。

普通に画像を挿入した場合のHTML

の画像のHTMLは↓

<a href="https://wordpress.0hs.org/wp-content/uploads/2014/10/fa70f79fc5167e28559f0b75b5aca9ac.gif"><img src="https://wordpress.0hs.org/wp-content/uploads/2014/10/fa70f79fc5167e28559f0b75b5aca9ac.gif" alt="WordPressへ他社ブログからの引越し" width="150" height="150" class="alignnone size-full wp-image-634" /></a>

画像にリンクを貼る

の画像に特定のページへのリンクを付けてみる。

<a href="https://wordpress.0hs.org/wp-content/uploads/2014/10/fa70f79fc5167e28559f0b75b5aca9ac.gif"><img src="https://wordpress.0hs.org/wp-content/uploads/2014/10/fa70f79fc5167e28559f0b75b5aca9ac.gif" alt="WordPressへ他社ブログからの引越し" width="150" height="150" class="alignnone size-full wp-image-634" /></a>

　書き換えるのは赤い時の部分。

　ここでは例として当ブログのtopページへリンクさせてみる。

画像をクリックすると特定のページへ飛ぶHTMLの例

<a href="https://wordpress.0hs.org" target="_blank">　<img src="https://wordpress.0hs.org/wp-content/uploads/2014/10/fa70f79fc5167e28559f0b75b5aca9ac.gif" alt="WordPressへ他社ブログからの引越し" width="150" height="150" class="alignnone size-full wp-image-634" /></a>

　ちなみに「target="_blank"」は別窓で開くという意味だ。

　ではこの画像クリックしてみてください⇒　

　無事にTOPページに飛べば大成功。