雑記ブログ卒業

生活に役立つ雑記ブログ

自分のブログの画像にリンクを貼る方法(はてなブログ版)

 

画像にリンクを貼りたいと思っている人は多いと思います。

例えばこんな感じ。

 

f:id:zakkiblog:20161219195346p:plain

 

これはこのブログのホーム画面ですが右側の「サブブログstart」の画像をクリックすると・・・サブブログへのリンクを貼っているので自動的にサブブログに飛んでくれます。

 

f:id:zakkiblog:20161219195350p:plain

 

この手法を知っていれば色々なところでかなり役に立つと思います。

そこで今回はブログで使う画像にリンクを挿入する方法をまとめてみました。もし悩んでいる方がいれば参考にしてみて下さい。

 

 

画像にリンクを貼る方法 その1

まず最初に”はてなブログ”の記事を書くページを開き写真を投稿します。

こんなイメージです。

 

f:id:zakkiblog:20161219200113p:plain

 

そして編集ページ上部の「HTML編集」をクリックします。

するとこんな文字が出てきました。

 

f:id:zakkiblog:20161219201248p:plain

 

この文字がこの画像の出所を示していますね。

ではこのHTMLにリンクを貼りましょう。

 

画像にリンクを貼る方法 その2

付け足すHTMLはこれです。

 

<a class="http-image" href="リンク先のURL">

画像のHTML

</a>

 

これを先程の画像のHTMLに挟み、リンク先のURLを入力すれば完成です。

ここで注意点を一つ。画像は<p>で挟まれています。

 

ですので画像を挟んだあとに最初と最後の<p>を消してください。

イメージ的には<p>を</a>に変える感覚ですね。

 

結果はこうなります。

 

f:id:zakkiblog:20161219201228p:plain

 

<p>が</a>に変わっていますよね。これで完成です。

最後にこのコードをコピペしてサイドバーなどの自分の好きな箇所に貼ってみて下さい。

 

できたら実際にリンク先に飛ぶか確認を忘れずに。

 

まとめ

f:id:zakkiblog:20161219202827p:plain

 

いかがだったでしょうか。

 

結構難しいと思うかもしれませんがやってみると簡単です。「HTMLとかよく分からないよ」と僕も昔悩んでました。でも実際に試行錯誤しているうちにある程度カスタマイズできるようになりました。

 

結構有名なブロガーさんはこの手法を多く使っていますよね。ずっと憧れてきたのでやっと上手くリンクを貼れて一安心です。これでまたブログカスタマイズの知識が一つ増えました。覚えたからには使い倒しますよ。

 

もうブログ一面リンクにしちゃおうかな。トップページがリンクしかないブログを作ろうかな。気持ち的にはそれぐらいの勢いですね。もうブログはいいや。

 

リンクを作る人になろうかな。リンク職人的な。リンクの鬼ですね。いや、リンクの王様ですね。いや、それはもうただのリンクバカじゃないか。リンク職人になる前にリンクで飛ばしたいブログをしっかり作りましょう。

 

以上

悩んでいるかたがいれば是非参考に。