ワードプレス

WordPressで、テキストや画像に「リンク」を貼る手順【外部リンク&内部リンクの作成・編集・解除】

WordPress_リンクの貼り方_アイキャッチ



あずきです🐥

WordPressブログにおける…

「リンク」の貼り方

について、初心者さん向けに1から解説していきます(簡単です♪)

まずブログにおける「リンク」とは、例えば…

WordPress_リンクの貼り方_top-01

↑ こんなの(青字のとこ!)

「リンクを付けたテキストや画像」をユーザーがクリックすると、「今のページ」から「指定した他ページ」へと画面が飛ぶ仕組みです

どのページに飛ぶのかは、もちろん自分で指定できるよ!

で、この「リンク」の種類は…

  • 外部リンク = リンクが貼ってあるブログから、「他サイト」へと飛ぶリンク
  • 内部リンク = 「同じブログ内」の、ほかのページに飛ぶリンク

この2つに大きくわかれてます

「職場」でわかりやすく例えるなら…

  • 今の会社から、「他社」に転職する → 外部リンク
  • 「同じ社内」の、ほかの部署へ異動する → 内部リンク

こんなイメージですね

ちなみに正式名は「ハイパーリンク」ですが、実際は「リンク」で通じます

謎にかっこいい響き

そんな「リンク」の貼り方について、今回は…

  • 「テキスト」にリンクを貼る方法
  • 「画像」にリンクを貼る方法

この2つにわけて、完全初心者の方向けに優しく解説していきたいと思います

それではさっそく見ていきましょー🐥

このブログのWordPress環境

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressにおける、「リンク」を貼る手順【テキストリンク/画像リンク】

「テキストリンク」を貼る手順

ブログガイド_見出し_01

まずは編集画面を開いて、テキストを自由に入力しましょう

編集エディタは、普通に「ビジュアルエディタ」のままでOKです

「そもそもエディタって何…?」という方は、↓ をどうぞ♪(超重要です)

wp-editor-visual-and-text-20200308_ec
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

で、今回は例として…

WordPress_リンクの貼り方_1-01

↑ こんなテキストを入力してみました

ここから、このテキストに「リンク」を貼るよ!

テキストを入力したら、リンク化したい部分だけを…

WordPress_リンクの貼り方_1-02

↑ このように選択しましょう

その状態で、画面上部の…

WordPress_リンクの貼り方_1-03

↑「リンクの挿入/編集」ボタンをクリックしたら…

WordPress_リンクの貼り方_1-04

↑ こんな入力欄が表示されるので、ここに「ジャンプする先のURL」を入力します

他サイトのURLを入力すれば「外部リンク」になるし、同じブログ内の他ページのURLなら「内部リンク」になる!

WordPress_リンクの貼り方_1-05

↑ 入力できたら…

WordPress_リンクの貼り方_1-06

↑ 右側の「適用」ボタンをクリックすれば…

WordPress_リンクの貼り方_top-01

↑ リンクテキストの完成です

ちなみに、この「適用」ボタンを押す前に…

WordPress_リンクの貼り方_1-07

↑ その右側の、「リンク設定」ボタンをクリックすると…

WordPress_リンクの貼り方_1-08

↑ このリンクの編集画面が開きます

と言っても、ここで覚えておきたいポイントは1つだけ…

リンクを新しいタブで開く

という項目です

ここにチェックを入れると、ユーザーがこのリンクテキストをクリックした際に、「新しいウィンドウを開いてジャンプする」ように設定できます

【重要】注意ポイント

「広告リンク」を貼る際には、この「リンクを新しいタブで開く」を使わないことをおすすめします

この機能を使ってしまうと、広告のクリックカウントが正常に反映されない可能性があるためです

ちなみに、一度「適用」ボタンをクリックしたあとに、「やっぱり編集したい!」という場合は…

WordPress_リンクの貼り方_1-09

↑ リンクテキスト上をクリックして、「編集」ボタンをクリックすれば、さきほどの編集画面はいつでも開けます

あと、作成したリンクテキストを「やっぱりリンク解除したい!」という場合は…

WordPress_リンクの貼り方_1-10

↑ 同じくリンクテキスト上をクリックして、右側の「リンク解除」ボタンをクリックすれば解除されます

「リンクテキスト」における作成・編集・解除の手順は、これでOK

今度は、「画像リンク」について見ていきましょう🐥

流れはだいたい一緒だけど、一部ちょっと違うよ!

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

「画像リンク」を貼る手順

ブログガイド_見出し_02

画像リンクを作っていきます

まずは編集画面で、画像を普通に入れましょう

今回は例として…

WordPress_リンクの貼り方_2-01

↑ こちらの画像にリンクを付けていきます

そもそもの「画像を入れる方法」については、↓ をどうぞ♪

WordPress_記事中への画像の挿入_アイキャッチ
WordPressで、記事のなかに「画像」を挿入する手順【記事作成の超基本】

続きを見る

画像を入れたら…

WordPress_リンクの貼り方_2-02

↑ その画像上を、どこでもいいのでクリックしましょう

すると、画像の四隅に □ が付きます

その状態で、画面上部の…

WordPress_リンクの貼り方_2-03

↑「リンクの挿入/編集」ボタンをクリックすると…

WordPress_リンクの貼り方_2-04

↑ 画像の下に入力欄が表示されるので、ここに「ジャンプ先となるURL」を入力しましょう

入力できたら…

WordPress_リンクの貼り方_2-05

↑ 右側の「適用」ボタンをクリックすれば、画像リンクの完成です

ちなみに、「適用」をクリックする前に…

WordPress_リンクの貼り方_2-06

↑ さらに右の、「リンク設定」ボタンをクリックすると…

WordPress_リンクの貼り方_2-07

↑ リンクテキストのときと同じように、編集画面が開いて…

リンクを新しいタブで開く

などの設定ができます

ここまでは、リンクテキストのときと同じ流れ!

ただ画像リンクだと、一度「適用」ボタンをクリックした後に編集画面を開きたい場合は…

WordPress_リンクの貼り方_2-08

↑ 画像上をどこでもいいのでクリックして、画像のすぐ上に表示されるメニューから、「編集」ボタンをクリックしましょう

すると…

WordPress_リンクの貼り方_2-09

↑ このような、「画像の情報」を編集できる画面が開きます

URLという欄で、「ジャンプ先となるURL」を修正することができます

あとは、左下の…

WordPress_リンクの貼り方_2-10

↑ この「上級者向け設定」というタブをクリックすると…

WordPress_リンクの貼り方_2-11

↑ 隠れていたメニューが開いて…

リンクを新しいタブで開く

などの設定ができます

設定を変更したら、右下の 更新 を忘れずにクリック!

それから、画像リンクをやっぱり解除したい場合は…

WordPress_リンクの貼り方_2-12

↑ 同じく画像上をどこでもいいのでクリックしてから、画面上部の「リンクの解除」ボタンをクリックで、解除できます

これで、画像リンクの作成・編集・解除もOK

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。