【HTML】画像にリンクを貼る方法
皆さんこんにちは。
今日は私にしては珍しくHTMLの話です。
というのも最近、仕事でHTMLを使う機会がありまして。具体的には、社内で使っているローカルWebサイトの改修を任されました。
※そもそも私が作ったサイトなんですがね。
改修内容の中に、
「ピクトグラムをクリックしたらページ移動するようにして欲しい。」
というものがあり、ピクトグラムを作るところから対応することになりました。
ピクトグラムはPowerPointで適当に作りました(拡張子はJPEG)。
そしてここからが本題です。
「自作した画像にリンクを貼っていくぞ！」
と意気込んでいたその時です。
「....あれ？....どうやるんだっけ？？」
.......情けない限りでございます（笑）。
やり方を調べたついでに、復習としてブログでアウトプットしようと思った次第です。
今回はこんな感じでaタグを使いました。
※さすがにソースコードをそのまま載せる訳にはいかないので、ブログ用にコードを書きました。
<html> <a href="https://wwwmotou.hatenablog.com/"> <img src="Title.jpg" alt="画像の説明"> </a> </html>
URLはこのブログのトップページです。
Title.jpg はこんな画像です。
はい。このブログのタイトルです。
今回の例は、パスを短くするために同じファイル内にHTMLと画像を配置しました。
↑こんな感じですね。
Test.htmlを開くと、こんな感じです。
飾りっけのないページですが、画像にはこのブログのURLが貼ってあります。
タイトルをクリックすると........
無事にブログに移動出来ました。
日常的にコーディングする機会のある人達にとっては、当たり前の知識なのだと思います。
私は、たまにコーディングするだけの素人なので、どうしても色んなことを忘れてしまいがちです。
※飽きっぽくて色んなことに手を出しすぎなことも原因のひとつでしょうか........。
物忘れ防止策として、今日みたいな基本的なことも、ちょくちょく発信していこうと思います。
ボケ防止のついでに、誰かの役に立つことがあれば嬉しいです。
