- WordPressのブログ記事でリンクを貼りたい
- ページの途中にリンクを貼る方法を知りたい
- ブログ記事にYouTubeやTwitterなどを埋め込みたい
本記事を読めば、上記を全て実現できます。
こんにちは。ブログで生計を立てている、かずよし（@kazu_wp）といいます。
WordPressを使い始めて12年以上が経ちました。
- 2011年からWordPressを愛用
- Google アドセンスを10年、アフィリエイトを8年
- 最高月収72万円
- A8.net「ブラックランク」到達
- ユーザー数300万人の「WordPress超初心者講座」運営
このサイトで使っているテーマ「SWELL
」なら、おしゃれなリンクカードの作成や、関連記事リンクの設置がとても簡単にできます。
ブログで「リンクを貼る」ってどういうこと？
まずは、リンクの基本について確認しておきましょう。
上記について「もう知ってるよ！」という場合は、下記に飛んでください。
ブログ記事の「リンク」とは？
リンクには「つなぐ」という意味があります。
インターネットの世界で、リンクはページどうしをつないで移動するための仕組みをいいます。
この仕組みは「ハイパーリンク」と呼ばれることもあります。
ブログやホームページを読んでいると、文字やボタン、画像などをクリックして別のページに移動することがありますよね？これらは、リンクの仕組みを活用しています。
リンクを活用して別ページに移動できるよう設定することを「リンクを貼る（張る）」と表現します。
ブログ記事にリンクを貼ることで、次の目的を達成できます。
- 別のサイトに誘導したい
- 他の記事も読んでほしい
- 記事の途中に誘導したい
基本的なリンクの貼り方
リンクの貼り方は、リンクの移動先によって次の3つに分類できます。
ちなみに、上の3つのリンクは「ページ内リンク」です。
クリックすると、それぞれのリンク設定方法の説明に移動します。
ためしに、上記のリンクをクリックしてみてください。
それぞれの説明に、なめらかな動きで移動するはずです。
かずよしページ内リンクがなめらかに移動するのは、
このサイトで使っているテーマ「SWELL」の機能によるものです。
WordPressブログでリンクを貼る方法
通常、ブログの記事にリンクを貼るには「HTML」という言語でコードを書く必要があります。
しかし、WordPressなら簡単な操作でリンクの設定が可能。
コードを書く必要がないから、ブログ初心者でも手軽にリンクを貼ることができます。
まずは、記事内の一部のテキスト（文字列）にリンクを貼る方法を紹介します。
ボタンや画像にリンクを貼る方法や、SNSなどを埋め込む方法は、本記事の後半で紹介します。
» テキスト以外にリンクを貼る方法
外部リンクの貼り方
外部リンクは、次のようなときに使います。
- 記事を書くときに参考にしたページを紹介する
- 関連するサイトに誘導する など
- リンク先のURLをコピー
- リンクを設定したい文字列を選択
- URLを貼り付け
リンク先にしたいページを開き、URLをコピーします。
投稿や固定ページの編集画面（ブロックエディタ）で、リンクを設定したい文字列を選択し、ブロックツールバーの「リンク」ボタンをクリックします。
STEP1でコピーしたURLを貼り付けます。リンク先を新しいタブで開くよう設定する場合は「新しいタブで開く」をオンにしてから、「送信」ボタンをクリックします。
以上の手順で、外部リンクを貼ることができます。
内部リンクの貼り方
内部リンクは、次のようなときに使います。
- 記事の内容を、別の記事で補足する
- ランディングページ（LP）に誘導する
ランディングページとは？
サイト訪問者のアクション（商品の購入、サービスの申込、問い合わせなど）を促すためのページ。
内部リンクは、先ほどの「外部リンクの貼り方」と同じ手順で設定することもできますが、ここでは内部リンクを貼るときだけ使える便利な機能（サイト内ページ検索）を利用した手順を紹介します。
かずよしリンク先のURLをコピペする必要がないので、さらに簡単になりますよ
- リンクを設定したい文字列を選択
- リンク先に設定したいページを検索
投稿や固定ページの編集画面（ブロックエディタ）で、リンクを設定したい文字列を選択し、ブロックツールバーの「リンク」ボタンをクリックします。
かずよし外部リンクの貼り方［STEP2］と同じ操作です。
リンク先に設定したい記事タイトルの一部を入力すると、リンク先の候補が表示されます。リンク先に設定したい記事タイトルをクリックします。
リンク先を新しいタブで開くようにする場合は「新しいタブで開く」をオンにしてから記事タイトルをクリックしてください。
以上の手順で、内部リンクを貼ることができます。
ページ内リンクの貼り方
通常のリンクをクリックするとページの先頭部分に移動しますが、ページ内の特定場所をリンク先に指定することもできます。
このようなリンクは「ページ内リンク」または「アンカーリンク」と呼ばれます。
ページ内リンク（アンカーリンク）を設定するには、移動先に「目印」を付けなければなりません。
かずよし目印を付ける操作はとても簡単にできるので、安心してください。
- リンク先にHTMLアンカーを入力
- リンクを設定したい文字列を選択
- リンク先に「# + HTMLアンカー」を入力
ページ内のリンク先に設定する機会が多いのが「見出し」です。ここでは、見出しブロックをリンク先としたページ内リンクの設定方法を説明します。
リンク先としたいブロックを選択し、画面右側の設定パネル「高度な設定」をクリックします。
「HTML アンカー」の入力欄に任意の文字列を入力してください。これが「目印」になります。
下の画像では「link」としました。
HTMLアンカーは、スペースを含まない半角英数字で入力してください。
かずよし見出し以外のブロックにも、HTMLアンカーを入力できますよ
投稿や固定ページの編集画面（ブロックエディタ）で、リンクを設定したい文字列を選択して「リンク」ボタンをクリックします。
かずよし外部リンクの貼り方［STEP2］や、内部リンクの貼り方［STEP1］と同じ操作です。
リンク先に、以下の文字列を入力し、［送信］ボタンをクリックします。
「# 」+ 「HTMLアンカーに入力した文字列」
例：#link
#（ハッシュ）は、半角で入力してください。
以上の手順で、ページ内リンクを貼ることができます。
別ページ内の特定場所にもリンクを貼れる
リンク先に、別ページ内の任意の場所を指定することもできます。たとえば、
- URLが「https://example.com/post/」のページ内で、
- HTMLアンカー「link」を設定した場所
をリンク先とする場合には、「https://example.com/post/#link」と入力します。
ページ内リンクをスムーズにスクロールするには？
本記事で表示しているページ内リンクをクリックすると、いきなりジャンプせず、スムーズなスクロールで移動します。これはWordPressの標準機能ではなく、テーマに備わっている機能です。
このサイトで使っているテーマ「SWELL」にも、ページ内リンクをスムーズにスクロールする機能が備わっています。
ここまで、WordPressのブロックエディタでリンクを設定する3つの方法（外部リンク、内部リンク、ページ内リンク）について説明しました。
WordPressのリンクを編集・解除する方法
WordPressでは、リンクの編集や解除も簡単にできます。
リンクの文字列やURLを編集する
- 編集したいリンクの一部をクリック
- リンクの文字列やURLを変更
編集したいリンクの一部をクリックして、「編集」アイコンをクリックします。
リンクの文字列やURLを変更し、「送信」ボタンをクリックします。
以上の手順で、リンク先URLを編集できます。
リンクを解除する
解除したいリンクの一部をクリックし、「リンク解除」アイコンをクリックします。
以上の手順で、リンクを解除できます。
その他のリンク設定方法
ここまでは、ページ内のテキストにリンクを設定する方法について紹介しました。
テキストリンク以外にも、次のように特殊なリンクを設定することができます。
ボタンにリンクを貼る
投稿や固定ページの編集画面（ブロックエディタ）で使えるボタンブロックにも、リンクを設定することができます。
- ボタンブロックを追加
- ボタン内に文字列を入力
- リンク先の設定
ボタン内に文字列を入力して、「リンク」ボタンをクリックします。
リンク先のURLを入力して、新しいタブで開くよう設定する場合は「新しいタブで開く」をオンにしてから、「送信」ボタンをクリックします。
かずよしリンク先の設定には、内部リンクの貼り方のSTEP2で紹介した「サイト内ページ検索」を使うこともできますよ
以上の手順で、ボタンにリンクを貼ることができます。
画像にリンクを貼る
投稿や固定ページ内に挿入した画像ファイルに、リンクを貼ることができます。
- ブロック内に画像を挿入
- 画像ファイルを選択
- リンク先の設定
ここでは、「画像ブロック」内に挿入した画像ファイルにリンクを貼ってみましょう。
かずよし「メディアとテキストブロック」や「ギャラリーブロック」で挿入した画像ファイルにも、同様の手順でリンクを設定することができますよ
画像ファイルを選択して、「リンクを挿入」ボタンをクリックします。
任意のページへのリンクを設定するには、URLを入力して「適用」ボタンをクリックします。
かずよしリンク先の設定には、内部リンクの貼り方のSTEP2で紹介した「サイト内ページ検索」を使うこともできますよ
画像ファイルのリンク先について
画像ファイルのリンク先には、任意のページだけでなく「メディアファイル」や「添付ファイルのページ」を選択できます。
- メディアファイル
-
画面上に画像ファイルのみを表示する
- 添付ファイルのページ
-
画像ファイルを説明するためのページを開く
※ページは、WordPressによって自動生成されます。
以上の手順で、画像にリンクを貼ることができます。
YouTubeやTwitterを埋め込む
外部サービスの機能をWebページ上で利用可能にする操作のことを「埋め込む」と言います。
たとえば、YouTubeの動画をブログ記事に埋め込むと、その記事の訪問者はYouTubeのサイトに移動することなく動画を視聴することができます。
- 埋め込むコンテンツのURLをコピー
- ブロックの新規追加
- URLを貼り付け
埋め込みたい動画やツイートのページを開き、URLをコピーします。
投稿や固定ページの編集画面で新しくブロックを追加します。
STEP1でコピーしたURLを貼り付けて「埋め込み」ボタンをクリックします。
以上の手順で、YouTubeやTwitterを埋め込むことができます。
YouTube動画を途中から再生するように埋め込む方法
- 動画ページで「共有」をクリック
- 開始時間を入力してURLをコピー
- YouTubeブロックにURLを貼り付け
YouTube動画を途中から再生するように埋め込むには、動画ページで「共有」をクリックします。
かずよし埋め込み動画の再生を開始したい地点で「共有」をクリックすると、次の手順で開始時間を入力する手間を省くことができますよ
「開始位置」にチェックを入れます。開始時間を入力して「コピー」をクリックします。
YouTubeブロックを追加してURLを貼り付け「埋め込み」をクリックします。手順は、YouTubeやTwitterを埋め込むで紹介したものと同じです。
地図の埋め込みもできる
WordPressでは、「Googleマップ」や「Yahoo!地図」などのオンライン地図も簡単に埋め込むことができます。くわしくは、WordPressで地図を表示させる（Googleマップなどの埋め込み）方法をお読みください。
ブログカードを設置する
ブログカードとは、リンク先の情報をまとめて表示する埋め込み形式のことです。
ブログカードの表示例
リンク先の情報には、次の項目が表示されます。
- 記事タイトル
- 記事の概要（説明文）
- アイキャッチ画像 など
WordPressで作成された記事なら、URLをコピーして以下のブロックに貼り付けるだけで、ブログカードが自動生成されます。
- WordPressブロック
- 埋め込みブロック
どんなデザインで表示されるかは、使用するテーマによって異なります。
このサイトで使っているテーマ「SWELL」の場合は、以下のようなデザインのブログカードが表示されます。
条件によっては、WordPressで作成された記事でもブログカードが自動生成されない場合があります。
メニュー・ウィジェットを使う
ここまでは、投稿や固定ページの編集画面でリンクを設定する方法を説明しました。
これらのリンクは、すべてブログ記事やページのメインコンテンツに表示されます。
メインコンテンツではない領域（ヘッダー、フッター、サイドバー）にリンクを表示させたい場合は、以下のWordPress標準機能が便利です。
- 「メニュー」機能
- 「ウィジェット」機能
「メニュー」や「ウィジェット」によって表示できるリンクの内容や配置場所は、使用しているテーマによって異なります。基本的な使い方は、下記ページを参考にしてください。
まとめ
WordPressでリンクを設定する方法を紹介しました。いずれの方法も基本的に、
- リンクを貼りたい場所を選択して、
- リンク先を指定（URLの入力やサイト内ページ検索）する
という手順でリンクを貼ることができます。
テキスト（文字列）だけでなく、ボタンや画像ファイルにリンクを設定することも可能です。
これらのリンクは、リンク先URLの編集や解除も簡単にできます。
埋め込み機能を使うと、URLを貼り付けるだけでYouTubeやTwitterなどのコンテンツを共有したり、WordPressで作成された記事のブログカードを表示させたりすることもできます。
見栄えの良いブログカードを表示させるなら、本サイトでも使っている「SWELL」テーマが便利です。
