WordPress関連コラム  2020.9.21

誰でも簡単!ワードプレスのテキストリンクや画像リンクの貼り方を詳しく解説

ワードプレスでリンクの設定方法がわからなくてお悩みですね。

ワードプレスでのリンク設定はとっても簡単

今回は、ワードプレスのテキストリンク・画像リンクの設定方法や編集・解除する方法をご紹介。

一度作業してみると、次から簡単にできるようになりますよ!

ワードプレスのリンク設定方法をマスターし、スムーズにコンテンツを作成しましょう。

【超簡単】ワードプレスでテキストリンクを貼る方法

ワードプレスでテキストリンクを貼る方法はとっても簡単です。

テキストリンクとは、文字にリンクの設定をすることを指します。

リンク先のURLさえ分かっていれば簡単に設定できるので、以下の順番に解説していきます。

  • リンクの設定方法
  • リンク先を編集する方法
  • リンクを解除する方法

一度マスターすれば覚えられるので、しっかりとチェックしましょう。

(1)リンクの設定方法

まず、基本のリンクの設定方法から見ていきましょう。

投稿や固定ページの「新規作成」で「ビジュアル」タブで編集をします。

リンクを設定したい文字列を選択し、「リンクの挿入/編集」のボタンをクリックしましょう。

ボタンを押すと、下のようにURLを打ち込むタブが出てきます。

リンク先のURLを押し、右にある矢印マークの「適用」ボタンをクリックしましょう。

これで、テキストリンクの設定ができました。

しかし、このままだと同じウィンドウでページが切り替わってしまいます。

外部リンク(サイト以外のURLへのリンク)は別ウィンドウを開けるように設定しておくことが基本です。

というのも、ユーザーには自分のサイトに留まって欲しいからです。

また、記事に戻ってきやすいようにウィンドウを分けておくほうがユーザビリティが高いとされています。

別ウィンドウでページを開くためには、さらに設定が必要です。

外部リンクの設定1

リンク先を設定した後、歯車マークの「リンク設定」ボタンをクリックしましょう。

外部リンクの設定2

「リンクを新しいタブで開く」にチェックを入れて、更新を押します。

以上で、リンクの設定は完了です。

(2)リンク先を編集する方法

もし、一度設定したリンク先のURLを編集したい場合も簡単に設定し直せます

リンク設定をした文字列にカーソルを合わせ、鉛筆マークの「編集」ボタンをクリックしましょう。

すると、URLを編集することができます。

リンクの編集

正しいURLを入力し、「適用」ボタンを押せばURLが変更されます。

(3)リンクを解除する方法

リンクを解除したいこともあるでしょう。

文字列を消せば、リンクの設定自体消すことができます。

文字列を残したままリンクの設定だけを消したい場合は、リンク設定をしている文字列にカーソルを合わせましょう。

リンクの解除

カーソルを合わせた状態で、「リンクの解除」ボタンを押すと簡単にリンクが解除されます。

このように、テキストリンクは非常に簡単に設定したり解除することが可能です。

ワードプレスで画像にリンクを貼る方法

画像にリンクを貼りたい場合もあると思います。

画像にリンクを貼る方法も、とっても簡単です!

テキストリンク同様、以下の順番に確認していきましょう。

  • リンクの設定方法
  • リンク先を編集する方法
  • リンクを解除する方法

一度確認しながら設定すると、次からは自分でできるようになるはずです。

詳しく確認していきましょう。

(1)リンクの設定方法

画像にリンクを設定するには2つの方法があります。

  • 画像を挿入する時にリンクを設定する
  • 画像を挿入した後にリンクを設定する

順番に確認していきましょう。

①画像を挿入する時にリンクを設定する

画像を挿入する時にリンクを設定しておくことができます。

まず、「メディアを追加」から追加する画像を選択しましょう。

このとき右下に表示される「添付ファイルの表示設定」を確認して下さい。

ファイルの表示設定1

「リンク先」の選択から「カスタムURL」を選択します。

ファイルの表示設定2

リンク先のURLを入力する箇所が表示されるので入力しましょう。

「投稿に挿入」をクリックすれば、リンク設定された状態で画像が本文に挿入されます。

②画像を挿入した後にリンクを設定する

画像を挿入した後にリンクを設定することもできます。

リンク設定したい画像をクリックすると、メニューバーが出てくるので確認しましょう。

「編集」をクリックすると、「画像詳細」というタブが出てきます。

media-setting-link2

「設定を表示」の「リンク先」から「カスタムURL」を選択しましょう。

すると、URLを入力する箇所が出てくるのでリンク先のURLを入力します。

さらに、「更新」をクリックすれば、リンクの設定は完了です。

もし、外部リンクでリンクを新しいタブで開けるよう設定したい場合は、「上級者向け設定」から設定できます。

メディアの外部リンクの設定

「リンクを新しいタブで開く」にチェックを入れ、「更新」をクリックすれば設定完了です。

(2)リンク先を編集する方法

リンク先を編集するには、一度画像をクリックしメニューから鉛筆マークの「編集」ボタンをクリックします。

media-setting-link1

画像詳細のタブの「設定を表示」の「リンク先」から、URLを変更します。

画像リンク先の編集方法

「更新」を押せば、URLの変更完了です。

(3)リンクを解除する方法

一度設定したリンクを解除するには、画像をクリックした状態で「リンクの削除」をクリックします。

release-media-link

これだけでリンクの解除は完了です。

同じ記事内にリンクを貼りたいときのタグ設定

同じ記事内にリンクを貼りたいときがありますよね。

たとえば、目次を作ったり他の見出しへ誘導したりしたい場合に使えます。

同じ記事内にリンクを貼るには、テキストエディタで設定をしなければなりません。

まず、リンク先にしたい見出し等にid名を付けましょう。

<h2 id=”linkA”>見出し</h2>

このように、『id=””』でid名を指定します。

つづいて、ビジュアルでの編集に戻ってリンク設定したい文字列に「リンクの挿入」をクリックしましょう。

記事内リンクの設定

URLを入れる箇所に「#linkA」のように「#id名」を指定します。

「適用ボタン」を押せば、完了です。

その他のリンクの貼り方も知っておこう!

最後に他のリンクの貼り方も確認しておきましょう。

ワードプレスなら、以下のようなリンク設定ができます。

  • メールアドレスのリンクを貼る
  • 電話番号のリンクを貼る
  • サムネイル画像付きのリンクを貼る
  • ギャラリーにリンクを貼る

順番に見ていきましょう。

(1)メールアドレスのリンクを貼る

記事内にメールアドレスのリンクを貼りたいときの手順は、以下の通りです。

  • リンク設定をしたい文字列を選択
  • 「リンクの挿入/編集」ボタンをクリック
  • URLを入れる箇所に「mailto:メールアドレス」を入力
  • 「適用」ボタンをクリック

以上でメールアドレスのリンク設定が完了しました。

たとえば、メールアドレスのリンクを設定すると以下のようにメール作成画面が立ち上がります

メールアドレスのリンク

一度クリックして試してみて下さい。

(2)電話番号のリンクを貼る

記事内に電話番号のリンクを貼りたいときの手順は、以下の通りです。

  • リンク設定をしたい文字列を選択
  • 「リンクの挿入/編集」ボタンをクリック
  • URLを入れる箇所に「tel:メールアドレス」を入力
  • 「適用」ボタンをクリック

以上で電話番号のリンク設定が完了しました。

たとえば、電話番号のリンクを設定すると以下のように電話をかける画面が立ち上がります

メールアドレスのリンク

一度クリックして試してみて下さい。

(3)サムネイル画像付きのリンクを貼る

内部リンクなどを貼る時、サムネイル画像付きでリンクを貼りたいと思う人もいるでしょう。

リンク先のサムネイル画像を表示させたリンクのことをリンクカードと呼びます。

リンクカードを使うには、プラグイン「Pz-LinkCard」が欠かせません。

Pz-LinkCard

Pz-LinkCardを使えば、リンク先のサムネイル画像や概要が自動で記載されます。

まずは、Pz-LinkCardをインストールし、「有効化」すれば設定作業はいりません。

有効化すれば、固定ページや投稿のビジュアル編集画面に「リンクカード」のボタンが表示されるようになります。

リンクカードを挿入したい箇所にカーソルを合わせた状態で、「リンクカード」のボタンをクリックしましょう。

リンク先のURLを入力し、「OK」をクリックして下さい。

以上でリンクカードが挿入され、サムネイル画像も表示されています。

プレビュー画面から確認しましょう。

(4)ギャラリーにリンクを貼る

ワードプレスには、複数の写真を並べるギャラリーという機能があります。

横並びに複数の画像を表示させたい場合に、非常に便利です。

たとえば、ギャラリーを使って商品の紹介をするとき、リンクを貼りたいと思うでしょう。

しかし、ギャラリーに指定のURLへリンクを設定したいのであれば、プラグイン「WP Gallery Custom Links」が必要です。

WP Gallery Custom Links

WP Gallery Custom Linksをインストールし、有効化しておけば特段設定の必要はありません。

つづいて、ギャラリーを作る手順を見ていきましょう。

  • 投稿や固定ページの新規作成から「メディアを追加」をクリック
  • 左のメニューから「ギャラリーを作成」をクリック
  • 並べたい画像を選択
  • 横に並べたい数(カラム)やサイズを指定し、「ギャラリーを挿入」をクリック

以上で、本文中にギャラリーが作成されました。

リンクを貼りたいファイルの詳細でリンクの設定をします。

Link URL リンク先のURLを入力
Link Target リンクの開き方を指定
Link Rel rel属性の選択

以上の項目を入力すれば、設定完了です。

発リンクと被リンクの概念を理解しSEO対策を強化しよう

実は、「リンク」には発リンクと被リンクの2種類があります。

発リンク 今のページから他のページへ飛ばすリンク
被リンク 他のページから自分のサイトに対して貼られたリンク

この2つのリンクの概念を理解することで、SEO対策もしやすくなります。

それぞれ詳しく確認していきましょう。

(1)発リンクとは

発リンクとは、今のページから他のページへ飛ばすリンクのことです。

ここに『スマートアレックのトップページ』とリンクが貼ってあれば、これを発リンクと言います。

発リンクを設置することで、リンク先のSEO評価を高めることが可能です。

たとえば、同じサイト内のページに向けた発リンクを設定すれば、そのページに誘導させやすくなります。

また、多くのページから同じページに発リンクを設定することで、クローラーにリンク先ページが重要であることを伝えることができるのです。

もし、サイト内で重要度の高いページがあるのであれば、そのページに向けて発リンクを増やしましょう。

そうすることで、サイトを検索されたときに優先順位が高くなり、上位表示させやすくなります。

外部サイトへの発リンクをした場合も、リンク先のSEO評価を高めることが可能です。

もし、自分で他のメディアを運営しているのであれば、互いに発リンクしあえば両サイトともSEO対策ができるのです。

これを相互リンクと言います。

このように、発リンクを利用してリンク先ページのSEO評価を高めることができるので覚えておきましょう。

(2)被リンクとは

被リンクとは、他のページから自分のサイトに対して貼られたリンクのことです。

スマートアレックの「WordPress関連コラム」というページに今見ていただいているページのリンクが貼られています。

この場合、このページは被リンクを獲得している状態と言えるのです。

サイト内の同じドメインから被リンクを獲得していれば、サイト内でこのページが重要であることをクローラーに伝えることができます。

サイトが検索結果で表示される場合、被リンクの多いページが上位に表示されることになるのです。

一方で、外部サイトから被リンクを受けた場合、かなりSEO評価が高まります。

なぜなら、クローラーが「ユーザーにとって有益な情報が書かれているページ」と認識してくれるからです。

そのため、多くのサイトから被リンクを獲得することを意識してサイト運営をしましょう。

まとめ

ワードプレスでのリンク設定はとっても簡単です。

実際に作業をして覚えてしまえば、内部リンクや参照したサイトのリンクを自由に貼れるようになります。

ワードプレスのリンク設定方法をマスターし、スムーズにコンテンツを作成しましょう。