wp-hyperlink-20200321_ec

WordPress

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



今回は、WordPressブログにおける…

リンク

の貼り方をご紹介していきたいと思います

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

wp-hyperlink-20200321_top-01

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

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

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

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

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

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

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

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

こんなイメージですね

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

謎にかっこいい響き

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

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

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

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

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

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

pc-work-202001_01

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

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

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

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

続きを見る

で、今回は例として…

wp-hyperlink-20200321_1-01

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

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

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

wp-hyperlink-20200321_1-02

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

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

wp-hyperlink-20200321_1-03

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

wp-hyperlink-20200321_1-04

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

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

wp-hyperlink-20200321_1-05

↑ 入力できたら…

wp-hyperlink-20200321_1-06

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

wp-hyperlink-20200321_top-01

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

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

wp-hyperlink-20200321_1-07

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

wp-hyperlink-20200321_1-08

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

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

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

という項目です

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

【重要】注意ポイント

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

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

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

wp-hyperlink-20200321_1-09

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

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

wp-hyperlink-20200321_1-10

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

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

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

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

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

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

pc-work-202001_02

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

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

今回は例として…

wp-hyperlink-20200321_2-01

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

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

wp-image-upload-20200319_ec
WordPressで、記事のなかに「画像」を挿入する手順【記事作成の超基本】

続きを見る

画像を入れたら…

wp-hyperlink-20200321_2-02

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

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

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

wp-hyperlink-20200321_2-03

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

wp-hyperlink-20200321_2-04

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

入力できたら…

wp-hyperlink-20200321_2-05

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

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

wp-hyperlink-20200321_2-06

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

wp-hyperlink-20200321_2-07b

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

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

などの設定ができます

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

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

wp-hyperlink-20200321_2-08b

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

すると…

wp-hyperlink-20200321_2-09b

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

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

あとは、左下の…

wp-hyperlink-20200321_2-10b

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

wp-hyperlink-20200321_2-11b

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

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

などの設定ができます

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

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

wp-hyperlink-20200321_2-12b

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

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

今回の「リンクの作成」については、これで以上となります

大変お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.