【HTML】リンクを貼る方法をご紹介！「画像をクリック」が使える！
ブログをお書きの皆さん、記事内にリンクを貼ったりしますよね。
それは、おすすめのお店のサイトだったり、面白い記事だったり、自分の書いた記事だったり…とにかく記事を面白くわかりやすくするために必要不可欠な「リンク」
これ、普通に貼るだけなんてつまらないですよね。
はてなブログなら、１発でリンクが作成できて便利ですが、なんだか味気ない…
（ブログカードと呼ばれます）
文字列だけのリンクも、分かりづらかったり１行で終わってしまうのでパッと見のインパクトに欠けます。
もちろん記事の内容に沿ったリンクを貼ることが大切ですので、上記ブログカードのように何のリンクか、概要が書いてあるものが分かりやすく適切だと思います。
しかし、もし「この画像をクリック」みたいなオリジナルのリンクが作れたら、もっとブログ記事が華やかになるのではないでしょうか。
筆者がブログを勉強し始めた時に、HTMLで「画像リンク」を知った時には楽しくなってどんどん画像リンクを使っていました。
個人で楽しむ範囲のものなので、オリジナリティが出せて幅が広がります。
では、画像をクリックのやり方をご説明していきます。
画像リンクの貼り方
任意のページに飛んでもらうための「リンク」そのリンク先URLと画像のURLを使って、クリックしたら飛べる「画像リンク」を貼るには、HTMLタグを使います。
では例としてこちらのサイト内にある記事
【初心者向け】HTMLとは？ 簡単に説明 サイト作り ワードプレスで使えるHTMLタグを紹介！初心者でも簡単にカスタマイズできる！ - がじぇっと研究室
こちらを、下記の画像をクリックしたら表示できるようにしたいと思います。
↓↓↓↓
この画像をクリックすると、先ほどの記事のページに飛ばすとこができます。
（HTMLについて説明した記事です。こちらも是非ご覧ください）
HTMLタグはこのように表記します。
<a href="リンク先URL"><img src="画像のURL"></a>
<a href=" ____ " に表示させたいページのURL
<img src=" ____ " にクリックする画像のURLを入れます。
画像URLの確認方法
【 <img scr="画像のURL"> 】
こちらの”画像URL”を確認する方法が必要になってきますね。
Windowsでの確認方法
Windowsの場合は、画像の上にカーソルを合わせ右クリックをしメニューが表示されたら、プロパティを選択します。
プロパティに画像の情報が表示されますので、その中から画像アドレスをコピーしてきましょう。
Macでの確認方法
Macの場合は、こちらも画像上で右クリックし、メニューから「画像アドレスをコピー」を選択すると画像URLがコピーできます。
コピーしたURLを、img src=" 〇〇 "></a> 〇〇の部分に貼り付けましょう。
URLがきちんと機能していない場合は下記のような表示になってしまいます。
↓
オリジナルの画像を作成
このように、画像リンクを貼ることでサイト作成に幅が広がります。
使用例はページ内リンクでしたが、応用して装飾していくことでオリジナリティ溢れるサイトが作成できます。
オリジナルの画像を作成すれば他にもいろいろ使えます。
画像を作成するために利用できるツールもたくさん存在していますので、作ってみるのもおすすめ。
オンラインで簡単に画像編集ができるサイトです。
画像加工編集サイト - 無料で画像を加工、編集するならバナー工房
切り抜きやテキスト入れができるオンラインフォトエディター。
オンラインフォトエディター - Pixlr.com 画像編集
今回使用したHTMLタグ
リンクを貼る（テキスト）
<a href="リンク先URL">文字</a>
リンクを貼る（画像）
<a href="リンク先URL"><img src="画像URL"></a>
テキスト背景色を変える（オレンジ）
<p style="background-color: #ffcc99;">テキスト</p>
まとめ
今回は、ブログ構築で使える「画像リンク」についてご説明していきました。 HTMLタグを理解することで、様々なシーンで応用できますし、こだわりを詰め込んだ自分だけのサイトが作れます。 まだまだ筆者も勉強中ですが、この「画像リンク」の汎用性はとても気に入っています。 是非使ってみて下さい！
