サイトアイコンFronted Code

私の知識や、知ってたらよかったこと等が書いてあるブログです

2021/07/17

HTMLマークダウンに、画像内リンクを作る方法!

マークダウンに、画像内リンクを作る方法!

はじめに

はじめに、画像内リンクとは何か分からない方のために説明すると、いわゆる「画像を押したらその画像に埋め込まれたリンクに飛ぶ」というものです。

これは、exmaple.com に飛ぶ画像内リンクの例です。

サンプル

画像内リンクが何かわかったところで、マークダウンでの書き方について見ていきましょう。

画像内リンクの作り方

では早速説明していきます。

サンプル

代替テキスト という構成です。

これが HTML にコンパイルされてこのようになります。

<a href="https://example.com/">
	<img src="画像パス" alt="代替テキスト"/>
</a>

こうしてみるとわかりやすいですよね。あとは、css で hover 時に opacity 等を付ければいよいよ本格的な web サイトに近づきますね!

まとめ

いかがだったでしょうか。

では今回の記事をまとめてみましょう。

[![代替テキスト](画像パス)](サイトURL)
//マークダウンの画像内リンクはこれで完璧!

簡単ですね。まとめるまでもなかったでしょう。

このように、他にも様々な豆知識を配信しておりますので是非ブックマークバーへの登録よろしくお願い致します。

ではまた次の投稿でお会いしましょう。