てへまぐいらんー

どうでもいいこととか書いてく雑記的なブログ。興味があることにはとりあえず手を出してみるよ

スポンサードリンク

はてなブログのアイキャッチ画像にリンクを挿入する方法

どうも、底辺ぐらまー(@teihengrammer)です

はてなブログでは画像をクリックすると画像が拡大されてしまう。

この挙動はこれは通常張った画像に限らずアイキャッチ画像でもそういった動きになってしまう。

アイキャッチ画像って基本的にその記事のリンクになっていてほしいってのが私の考えなのでずっともやもやしていたがついに改善方法を発見した。

はてなブログの画像にリンクを挿入する方法

兎にも角にもアップロードした画像のURLを調べる必要がある。

今回は、今は亡き私のアニメブログで解説していく。

(アニメは見るのは好きだが、2ブログ運営はかなり自分の負担になることに気づき、現在公開範囲を自分のみに変更した)

 

リアルタイムプレビューモードにし、画像を張り付けた後に右側に表示された画像を右クリックしてURLを取得する。

※この画像はGoogle Chromeを使用もし右クリックメニューにURL取得ボタンが存在しない場合はページのソースコードを表示すればどこかに記述されている(笑)

はてな記法 または Markdownの場合

<a href="①画像に張りたいリンクのurl" class="http-image">
<img src="②画像のurl" width="③幅" class="http-image" alt="④画像の説明">
</a>

このソースを張り付けてあげるだけで簡単に使えます。(編集する場所は4か所

①画像に張りたいリンク

 アイキャッチ画像なら記事のurl

②画像のurl

 先ほど画像から取得したurl

③幅

 4~600くらいの幅が個人的に使いやすい

④画像の説明

 画像の表示できない環境などでは代わりにここで入力した文が表示される

 ここの内容はSEOに関わってくるため是非とも適切な文を入力したいところ

見たまま の場合

みたまま編集は使っていないため詳しくないが、こちらはもっと簡単で画像を張り付けた後画像を選択しリンクを張り付けるだけで行える。

画像で説明をしようと思ったがその必要がないくらい簡単にできてびっくりしてしまった。

 

最後に

非公開にしながらもちょこちょこ記事は書き溜めていて、その時に気づいたのでメモ代わりにここに残しておく。

続きを読むを多用するはてなブロガーさんは使ってみることをオススメしたい。

 

スポンサードリンク