あずきです🐥
WordPressブログにおける…
「リンク」の貼り方
について、初心者さん向けに1から解説していきます（簡単です♪）
まずブログにおける「リンク」とは、例えば…
↑ こんなの（青字のとこ！）
「リンクを付けたテキストや画像」をユーザーがクリックすると、「今のページ」から「指定した他ページ」へと画面が飛ぶ仕組みです
で、この「リンク」の種類は…
- 外部リンク ＝ リンクが貼ってあるブログから、「他サイト」へと飛ぶリンク
- 内部リンク ＝ 「同じブログ内」の、ほかのページに飛ぶリンク
この2つに大きくわかれてます
「職場」でわかりやすく例えるなら…
- 今の会社から、「他社」に転職する → 外部リンク
- 「同じ社内」の、ほかの部署へ異動する → 内部リンク
こんなイメージですね
ちなみに正式名は「ハイパーリンク」ですが、実際は「リンク」で通じます
そんな「リンク」の貼り方について、今回は…
- 「テキスト」にリンクを貼る方法
- 「画像」にリンクを貼る方法
この2つにわけて、完全初心者の方向けに優しく解説していきたいと思います
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
WordPressにおける、「リンク」を貼る手順【テキストリンク／画像リンク】
「テキストリンク」を貼る手順
まずは編集画面を開いて、テキストを自由に入力しましょう
編集エディタは、普通に「ビジュアルエディタ」のままでOKです
「そもそもエディタって何…？」という方は、↓ をどうぞ♪（超重要です）
-
WordPressの「ビジュアルエディタ＆テキストエディタ」とは？【クラシックエディタにおけるブログ記事編集】
続きを見る
で、今回は例として…
↑ こんなテキストを入力してみました
テキストを入力したら、リンク化したい部分だけを…
↑ このように選択しましょう
その状態で、画面上部の…
↑「リンクの挿入/編集」ボタンをクリックしたら…
↑ こんな入力欄が表示されるので、ここに「ジャンプする先のURL」を入力します
↑ 入力できたら…
↑ 右側の「適用」ボタンをクリックすれば…
↑ リンクテキストの完成です
ちなみに、この「適用」ボタンを押す前に…
↑ その右側の、「リンク設定」ボタンをクリックすると…
↑ このリンクの編集画面が開きます
と言っても、ここで覚えておきたいポイントは1つだけ…
リンクを新しいタブで開く
という項目です
ここにチェックを入れると、ユーザーがこのリンクテキストをクリックした際に、「新しいウィンドウを開いてジャンプする」ように設定できます
【重要】注意ポイント
「広告リンク」を貼る際には、この「リンクを新しいタブで開く」を使わないことをおすすめします
この機能を使ってしまうと、広告のクリックカウントが正常に反映されない可能性があるためです
ちなみに、一度「適用」ボタンをクリックしたあとに、「やっぱり編集したい！」という場合は…
↑ リンクテキスト上をクリックして、「編集」ボタンをクリックすれば、さきほどの編集画面はいつでも開けます
あと、作成したリンクテキストを「やっぱりリンク解除したい！」という場合は…
↑ 同じくリンクテキスト上をクリックして、右側の「リンク解除」ボタンをクリックすれば解除されます
「リンクテキスト」における作成・編集・解除の手順は、これでOK
今度は、「画像リンク」について見ていきましょう🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
「画像リンク」を貼る手順
画像リンクを作っていきます
まずは編集画面で、画像を普通に入れましょう
今回は例として…
↑ こちらの画像にリンクを付けていきます
そもそもの「画像を入れる方法」については、↓ をどうぞ♪
-
WordPressで、記事のなかに「画像」を挿入する手順【記事作成の超基本】
続きを見る
画像を入れたら…
↑ その画像上を、どこでもいいのでクリックしましょう
すると、画像の四隅に □ が付きます
その状態で、画面上部の…
↑「リンクの挿入/編集」ボタンをクリックすると…
↑ 画像の下に入力欄が表示されるので、ここに「ジャンプ先となるURL」を入力しましょう
入力できたら…
↑ 右側の「適用」ボタンをクリックすれば、画像リンクの完成です
ちなみに、「適用」をクリックする前に…
↑ さらに右の、「リンク設定」ボタンをクリックすると…
↑ リンクテキストのときと同じように、編集画面が開いて…
リンクを新しいタブで開く
などの設定ができます
ただ画像リンクだと、一度「適用」ボタンをクリックした後に編集画面を開きたい場合は…
↑ 画像上をどこでもいいのでクリックして、画像のすぐ上に表示されるメニューから、「編集」ボタンをクリックしましょう
すると…
↑ このような、「画像の情報」を編集できる画面が開きます
URLという欄で、「ジャンプ先となるURL」を修正することができます
あとは、左下の…
↑ この「上級者向け設定」というタブをクリックすると…
↑ 隠れていたメニューが開いて…
リンクを新しいタブで開く
などの設定ができます
それから、画像リンクをやっぱり解除したい場合は…
↑ 同じく画像上をどこでもいいのでクリックしてから、画面上部の「リンクの解除」ボタンをクリックで、解除できます
これで、画像リンクの作成・編集・解除もOK
おしまい♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^