Cocoonテーマ

【超簡単】ブログ内の写真にURLをリンク付けする方法「コピペテンプレ付き」

ブログでモノや情報を紹介するときに写真を添付することは多々ありますよね？

 

しかし、ブログをはじめたばかりの人は「写真にリンクをつける方法がわからない」と困ってしまう人は多くいると思います。

 

実際に私もその一人で、「記事内に添付されている写真にリンクが貼られているブログがあるけど、どうやっているんだろう？」と悩んでいました。

 

今回は、そんな私のような悩みを持っている方へ、『ブログに添付した写真へリンクを貼る方法』が解決したので共有します。

 

この記事で分かることは以下になります。

  • ワードプレスで写真にリンク付けする方法
  • コードを用いて写真にリンク付けする方法
  • 応用として写真のリンクを「新しいタブで開く方法」

 

WordPressで写真にリンク付けする方法

リンク付の例

ブログ内に写真を添付した際に、Amazonや関連・引用元のサイトURLをリンク付けしたい場面は多々ありますよね？

例えば、この写真はリンク付していない為、クリックしても何も反応しません。

一方で、こちらは引用元のURLをリンク付している為、クリックするとリンク先へ移動します。

WordPressで写真にリンク付する方法

WordPressでは簡単に写真にリンク付することができます。

写真をクリックするとこのような画像が表示されます。

ここのペンシルアイコンの「Editlbutton」をクリックすると以下の画像が表示されます。

こちらの「リンク先」に移動させたいURLを記載して「更新」を押すだけでリンク設定は完了です。

応用編

上記のように、そのままリンク付けすると、既存のタブのままページが移動してしまいます。

そのため「上級者向け設定」をクリックして以下の画像の「リンクを新しいタブで開く」にチェックを入れます。

これで画像に「新しいタブで開くリンク」が設定されました。

 

 

コードで写真にリンク付けする方法

WordPressでは簡単に写真へリンク付させることが可能ですが、コードを用いても写真にリンク付させることが可能です。

簡単なソースコードのテンプレも置いておきますので、必要な方はご活用ください。

需要があるかどうかは分かりませんが、「ワードプレス以外でブログをしている方」や「写真にリンク付けする仕組みを理解する事」につながれば幸いです。

コピペテンプレの使用方法

上で示したリンク付の「コードによる方法」を説明します。

まず、以下に示したコードをコピーして「ビジュアル」ではなく「テキスト」の欄に貼り付けます。
<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>

※↑コピペ可能です

こちらの「ここにリンク先のURLを貼る」にリンクさせたいURLを添付して、「ここに写真のURLを貼る」に添付したい写真のURLをコピペします。

これだけで、ブログに載せた写真にリンクが添付できてしまいます。

 

詳しい説明

上の説明で分からない人のために詳しく説明します。

まず、普通に写真を添付してテキストの欄を見ると以下のようなコードが表示されています。

<img class="alignnone wp-image-1921" src="https://taabou.com/wp-content/uploads/2018/10/61DiU1fwDlL._SL1001_-300x300.jpg" alt="" width="400" height="400" />

 

次に、リンク付をした写真の、テキストの欄を見ると以下のようなコードが表示されています。

<a href="https://amzn.to/2OymDxP" target="_blank"><img class="alignnone wp-image-1921" src="https://taabou.com/wp-content/uploads/2018/10/61DiU1fwDlL._SL1001_-300x300.jpg" alt="" width="400" height="400" /></a>

 

  • 赤色のマーカーで示したのが「リンク先のURL」
  • 青色のマーカーで示したのが「写真のURL」

となっています。

<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>

コピペのコードと比較すると、どこを書き換えたかわかると思います。

このマーカーで示した部分に、任意のURLをコピーして貼るだけで作業は完了です。
ちなみに上のコードから分かる通り、「リンク先のURL」に「アマゾンアソシエイト」のリンクを貼り付けているため、画像のクリックがURLのクリック率に繋がって商品への誘導率が高まります。

 

補足説明

ちなみに先ほど示したコードは、新しいタブで開く設定になっています。

<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>

その理由として、

<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>

こちらの黄色マーカーで示した『target="_blank"』コードが付いているため、新しいタブで表示されるようになっています。

そのため『target="_blank"』

を除いたコードを使用すれば、新しいタブではなくそのままのタブからリンク先のURLに移動させることができます。

そのままのタブでリンク先のURLに移動させるコードはこちらです。
<a href="ここにリンク先のURLを貼る"><ここに写真のURLを貼る></a>

※↑コピペ可能です

既存のタブでリンク先に紐づけることで記事の離脱率は上がりますが、そのまま消費者の購買行動に繋げさせることはできますね。

 

既存のタブでリンク付した例がこちら。

この通り、既存のタブでリンク付するとそのままAmazonの沼へ当ブログの訪問者は流れて行きます。（戻ってきて〜！）

ですから、私は新しいタブで開く方法をオススメします。

 

最後に

慣れてくるとこういった作業は簡単にこなす事が出来ますが、初心者ではじめのうちはよくわかりませんよね。

私も同じです。

 

しかし、やっていくうちに慣れてくると思うので、私もやっていく中で覚えたことは記録として残していこうと思います。

 

この記事が少しでもお役に立てたら幸いです。

 

 

おすすめの記事