「画像にリンクを貼る」とは「画像をクリックすればジャンプさせたいリンク先にジャンプするように設定する」ということ。いちおう書いておく。
「画像にリンクを貼る」のはmarkdownモードだったら、markdown記法で書くのが当然だろうと思うだろうが、我らド素人には面倒くさいシロモノだ。htmlはもっと面倒くさい。
これらに比べて、これから紹介する方法はド素人が見ても単純明快だ。
markdownやらhtmlやら、一個の記法に縛られずに、より簡単な方法を選択してストレスフリーのライティングにしたい。
ライティングの玄人に以下の方法を鼻で笑われるかもしれないが、素人の言ってることなので勘弁してください。
参考にしたウェブページ
材料
- 画像のurl
- リンク先のurl
やり方
以下は はてなブログのmarkdownモードの話。他は知らない。
画像のurlの取得
はてなブログで画像を貼り付ける場合、ブログ記事編集画面のサイドバーの「写真を投稿」の機能を使ってアップロードして、そこからブログ記事に貼り付ける。
そうすると《 [f:id:～] 》のような表記が現れるが、この文字列を使ってリンクを貼り付けることは どうやってもできない。
結局のところ、投稿した画像のurlが必要になる。
そのurlを取得する いちばん簡単な方法は以下の通り。
- まず、記事編集テキストエリアに《 [f:id:～] 》を表記させる（いつものように画像を貼り付ける作業をする）。
- 次に、編集画面からプレビュー画面に移動する。すると投稿した画像が表示されている。これを右クリックすると画像のurlが取得できる。
- 最後に、《 [f:id:～] 》の表記は不必要になるので、画像にリンクが ちゃんと貼られていることを確認できたら削除する。
画像にリンクを貼り付けるやり方
まず、画像のurlをコピーする。
次に、コピーしたurlを記事編集画面に直接 貼り付ける（ペーストする。右クリックで「貼り付け」でも何でもいい）。
すると以下のような文字列が表記される。
（これは はてな記法の中のhttp記法というものらしいが、名前は覚える必要は無い。）
「[]（半角）」の中に２つのurl（２つは同じもの）と、その間に「:（半角）image=」を挿入する。
（この説明で分かる人は少ないと思うが、実際にやってみてば分かると思う。コピーしたurlを直接ペースト。）
- この１つ目のurlをリンク先のurlに差し替える。以下のような感じ。
プレビュー画面で意図したように作動するか確認する。
最後に、サイドバーから貼り付けた《 [f:id:～] 》の表記は不必要になるので、画像にリンクが ちゃんと貼られていることを確認できたら削除する。
これで終わり。
一例
上はただ貼り付けただけ。リンク先は画像の元url。
上は画像に「歴史の世界の記事一覧のページ」のリンクを貼り付けたもの。
