【はてな記法】での画像リンクの手順 - やっと解決！！

どうも青尻です。



はてな記法使用時の画像リンクの方法



私はこれだけが知りたかったんです。



"はてな記法　画像リンク"




この検索ワードでこの記事がトップに表示されることを祈っております。



最終的にこのような画像リンクを完成させます！

ロゴ画像からトップページへのリンクを例にやっていきますね。

手順1

まずはいつも通り画像を貼り付け。

この段階ではまだリンクはないのでクリックしても画像が表示されるだけ。



すると、はてな記法では下記のように表示されますよね。

[f:id:bluehip:20180212211713p:plain:alt=BLUE HIP]

あとでaltってなに？ってならないためにここでもつけておきますが、いつもあなたが画像保存する時につけるファイル名のようなものだと思ってください。




こんな感じで画像を貼り付ける時に下に上級者向けなんて難しそうなこと書いてますが難しくないので付けておきましょう。
その画像を検索する際になんて言葉の検索ワードで引っかかるの？ってことですよねつまり。

手順2

貼り付けたらプレビューモードに切り替えます。


そうすると貼り付けた画像が表示されているので右クリックで画像のリンクをどこかにコピペしてキープおきましょう
記事内でもいいです。




リンクされたURLは先ほど表示したはてなコードとは異なるURLです。

手順3

ここまでくればあとは下記コードをコピペして
日本語部分に当てはまるものをコピペしていくだけ。


サンプルコード

<a class="http-image" 
  href="ここに飛ばしたいリンク先URL">
<img class="hatena-fotolife"
  title="f:id:から始まるはてなコード" 
  src="画像リンクのURL" 
  alt="画像代替テキスト" >
</a>

今回の場合は、ブログのロゴ画像にブログトップページをリンクさせたいので、下記のものを当てはめていきます。


"ここに飛ばしたいリンク先URL" （この場合トップページURL）

http://www.blue-hip.com/

"f:id:から始まるはてなコード" （はてな記法で表示されている画像コード）

f:id:bluehip:20180212211713p:plain

"画像リンクのURL" （手順2のプレビューからの画像リンク）

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bluehip/20180212/20180212211713.png

"画像代替テキスト（この場合トップページの説明）

BLUE HIP

するとこうなりますね。

<a class="http-image" 
  href="http://www.blue-hip.com/">
<img class="hatena-fotolife"
  title="f:id:bluehip:20180212211713p:plain" 
  src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/bluehip/20180212/20180212211713.png" 
  alt="BLUE HIP" >
</a>

これで無事に画像リンクの完成です。こんな感じ。





慣れれば簡単な作業です。
先ほどのサンプルコードをどこかに控えておくか、この記事をブックマークしておくなりしておきましょう。


以上、はてな記法での画像リンクの仕方説明でした。


わかったら簡単だけど意外になかったこの記事が....


お疲れ様でした！
よかったら読者登録してくださいね。

読者になる