はてな独自のf:idから始まるショートコード(fotolife記法)になります。[f:id:kikiki-kiki:20180721152853j:plain]プレビューで見るとこんな感じ。itemprop="image"></span>aタグは付いていないのですが、自動的に画像をクリックするとpopupで表示されるイベントが設定されています。[f:id:kikiki-kiki:20180721152853j:plain]</a>の様に画像のショートコードを<a></a>で囲んでもショートコードが画像に展開されず、ただのリンクの付いた文字列になってしまいます。👇[f:id:kikiki-kiki:20180721152853j:plain]記事中に挿入した画像に好きなリンクを貼りたい場合は、この自動挿入されるfotolife記法ではない方法で画像を表示させる必要があるようです。マークダウンで画像を表示する方法ただの画像を表示するマークダウンで画像を表示してしまえば、好きにリンクを設定することができます。chromeの場合は画像を右クリックし「画像アドレスをコピー」で取得できます。alt="星宮いちごです!"></a>aタグにtitle属性を付ける方法リンクのマークダウンのURLの後ろに"で囲った文字列を付けるとaタグのtitle属性を設定することができます。「:image」と記述すると、そのURLが画像を示している場合、その画像を直接表示させることができます。プレビューから取得した画像のURLをそのままエディターに入れた場合[https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file}]このままでは画像は表示されず、画像にリンクの貼られれた状態でURLがそのままテキストで表示されます👇https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg画像のURLの後ろに:imageを付けると画像が表示されるようです。[https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file}:image]👇表示それならこれをリンクのマークダウンのテキストにしたり、aタグで囲えばうまく行きそうな気がします。残念ながらmarkdownでもhtmlの記述方式でも画像のURLがそのまま表示されてしまいました。はてなの独自ショートコードはタグで囲むとプレーンテキストと解釈されるのでしょうか?markdownhttps://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg:imagehtml[https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg:image]また、「:image=」に続けて画像のURLを指定することで、任意の画像に対してリンクを設定することができます。はてなダイアリーのヘルプ[リンク貼るURL:image={画像のURL}]この方法だと画像に独自のリンクを貼ることができました。title属性を設定する方法はよく調べてないのでちょっと解りませんでした。その他の方法プレビューで画像のURLを取ってくるので通常のHTMLにしてしまってももちろん問題なく画像に独自のリンクを設定することができます。title=""></a>いずれにせよ、一度挿入した画像をプレビューしてURLを取得しなければならないのでチョット面倒です...一度画像のURLを取得してしまったら[![画像URL]](リンク)でも[リンク:image=画像URL]どちらでも手間は同じくらいな印象でした。чайка!無職のデザイナーが描いています。コンポーネント外のDOMに子コンポーネントを追加したい。(2)参加グループプログラミングデザインPHPPythonJavaScriptRubyWordPressCLOSEはてなブログをはじめよう!kikiki-kikiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。