【リンクの貼り方】WordPressブログにURLを貼り付ける方法

リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込み

WordPressブログでのリンク貼り方についてまとめました。

  • WordPressのブログ記事でリンクを貼りたい
  • ページの途中にリンクを貼る方法を知りたい
  • ブログ記事にYouTubeやTwitterなどを埋め込みたい

本記事を読めば、上記を全て実現できます。

2023年9月12日追記:
WordPressでリンクコードを貼れないときの解決法を追加しました。

2023年8月30日追記:
WordPress 6.3 以降のリンクの貼り方に対応しました。WordPress 6.2.x 以前と比べて、リンクを貼るときの画面の仕様が一部変更されています。

こんにちは。かずよし(@kazu_wp)といいます。
12年以上、WordPressを使っています。

この記事を書いた人
かずよし@WordPress超初心者講座
かずよし
  • 2011年からWordPressを愛用
  • 複数のブログを収益化し、40歳で開業
  • ユーザー数300万人の「WordPress超初心者講座」運営
目次
評判の高いSWELLをレビュー!使ってみた感想と口コミまとめ

WordPressテーマ「SWELL」

このブログでも使っている、オススメNo.1のWordPressテーマ。デザイン性、操作性が高く、見栄えの良い記事がサクサク書ける!

ブログで「リンクを貼る」ってどういうこと?

まずは、リンクの基本について確認しておきましょう。

かずよし

上記について「もう知ってるよ!」という場合は、下のボタンをクリックしてね

リンクには「つなぐ」という意味があります。

インターネットにおいて、リンクはページどうしをつないで移動するための仕組みをいいます。

この仕組みは「ハイパーリンク」と呼ばれることもあります。

ブログやホームページを読んでいると、文字やボタン、画像などをクリックして別のページに移動することがありますよね?これらは、リンクの仕組みを活用しています。

リンクを活用して別ページに移動できるよう設定することを「リンクを貼る(張る)」と表現します。

ブログ記事にリンクを貼ることで、次の目的を達成できます。

  • 別のサイトに誘導したい
  • 他の記事も読んでほしい
  • 記事の途中に誘導したい

リンクの貼り方は、リンクの移動先によって次の3つに分類できます。

外部リンク

外部サイトに移動するリンク

内部リンク

サイト内の別ページに移動するリンク

ページ内リンク

ページ内の任意の場所に移動するリンク

ちなみに、上の3つのリンクは「ページ内リンク」です。
クリックすると、それぞれのリンク設定方法の説明に移動します。

ためしに、上記のリンクをクリックしてみてください。
それぞれの説明に、なめらかな動きで移動するはずです。

かずよし

ページ内リンクがなめらかに移動するのは、このブログで使っているテーマ「」の機能によるものです。

ページとページを繋ぐリンクを貼るためには、本来は「HTML」という言語でコードを書かなければなりません。

しかし、WordPressなら簡単な操作でリンクの設定が可能。コードを書く必要がないから、ブログ初心者でも手軽にリンクを貼ることができます。

まずは、記事内の一部のテキストにリンクを貼る方法を紹介します。

外部リンクは、次のようなときに使います。

  • 記事を書くときに参考にしたページを紹介する
  • 関連するサイトに誘導する など
かずよし

外部リンクを設定するときは、信頼できるサイトをリンク先に指定することが大切ですよ

記事の編集画面にアクセスします。

WordPressには、記事作成の機能として「投稿」と「固定ページ」の2種類があります。編集のやり方に、大きな差はありません。

今回は「投稿」の編集画面を開きました。

投稿編集画面の表示例
投稿編集画面の表示例
投稿の編集画面の開き方

外部リンクを設定したいテキストを選択します。

外部リンクを貼るテキストを選択
外部リンクを貼るテキストを選択

ブロックツールバーの「リンク」アイコンをクリックします。

ブロックツールバーの「リンク」アイコンをクリック
ブロックツールバーの「リンク」アイコンをクリック

リンク先に設定したいページにアクセスしてURLをコピーし、

外部サイトのURLをコピー
外部サイトのURLをコピー

投稿編集画面に戻ってURLを貼り付けます。

外部サイトのURLを貼り付け
外部サイトのURLを貼り付け

次のいずれかの操作で、外部リンクの設定が完了します。

  • 「Enter」キーを押す
  • 下図の点線枠部分をクリック
外部リンクの設定完了
外部リンクの設定完了
かずよし

プレビュー画面でリンクをクリックして、リンク先がちゃんと表示されるかチェックしてくださいね

外部リンクを貼る手順は、以上です。

内部リンクは、次のようなときに使います。

  • 記事の内容を、別の記事で補足する
  • ブログ内の重要な記事に誘導する

ブログの記事に適切な内部リンクを設定することで、SEO効果も期待できます。理由は次の2つ。

  • 検索エンジンのロボットが、ブログ内を巡回しやすくなる
  • 多くの内部リンクを受けている記事は「重要な記事」と判断される

内部リンクは、先ほどの「外部リンクの貼り方」と同じ手順で設定することもできますが、ここでは内部リンクを貼るときだけ使える便利な機能を紹介します。

かずよし

リンク先のURLをコピペする必要がないので、さらに簡単になりますよ

上記手順の1~3は、外部リンクの貼り方の手順1~3と同じです。

手順4から見る

投稿または固定ページの編集画面を開きます。今回は「投稿」の編集画面を開きました。

投稿編集画面の表示例
投稿編集画面の表示例
投稿の編集画面の開き方

内部リンクを設定したいテキストを選択します。

内部リンクを貼るテキストを選択
内部リンクを貼るテキストを選択

ブロックツールバーの「リンク」アイコンをクリックします。

ブロックツールバーの「リンク」アイコンをクリック
ブロックツールバーの「リンク」アイコンをクリック

リンク先に設定したい投稿または固定ページのタイトルを入力します。

投稿(固定ページ)のタイトルで検索
投稿(固定ページ)のタイトルで検索
かずよし

タイトルの一部を入力すれば検索できますよ

リンク先に設定したい投稿または固定ページのタイトルをクリックすると、内部リンクの設定は完了です。

投稿(固定ページ)のタイトルを選択して内部リンクの設定完了
投稿(固定ページ)のタイトルを選択
かずよし

プレビュー画面でリンクをクリックして、リンク先がちゃんと表示されるかチェックしてくださいね

内部リンクを貼る手順は、以上です。

通常のリンクをクリックするとページの先頭部分に移動しますが、ページ内の特定場所をリンク先に指定することもできます。

このようなリンクは「ページ内リンク」または「アンカーリンク」と呼ばれます。

ページ内リンク(アンカーリンク)を設定するには、移動先に「目印」を付けなければなりません。この目印のことを「HTMLアンカー」といいます。

今回は「投稿」の編集画面を開きました。

投稿編集画面の表示例
投稿編集画面の表示例
投稿の編集画面の開き方

リンク先に設定したいブロックを選択し、画面右側のパネルで「ブロック」>「高度な設定」をクリックします。

リンク先に設定したいブロックの「高度な設定」をクリック
リンク先に設定したいブロックの「高度な設定」をクリック

「HTML アンカー」の入力欄に任意のテキストを入力してください。入力したテキストが「目印」になります。

リンク先のHTMLアンカーを入力
リンク先のHTMLアンカーを入力
かずよし

今回は「link」と入力しました

HTMLアンカー入力の注意点
  • 同じHTMLアンカーは、1つの記事内で1度しか使用できません
  • 大文字と小文字が区別されます
  • ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) などの半角記号を含めることができます
  • 先頭はアルファベットでなければなりません

参考:ページジャンプ – WordPress公式サポートフォーラム

ページ内リンクを設定したいテキストを選択します。

ページ内リンクを貼るテキストを選択
ページ内リンクを貼るテキストを選択

ブロックツールバーの「リンク」アイコンをクリックします。

ブロックツールバーの「リンク」アイコンをクリック
ブロックツールバーの「リンク」アイコンをクリック

リンク先に以下の内容を入力してください。

ページ内リンク先の入力内容

「# 」+ 「HTMLアンカーに入力した文字列」
 例:#link

ページ内リンク先に「# + HTMLアンカー」を入力
「# + HTMLアンカー」を入力
かずよし

#(ハッシュ)は、半角で入力してくださいね

次のいずれかの操作で、ページ内リンクの設定が完了します。

  • 「Enter」キーを押す
  • 下図の点線枠部分をクリック
ページ内リンクの設定完了
ページ内リンクの設定完了
かずよし

プレビュー画面でリンクをクリックして、リンク先にちゃんと移動できるかチェックしてくださいね

ページ内リンクを貼る手順は、以上です。

別ページ内の特定場所にもリンクを貼れる

リンク先に、別ページ内の任意の場所を指定することもできます。たとえば、

  • URLが「https://example.com/post/」のページ内で、
  • HTMLアンカー「link」を設定した場所

をリンク先とする場合には、「https://example.com/post/#link」と入力します。

ページ内リンクをスムーズにスクロールするには?

本記事で表示しているページ内リンクをクリックすると、いきなりジャンプせず、スムーズなスクロールで移動します。これはWordPressの標準機能ではなく、テーマに備わっている機能です。

このサイトで使っているテーマ「」にも、ページ内リンクをスムーズにスクロールする機能が備わっています。

SWELLのレビューを読む

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

リンクをクリックしたときに新しいタブで開くように設定する手順は、次のとおりです。

かずよし

WordPress 6.3 にバージョンアップされてから、操作方法が変わりました

STEP
リンクの「編集(ペン型)」アイコンをクリック

リンクの一部をクリックし、編集アイコン(ペン型のアイコン)をクリックします。

リンクを新しいタブで開く設定手順1
1.リンクの一部をクリック
2.編集アイコンをクリック
STEP
「新しいタブで開く」をチェック

高度をクリック後、新しいタブで開くをチェックし、保存します。

リンクを新しいタブで開く設定手順2
1.高度をクリック
2.「新しいタブで開く」をチェック
3.保存をクリック

ここまで、WordPressのブロックエディタでリンクを設定する3つの方法(外部リンク、内部リンク、ページ内リンク)について説明しました。

目次に戻る

ここまでは、ページ内のテキストにリンクを設定する方法について紹介しました。

テキストリンク以外にも、次のように特殊なリンクを設定することができます。

WordPressの標準機能で利用できるボタンブロックにも、リンクを設定することができます。

ボタンブロックにリンクを設定できる
ボタンブロックにリンクを設定できる
ボタンリンクの設定手順
  1. ボタンブロックを追加
  2. ボタン内にテキストを入力
  3. ボタンブロックにリンク先を設定
かずよし

テーマ「SWELL」を使っている人は、もっと高機能な「SWELLボタン」ブロックを使うのがオススメです!

STEP
ボタンブロックを追加

ボタンブロックを新しく追加します。

ボタンブロックを追加
ボタンブロックを追加
STEP
ボタン内に文字列を入力

ボタン内に文字列を入力して、「リンク」ボタンをクリックします。

ボタン内に文字列を入力し[リンク]ボタンをクリック
ボタン内に文字列を入力
STEP
リンク先の設定

リンク先のページタイトルURLを入力してリンク先を設定します。

ボタンブロックのリンク先の設定
ボタンブロックのリンク先の設定
かずよし

リンク先の設定には、内部リンクの貼り方で紹介した「サイト内ページ検索」を使うこともできますよ

以上の手順で、ボタンにリンクを貼ることができます。

投稿や固定ページ内に挿入した画像ファイルに、リンクを貼ることができます。

画像リンクの設定手順
  1. ブロック内に画像を挿入
  2. 画像ファイルを選択
  3. リンク先の設定

ここでは、「画像ブロック」内に挿入した画像ファイルにリンクを貼ってみましょう。

かずよし

「メディアとテキストブロック」や「ギャラリーブロック」で挿入した画像ファイルにも、同様の手順でリンクを設定することができますよ

STEP
ブロック内に画像を挿入

画像ブロックを新しく追加し、画像ファイルを挿入します。

ブロック内に画像を挿入
画像ブロックを追加
STEP
画像ファイルを選択

画像ファイルを選択して、「リンクを挿入」ボタンをクリックします。

画像ファイルを選択し[リンクを挿入]ボタンをクリック
画像の「リンクを挿入」ボタンをクリック
STEP
リンク先の設定

任意のページへのリンクを設定するには、URLを入力して「適用」ボタンをクリックします。

リンク先の設定し[適用]ボタンをクリック
画像にリンク先を指定
かずよし

リンク先の設定には、内部リンクの貼り方で紹介した「サイト内ページ検索」を使うこともできますよ

画像ファイルのリンク先について

画像ファイルのリンク先には、任意のページだけでなく「メディアファイル」や「添付ファイルのページ」を選択できます。

メディアファイル

画面上に画像ファイルのみを表示する

添付ファイルのページ

画像ファイルを説明するためのページを開く
※ページは、WordPressによって自動生成されます。

以上の手順で、画像にリンクを貼ることができます。

外部サービスの機能をWebページ上で利用可能にする操作のことを「埋め込む」と言います。

たとえば、YouTubeの動画をブログ記事に埋め込むと、その記事の訪問者はYouTubeのサイトに移動することなく動画を視聴することができます。

YouTubeやTwitterの埋め込み手順
  1. 埋め込むコンテンツのURLをコピー
  2. ブロックの新規追加
  3. URLを貼り付け
STEP
埋め込むコンテンツのURLをコピー

埋め込みたい動画やツイートのページを開き、URLをコピーします。

埋め込むYou Tube動画のURLをコピー
YouTube動画のURLをコピー
埋め込むツイートのURLをコピー
TwitterのURLをコピー
STEP
ブロックの新規追加

投稿や固定ページの編集画面で新しくブロックを追加します。

埋め込みブロックを追加
TwitterやYouTubeのブロックを追加
STEP
URLを貼り付け

STEP1でコピーしたURLを貼り付け「埋め込み」ボタンをクリックします。

You Tube動画のURLを貼り付け[埋め込み]をクリック
YouTube動画の埋め込み
ツイートのURLを貼り付け[埋め込み]をクリック
Twitterの埋め込み

以上の手順で、YouTubeやTwitterを埋め込むことができます。

YouTube動画を途中から再生するように埋め込む方法

YouTubeの開始位置を指定して埋め込む手順
  1. 動画ページで「共有」をクリック
  2. 開始時間を入力してURLをコピー
  3. YouTubeブロックにURLを貼り付け
STEP
動画ページで「共有」をクリック

YouTube動画を途中から再生するように埋め込むには、動画ページで「共有」をクリックします。

YouTube動画ページで[共有]をクリック
YouTube動画の「共有」をクリック
かずよし

埋め込み動画の再生を開始したい地点で「共有」をクリックすると、次の手順で開始時間を入力する手間を省くことができますよ

STEP
開始時間を入力してURLをコピー

開始位置」にチェックを入れます。開始時間を入力して「コピー」をクリックします。

開始位置を有効化してURLをコピー
開始時間を入力してURLをコピー
STEP
YouTubeブロックにURLを貼り付け

YouTubeブロックを追加してURLを貼り付け埋め込み」をクリックします。手順は、YouTubeやTwitterを埋め込むで紹介したものと同じです。


地図の埋め込みもできる

WordPressでは、「Googleマップ」や「Yahoo!地図」などのオンライン地図も簡単に埋め込むことができます。くわしくは、WordPressで地図を表示させる(Googleマップなどの埋め込み)方法をお読みください。

ブログカードを設置する

ブログカードとは、リンク先の情報をまとめて表示する埋め込み形式のことです。

ブログカードの表示例

リンク先の情報には、次の項目が表示されます。

  • 記事タイトル
  • 記事の概要(説明文)
  • アイキャッチ画像 など

WordPressで作成された記事なら、URLをコピーして以下のブロックに貼り付けるだけで、ブログカードが自動生成されます。

  • WordPressブロック
  • 埋め込みブロック

どんなデザインで表示されるかは、使用するテーマによって異なります。

このサイトで使っているテーマ「SWELL」の場合は、以下のようなデザインのブログカードが表示されます。

あわせて読みたい
【2023年版】WordPressブログ初心者におすすめのテーマ5選 WordPressでブログを開設したんだけど、デザインを変えたい ブログ初心者におすすめのテーマを教えてほしい 失敗しないテーマの選び方を知りたい この記事を読むと、上...
テーマ「SWELL」が生成する内部リンクのブログカード
日本語
WordPress 6.0 「アルトゥーロ」 以下の内容は WordPress.org 公式ブログの記事「WordPress 6.0 “Arturo”」を日…
テーマ「SWELL」が生成する外部リンクのブログカード

条件によっては、WordPressで作成された記事でもブログカードが自動生成されない場合があります。

ここまでは、投稿や固定ページの編集画面でリンクを設定する方法を説明しました。
これらのリンクは、すべてブログ記事やページのメインコンテンツに表示されます。

メインコンテンツではない領域(ヘッダー、フッター、サイドバー)にリンクを表示させたい場合は、以下のWordPress標準機能が便利です。

  • 「メニュー」機能
  • 「ウィジェット」機能
グローバルメニューの表示例
グローバルメニューの表示例

「メニュー」や「ウィジェット」によって表示できるリンクの内容や配置場所は、使用しているテーマによって異なります。基本的な使い方は、下記ページを参考にしてください。

目次に戻る

WordPressでは、リンクの編集や解除も簡単にできます。

リンクのテキストやURLを編集する

リンクの編集手順
  1. 編集したいリンクの一部をクリック
  2. リンクのテキストやURLを変更
STEP
編集したいリンクの一部をクリック

編集したいリンクの一部をクリックして、「編集」アイコンをクリックします。

リンクの「編集(ペン型)」アイコンをクリック
1.リンクの一部をクリック
2.編集アイコンをクリック
STEP
リンクのテキストやURLを変更

リンクのテキストやURLを変更し、保存をクリックします。

リンクのテキストやURLを変更
1.リンクのテキストやURLを変更
2.保存をクリック

以上の手順で、リンク先URLを編集できます。

リンクを解除する

解除したいリンクの一部をクリックし、「リンク解除」アイコンをクリックします。

リンクの一部をクリックし[リンク解除]アイコンをクリック
「リンク解除」アイコン

以上の手順で、リンクを解除できます。

目次に戻る

広告などのリンクコードを貼り付けたとき、記事にリンクコードがそのまま表示されてしまうことがあります。

WordPressの記事にリンクコードがそのまま表示されている
WordPressの記事にリンクコードがそのまま表示されている

解決法は、利用しているエディタの種類によって異なります。

「エディタ」とは、記事を編集するための機能のことです。WordPressには上記2種類のエディタがあります。WordPress最新バージョンの標準エディタは「ブロックエディタです。

通常、ブロックエディタの「段落ブロック」などにリンクコードを貼り付けると、記事には「リンク」として表示されます。しかし、ブロックによっては例外もあります。

例えば、「クラシックブロック」の中にリンクコードを貼り付けると、記事にリンクコードがそのまま表示されてしまいます。

こんなときは、「HTML として編集」機能を使うことで解決できます。以下の手順を参考にしてください。

STEP
リンクコードを貼り付けたい場所に目印を付けておく

ブロックの内容によっては、STEP3 でリンクコードを貼り付ける位置を見つけにくい場合があります。スムーズにリンクコードを貼り付けられるよう、目印を付けておきましょう。

できるだけ目立ちやすい記号などを書いておくといいです。今回は、「◆◆◆」と書きました。

リンクコードを貼り付けたい場所に目印を書いておく
リンクコードを貼り付けたい場所に目印を書いておく
STEP
ブロックツールバー「︙」>「HTML として編集」をクリック
「オプション」>「HTML として編集」をクリック
「︙」>「HTML として編集」をクリック
STEP
リンクコードを貼り付ける

STEP1 で書いた目印をドラッグし、リンクコードを貼り付けます。

リンクコードを貼り付け
目印をドラッグし、リンクコードを貼り付け
STEP
ブロックツールバー「ビジュアル編集」をクリック

ビジュアル編集」をクリックすると、通常の編集モードに戻ります。リンクコードを貼り付けた場所に「リンク」が正しく表示されているか確認してください。

「ビジュアル編集」をクリック
「ビジュアル編集」をクリック

「リンク」が正しく表示されているか確認
「リンク」が正しく表示されているか確認

クラシックエディタを使っている場合は、「テキスト」モードに変更してからリンクコードを貼り付けると解決する可能性があります。

クラシックエディタで「テキスト」モードに変更
クラシックエディタで「テキスト」モードに変更

まとめ

WordPressでリンクを設定する方法を紹介しました。いずれの方法も基本的に、

  1. リンクを貼りたい場所を選択して、
  2. リンク先を指定(URLの入力やサイト内ページ検索)する

という手順でリンクを貼ることができます。

テキストだけでなく、ボタンや画像ファイルにリンクを設定することも可能です。
これらのリンクは、リンク先URLの編集や解除も簡単にできます。

埋め込み機能を使うと、URLを貼り付けるだけでYouTubeやTwitterなどのコンテンツを共有したり、WordPressで作成された記事のブログカードを表示させたりすることもできます。

かずよし

SWELLなら、おしゃれなブログカードを簡単に作れますよ

評判の高いSWELLをレビュー!使ってみた感想と口コミまとめ

WordPressテーマ「SWELL」

このブログでも使っている、オススメNo.1のWordPressテーマ。デザイン性、操作性が高く、見栄えの良い記事がサクサク書ける!

リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込み

この記事が気に入ったら
フォローしてね!

目次