WordPressで画像にリンクを埋め込む方法!プラグインやHTMLも紹介

WordPressでリンクを埋め込む方法 SKILL

WordPressで画像にリンクを埋め込む方法をお探しですね。

この記事では、画像をクリックすると、指定のリンクにジャンプさせる方法をご紹介します。

リンクを埋め込むための「おすすめのプラグイン」や「HTMLコード」も載せています。

画像付きで分かりやすく解説していますので、はじめてWordPressを利用する方でも分かりやすい内容です。ぜひ参考にしてくださいね。

スポンサーリンク

WordPressで画像を埋め込むプラグイン

WordPressでリンクを埋め込む手順を解説する前に、必要なプラグインをインストールしましょう。

プラグインとは、WordPressの機能を拡張できる機能で、自由にカスタムできます。

リンクの埋め込みをスムーズに行うためにも、無料で導入できる「Advanced Editor Tools」がおすすめです。

>Advanced Editor Tools (previously TinyMCE Advanced)

Advanced Editor Tools

こちらのプラグインを利用することで、記事の投稿画面に、リンクを挿入するボタンが表示されます。

例として、こちらの画面をご覧ください。色で囲まれた部分が、プラグイン導入後に表示される機能です。

編集機能の表示は、自由にカスタマイズすることも可能です。

Advanced Editor Toolsの機能

投稿画面のビジュアルから、ボタンひとつでリンクを挿入・削除できる機能が追加されます。

リンクの埋め込みがスムーズになりますので、プラグインの「Advanced Editor Tools」をぜひ活用してみてください。

WordPressで画像にリンクを埋め込む方法

まずは、画像を左クリックして、選択した状態にします。

投稿画面の編集ボックスから、「リンクの挿入/編集」ボタンをクリックします。

WordPressで画像にリンクを埋め込む方法

すると、選択していた画像の近くに、「URLをぺーストまたは入力して検索」と書かれたた入力するバーが表示されます。

WordPressで画像にリンクを埋め込む方法

こちらのバーの中に、ジャンプさせたいページのURLを入力しましょう。

最後はバーの右側にある青い矢印ボタンを押せば完了です。

HTMLコードで画像にリンクを埋め込む方法

HTMLを使って画像にリンクを埋め込む場合、まずはWordPressのテキスト画面を開きましょう。

HTMLコードで画像にリンクを埋め込む方法

HTMLコードをビジュアル画面に書いた場合、正しく反映されませんので注意してください。

HTMLコードの書き方は、以下の通り。

<a href=”サイトのURLをここに”>

<img src=”画像ファイル名をここに”>

</a>

具体例として、「teatime」というファイル名の画像に、本サイトのホーム画面へジャンプするURLを埋め込むとします。

HTMLコードの書き方は、こちら。

<a href=”https://academiiy.com/”>

<img src=”teatime.jpg”>

</a>

ただ、こちらのHTMLコードには、

  • 画像のサイズ
  • 画像の配置
  • Altタグ(代替テキスト)

などは含まれていませんので、追加で書いていく必要があります。

画像に埋め込みしたリンクを新しいタブで開く方法

画像に埋め込みしたリンクは、既存のページでそのまま開く方法と、新しいタブで開く方法の2種類があります。

ここでは、埋め込みしたリンクを新しいタブで開く方法をご紹介します。

まずは、画像をクリックして選択します。

画像に埋め込みしたリンクを新しいタブで開く方法

表示された青い入力するバーの、右側にある「歯車マーク」をクリックしてください。

画像に埋め込みしたリンクを新しいタブで開く方法

リンクの編集画面が開かれます。

色で囲んだ「リンクを新しいタブで開く」にチェックを入れればOKです。

画像に埋め込みしたリンクを新しいタブで開く方法

最後は、右下の「リンク追加」ボタンを押して設定を反映させましょう。

画像に埋め込みしたリンクを削除する方法

画像に埋め込みしたリンクを削除する方法もご紹介します。

まずは、冒頭でご紹介した無料のプラグイン「Advanced Editor Tools」を導入しましょう。

ビジュアル画面の上部に、「リンクを削除」のマークが表示されますので、こちらをクリックすれば完了です。

画像に埋め込みしたリンクを削除する方法

アイコンを拡大した画像がこちらです。

画像に埋め込みしたリンクを削除する方法

また、画像に埋め込みしたリンクは、「Shift+Alt+S」を押すことでも削除できます。

まとめ

この記事では、WordPressで画像にリンクを埋め込む方法をご紹介しています。

WordPressで画像にリンクを埋め込む際におすすめのプラグインや、コードの書き方、リンクの削除方法も載せています。

手順の画像付きで解説していますので、はじめてWordPressを利用する方でも簡単に理解できるでしょう。

「画像にリンクを貼りたい!」とお悩みの方に、この記事が役立てば嬉しいです。

error: Content is protected !