広告 はてなブログ関連

はてなブログで画像に記事リンクを埋め込む方法!!簡単にできます!

今回紹介するのは、画像に記事のリンクを付ける方法です!

画像をクリックすると記事にジャンプするやつです!

下の画像をクリックすると、上野動物園の説明記事にジャンプします!

f:id:itsuwalove777:20190627204230j:plain

この画像のような画像に記事のリンクを埋め込む方法を説明していきます!!(めちゃくちゃ簡単です!)

画像に記事のリンクを貼り付ける方法の説明!

用意するものは

・リンクを貼り付けるための画像

・リンク先となる記事のURL

これだけです!!

(スマホからだとHTMLを編集できない?のでパソコンからの利用を前提として書いています。)

まずは、リンクを貼り付ける画像を貼り付ける!

まず第一ステップとして、画像を貼り付けます!

f:id:itsuwalove777:20190627201157j:plain

(上の画像は貼り付けただけなので、クリックしても拡大されます)

貼り付けた画像をHTMLのコードで見てみると下のようになります。

f:id:itsuwalove777:20190627210752j:plain

imgタグの中に色々と書いてあることが分かります!

説明は…しようとしましたが、書いていると長くなるので省略します!

class= の部分で画像に対して、はてなブログ側で用意した処理をかけています。(画像をクリックすると拡大されたりというのはこの処理のおかげです!)

HTMLを編集してリンクを設定する!

今回は、<a href>タグでリンクを設定する方法で画像をクリックした際に記事へジャンプするリンクを作成します!

<a href>は アンカーエイチレフ と読みます!

具体的には、下の画像のようにHTMLで記載することで、記事へのリンクを設定することができます!

f:id:itsuwalove777:20190627211918j:plain

画像貼り付け時にあった、class= 〇〇 の部分を削除して 下の<a href ></a> を追加します!

貼り付け用に下に置いておきます!

<a href="ここにURL">ここに画像のimgタグ</a>

上の記述を追加したのが下の画像になります!

下の画像はクリックすると記事にジャンプするようになっています!

f:id:itsuwalove777:20190627201157j:plain

おまけ:別のリンク指定方法!

先ほどはリンクのURLをフルパスで https://… という感じで指定しましたが、この方法以外にもリンクを設定する方法はあります!

フルパスでhttps;//… と書く方法は絶対パスと呼ばれる方法になります!

そして、絶対があれば相対がある!

相対パスとは、リンクを貼る記事から見た、リンク先のパスを指定する方法になります!

<a href="./entry/2019/06/26/024951"></a>

とリンク先に指定するだけで、簡単にリンクを設定することができます!

パス指定の方法は… また別記事にでもしてみます!

下の画像は相対パスでリンクを指定しています!

どちらも結果は同じですけど…!

f:id:itsuwalove777:20190626020523j:plain

おまけだから本当にどうでもいい感じで終わってしまいましたが、画像のワオキツネザルが可愛いので許してください! 

何か疑問点があれば、お気軽にコメントください!!


ここまで

最後までお読みいただきありがとうございます。

-はてなブログ関連