WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

WordPressでリンクを貼る方法|初心者向け完全ガイド

目次

この記事の結論

WordPressのリンクには「外部リンク」「内部リンク」「ページ内リンク」の3種類があり、用途に応じて使い分けます。設定は基本的に、リンクを貼るテキストを選択して「リンク」アイコンをクリックし、URLやリンク先ページを指定するだけで完了します。テキストだけでなく、画像やボタン、ブログカード、SNS・YouTube埋め込みといった応用も可能です。設置後はリンク先の変更・削除や「新しいタブで開く」など、表示形式を柔軟に調整できます。

生徒

ペン博士!WordPressでリンクを貼りたいのですが、やり方が分からなくて困っています…

ペン博士

WordPressでリンクを貼る方法じゃな!実はリンクにはいろいろな種類があるんじゃ!しっかり覚えていくんだぞ!

生徒

そうなんですね!ありがとうございます!

WordPressでリンクを貼りたいけれど、外部リンクや内部リンク、ボタンや画像への設定方法がわからない…..」そんな悩みはありませんか?この記事では、基本から応用までリンクの貼り方を具体的に解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。

菅井さん
将来的への不安と子育てという背景から「副業」に挑戦しようと決意。独学からプログラミングの学習を開始していたが、WithCodeに出会い体験コースを受講。約4ヶ月の学習に取り組み、当初の目標であった卒業テスト合格を実現した。WithCode Platinumにて3件の案件を担当し、現在は副業だけでなく本格的に「フリーランス」として在宅で活躍していきたいと考えるようになる。

詳しくはこちらの記事をご覧ください。

あわせて読みたい
【子育てママさん必見】「在宅×副業」を達成!多方向で活躍中のママさんフリーランスにインタビュー! ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか?だとしたらすごすぎます! うむ、うちの受講生でな、まさに“時間も場所...

菅井さんの主な制作実績はこちら

WordPress初心者必見|基本的なリンク設定の3ステップ

WordPress初心者必見|基本的なリンク設定の3ステップ
ペン博士

ここではWordPressでリンクを設定する基本手順を解説するぞ!外部リンク・内部リンク・ページ内リンクの3種類について説明するからよーく聞いておくんじゃぞ!

外部リンクを貼る

外部リンクとは、ご自身のサイトから別のサイトへ誘導するリンクです。
信頼性の高いサイトに発リンクすることで、SEO効果も期待できます。
設定手順は以下の通りです。

STEP
リンクを貼るテキストを選択し、
「リンク」アイコンをクリックする
外部リンクを貼る
STEP
サイトのURLを入力し、「送信」マークをクリックする
外部リンクを貼る
STEP
設定完了
外部リンクを貼る

これで外部リンクが設置されます。

別タブで開きたい場合は「新しいタブで開く」を有効にします。

外部リンクを貼る

内部リンクを貼る

内部リンクとは、ご自身のサイト内の別ページへ移動させるリンクです。
関連性の高いページにつなぐことで、ユーザーの回遊性やSEO評価を高めることができます。
設定手順は以下の通りです。

STEP
リンクを貼るテキストを選択し、
「リンク」アイコンをクリックする
内部リンクを貼る
STEP
キーワードを入力し、リンク先のページを選択する
内部リンクを貼る
STEP
設定完了
内部リンクを貼る

ページ内リンクを貼る

ページ内リンク(アンカーリンク)は、同じページ内の特定位置へ移動させるリンクです。記事の見やすさや回遊性を高めるために役立ちます。
設定手順は以下の通りです。

STEP
リンク先のブロックを指定し、
「高度な検索」をクリックする。
ページ内リンクを貼る
STEP
「HTMLアンカー」に任意のIDを入力する
ページ内リンクを貼る
STEP
ページ内リンクを貼るテキストを選択
ページ内リンクを貼る
STEP
URLの欄にIDを入力する
ページ内リンクを貼る
STEP
設定完了
ページ内リンクを貼る

WordPressのリンク機能を活用した4つの応用テクニック

WordPressのリンク機能を活用した4つの応用テクニック
ペン博士

WordPressではテキストリンクだけでなく、画像やボタンにもリンクを設定できるんじゃ!
ブログカードやSNS埋め込みも可能で、記事の見せ方にバリエーションを持たせることができるぞ!

画像にリンクを貼る

画像リンクは、クリックで別ページへ誘導するバナーや商品画像としてよく使われます。設定手順は以下の通りです。

STEP
画像ブロックを選択し、「高度な設定」をクリックする。
画像にリンクを貼る
STEP
「HTMLアンカー」にリンク先を入力する
画像にリンクを貼る

ボタンにリンクを貼る

ボタンリンクは、ユーザーに行動を促す場面で効果的です。資料請求や購入ボタンなど、強い訴求が必要な箇所に活用されます。
設定手順は以下の通りです

STEP
ボタンブロックを追加する
ボタンにリンクを貼る
STEP
ボタンにテキストを入力する
ボタンにリンクを貼る
STEP
「HTMLアンカー」にリンク先を入力する
ボタンにリンクを貼る
STEP
デザインをカスタマイズする
ボタンにリンクを貼る

ブログカード型リンクを貼る

ブログカードは、サムネイルやタイトルが表示されるカード型リンクです。記事の視認性が高まり、クリック率向上が期待できます。
設定手順は以下の通りです。

STEP
リンクを挿入したい箇所に新規ブロックを追加し、
URLをそのまま貼り付ける。
ブログカード型リンクを貼る
STEP
ブログカードが表示される
ブログカード型リンクを貼る

SNSやYouTubeリンクを埋め込む

WordPressではX(旧Twitter)などのSNSやYouTubeの埋め込みも可能です。
SNSや動画リンクを埋め込むと、記事に動きや臨場感を加えることができます。設定設定手順は以下の通りです。

STEP
任意の埋め込みブロックを追加する

例として、X(旧Twitter)の投稿URLを入力し「埋め込み」をクリックします

SNSやYouTubeリンクを埋め込む
STEP
コンテンツが表示される
SNSやYouTubeリンクを埋め込む

WordPressでリンクを編集・削除する方法|よくあるトラブル解決

ペン博士

一度設置したリンクも、あとから編集や解除が可能なんじゃ。誤ったURLを修正したり、不要になったリンクを消すことができるぞ!

リンク先URLを編集する

リンクを編集すると、すでに設定したURLを別のものに変更できます。
記事の内容を更新したり、リンク切れを修正したいときに便利です。
設定手順は以下の通りです。

STEP
編集したいリンクを選択し、「編集」をクリックする
リンク先URLを編集する
STEP
リンク先を変更する
リンク先URLを編集する

リンクを解除する

リンクを解除すると、設定していたリンクが外れ、通常のテキストに戻ります。
対象のテキストを選択し、リンクマークをクリックすれば完了です。

リンクを解除する

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

リンクを新しいタブで開くと、元ページを残したままリンク先を表示できます。ユーザーにとって利便性が高い設定です。ユーザーにとって利便性の高い設定です。
リンク編集画面で「新しいタブで開く」を選択すると、別タブで開くことが可能です。

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

ペン博士、WordPressでリンクを貼る方法が理解できました。テキストリンクだけでなく、画像やボタンにもリンクを設定できるんですね!

ペン博士

うむ、これらをしっかり理解して今後のWebサイト制作に生かすんじゃぞ!

生徒

ありがとうございます!この学びを今後のWebサイト制作に役立てます

まとめ

WordPressにおけるリンク設定と編集のポイントを以下にまとめます。

・リンクには「外部リンク」「内部リンク」「ページ内リンク」の3種類があり、用途に応じて使い分けることが重要。
テキストだけでなく、画像やボタンなどにリンクを設定することができる。
設置後はリンク先の変更や削除に加え、「新しいタブで開く」など表示形式を調整することで、柔軟な運用が可能

これらを理解して活用することで、WordPressでのリンク活用がスムーズになり、ユーザーにとって価値の高い記事を作成できるようになるので活用してみてください。


関連記事


参考リンク(公式・一次情報)


よくある質問(FAQ)

Q1. WordPressのリンクにはどんな種類がありますか?

A. 主に3種類あります。ご自身のサイトから別のサイトへ誘導する「外部リンク」、サイト内の別ページへ移動させる「内部リンク」、同じページ内の特定位置へ移動させる「ページ内リンク(アンカーリンク)」です。信頼性の高いサイトへの外部リンクや、関連性の高いページへの内部リンクはSEO効果も期待できます。

Q2. 外部リンクを新しいタブで開くようにするにはどうすればよいですか?

A. リンク編集時に「新しいタブで開く」を有効にします。これにより元ページを残したままリンク先を表示でき、ユーザーにとって利便性の高い設定になります。すでに設定済みのリンクでも、リンク編集画面から後で「新しいタブで開く」を選択して変更できます。

Q3. テキスト以外にリンクを設定することはできますか?

A. できます。画像にリンクを貼ってバナーや商品画像にしたり、ボタンブロックにリンクを設定して資料請求や購入への行動を促したりできます。また、URLをそのまま貼り付けるとサムネイルやタイトルが表示される「ブログカード型リンク」になり、X(旧Twitter)などのSNSやYouTubeの埋め込みも可能です。

Q4. 設定したリンクを編集・解除するにはどうすればよいですか?

A. リンク先URLを変更したい場合は、編集したいリンクを選択して「編集」をクリックし、リンク先を変更します。リンクを解除して通常のテキストに戻したい場合は、対象のテキストを選択してリンクマークをクリックすれば完了です。リンク切れの修正や不要なリンクの削除に便利です。

WithCodeを体験できる初級コース公開中!

WithCodeを体験できる初級コース公開中!

初級コース(¥49,800)が完全無料に!

  • 期間:1週間
  • 学習内容:
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!

この記事を書いた人

WithCode(ウィズコード)は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次