【はてなブログ】「リンクに画像を用いる」ための設定

はてなブログで「リンクに画像を用いる」ための設定

本ページの設定をするにあたっては、他のブロガ様の設定を参考にしました。
が、試行錯誤をして作成したこともあり引用元を記載できておらず申し訳ありません。

従いまして、本ページの設定を使用されるにあたり、引用元として本 URL を記載いただく必要はありません。
本ページの内容が、はてなブロガの皆様のお役に立てば幸いです。

なお、動作については、はてなPro でのみ確認しています。

手順

1. 画像をブログの編集画面にペーストする

すると、以下のような一文が挿入される。(「xxxxxx」の部分はユーザアカウントが入る)

[f:id:xxxxxx:20180722223540p:plain]

2. 「編集オプション」 → 「アイキャッチ画像」に目的の画像が表示される

このアイキャッチ画像中の URL を取得する
f:id:dnkrnka:20180722224237p:plain

 

3. 以下のテンプレートに 2 で取得したパスと、リンク先の URL を記載する

  • href= の「yahoo.co.jp」 の部分は置き替えること
  • title= には上記 1 が入る
  • src= には上記 2 の URL が入る
  • alt= は画像が表示されなかった場合の表示文字である

 
まとめ
上記 1, 2, 3 の対応を行うと以下のようになる。下記画像を押下すると、Yahoo のトップページに移動する。


Fishingz

 
コードとしては次のようになっている

<a class="http-image" 
  href="http://yahoo.co.jp">
<img class="hatena-fotolife"
  title="f:id:nekochan:20180722223540p:plain"
  src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nekochan/20180722/20180722223540.png" 
  alt="Fishingz" >
</a>