WordPress 画像にリンクの貼り方は?HTMLで画像にリンクを貼る方法も簡単解説!

今回はWordPressで画像にリンクを貼りたいときの貼り方を解説します。また、WordPressでサイドバーウィジェットなどで画像にリンクを貼りたい場合、HTMLで記述する必要がある場面もあります。初心者向けにHTMLで画像やボタンにリンクを貼る方法もお伝えします。

テキストリンクと画像リンク

テキストリンクとは文字のリンクのことです。文字の部分をクリックすると飛んでもらいたい先のページに移動してもらえるということになります。

画像やボタンをクリックするとリンク先に飛ぶものを画像リンクと呼びます。画像リンクはバナーリンクと呼ばれたりもします。

飛んでもらいたい先が、自分のサイト内の他の記事・他のページの場合のリンクを内部リンク、他のサイト内ページを開くようにする場合のリンクを外部リンクといいます。

WordPressで画像にリンクを貼る貼り方

「新規で画像を追加してリンクを貼る場合」を見ていきましょう。

新規で画像を追加してリンクを貼る貼り方

ログインして、記事の編集ページを開きます。

画像を表示させたいところにカーソルを置き「メディアを追加」ボタンを押します。

すでにアップロード済みの画像を使う場合は、メディアライブラリにある画像を選択します。新しい画像を追加したい場合は、ファイルをアップロードのタブでファイルを選択します。

今回は「無料登録はこちら」の画像を挿入します。

  • 挿入した画像をクリック!下記のような鉛筆のマーク(編集マーク)が表示されるのでそちらをクリック!

「画像詳細」の「設定を表示」という項目の「リンク先」を【カスタムURL】に変更してください。「リンク先」をプルダウンでカスタムURLに変更後、設定したいリンク(URL)を「http://」と表示されているところに入力してください。

  • リンクを設定して、最後に「更新」をクリック!

プレビューで確認してみると、リンク付き画像が表示されています。必ず、リンク先に正しく飛ぶか確認しましょう。

投稿でも固定ページでも、同様の手順でリンクを貼ることができます。

HTMLで画像にリンクを貼る方法

お使いのテーマにもよりますが、WordPressでサイドバーウィジェットなどで画像にリンクを貼りたい場合、HTMLで記述する必要がある場面もあります。初心者向けにHTMLで画像やボタンにリンクを貼る方法もお伝えします。

画像にリンクを付けるHTMLコード

今回は

  • リンク先のアドレスは「https://getmoneyfp.com/p/r/YfbuuaUW」
  • 使いたい画像のアドレスは「https://nao-netbusiness.com/wp-content/uploads/2020/02/key_small_04-1.png」です。

使いたい画像のアドレスは、「メディアを追加」>URLを知りたい画像をクリックし、リンクをコピーの下に表示されているURLが画像のURLとなります。

赤文字部分を自分のリンクしたいアドレスに書き換ます。青文字部分は自分の使いたい画像のアドレスを入れます。

上記の枠の中の『HTMLタグ』をコピーして赤文字部分、青文字部分を書き換えて使用できます。

最初はコピペで構いません。私もそうでした。

リンクを設定する際に使うタグにも

  • 同じウインドウでひらくリンク
  • 別ウインドウでひらくリンク
  • 同じページ内で移動する
  • リンクをボタンにする

など、知っておくと便利な「タグの書き方」はこれから覚えていくようにしたいと思います。

まとめ

WordPressで、画像にリンクを貼る方法を紹介しました。投稿でも固定ページでも、同様の手順でリンクを貼ることができます。

またサイトを構築するにあたって、HTMLで画像にリンクを貼る方法を使う場面もでてきます。参考にしていただけると幸いです。

こういったことができるようになると、更に幅が広がります。

また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。

 

-WordPress構築

Copyright© Netbusiness Labo , 2020 All Rights Reserved Powered by AFFINGER5.