ブログでモノや情報を紹介するときに写真を添付することは多々ありますよね？
しかし、ブログをはじめたばかりの人は「写真にリンクをつける方法がわからない」と困ってしまう人は多くいると思います。
実際に私もその一人で、「記事内に添付されている写真にリンクが貼られているブログがあるけど、どうやっているんだろう？」と悩んでいました。
この記事で分かることは以下になります。
- ワードプレスで写真にリンク付けする方法
- コードを用いて写真にリンク付けする方法
- 応用として写真のリンクを「新しいタブで開く方法」
目次
WordPressで写真にリンク付けする方法
リンク付の例
ブログ内に写真を添付した際に、Amazonや関連・引用元のサイトURLをリンク付けしたい場面は多々ありますよね？
WordPressで写真にリンク付する方法
WordPressでは簡単に写真にリンク付することができます。
写真をクリックするとこのような画像が表示されます。
応用編
上記のように、そのままリンク付けすると、既存のタブのままページが移動してしまいます。
これで画像に「新しいタブで開くリンク」が設定されました。
コードで写真にリンク付けする方法
簡単なソースコードのテンプレも置いておきますので、必要な方はご活用ください。
コピペテンプレの使用方法
上で示したリンク付の「コードによる方法」を説明します。
<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>
※↑コピペ可能です
これだけで、ブログに載せた写真にリンクが添付できてしまいます。
詳しい説明
上の説明で分からない人のために詳しく説明します。
<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>
コピペのコードと比較すると、どこを書き換えたかわかると思います。
補足説明
ちなみに先ほど示したコードは、新しいタブで開く設定になっています。
<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>
その理由として、
<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>
そのため『target="_blank"』
を除いたコードを使用すれば、新しいタブではなくそのままのタブからリンク先のURLに移動させることができます。
<a href="ここにリンク先のURLを貼る"><ここに写真のURLを貼る></a>
※↑コピペ可能です
既存のタブでリンク付した例がこちら。
ですから、私は新しいタブで開く方法をオススメします。
最後に
慣れてくるとこういった作業は簡単にこなす事が出来ますが、初心者ではじめのうちはよくわかりませんよね。
私も同じです。
しかし、やっていくうちに慣れてくると思うので、私もやっていく中で覚えたことは記録として残していこうと思います。
この記事が少しでもお役に立てたら幸いです。
