【WordPress】ページ内リンクを使ってユーザビリティを向上させよう – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

【WordPress】ページ内リンクを使ってユーザビリティを向上させよう

公開日 最終更新日

【WordPress】ページ内リンクを使ってユーザビリティを向上させよう

 

同じ専門用語でも、使うたびに説明は入れるくま~。でもけっこう大変だし、記事が説明だらけになっちゃうけど、みんなのためくま~…。
そんな時は「ページ内リンク」を付けると手間とスペースを省けるです~。

 

「ページ内リンク」とは、同じ記事内の特定の位置にジャンプするためのアンカーテキストのことです。

他サイトに移動する「外部リンク」や、サイト内の別ページへ移動する「内部リンク」とは異なり、あくまで「同じページ」内での移動であることが特徴です。

試しに以下の「START」をクリックしてみてください。

 

START

 

 

 

 

GOAL

 

「START」をクリックすると、ページは変わらずに数行先の「GOAL」にたどり着きますよね。

このようなリンクを「ページ内リンク」と呼びます。

ページ内リンクは、主に以下のような場面で使います。

 

読者に記事内の情報を選んでもらいたい時。
 (例)「手っ取り早く〇〇を知りたい方はこちら

ページ内ですでに解説していることを、もう一度読者に確認してもらいたい時。
 (例)「〇〇に関しては前述のとおりです。」

後に説明することを読者に予告する時。

 (例)「〇〇については後ほど解説します」

 

また、「目次」にも各見出しにページ内リンクを付けることが一般的です。

このように、ページ内リンクは読者が知りたい情報にすぐにアクセスできる利点があります。

ホスピタリティが行き届いたコンテンツは検索エンジンに高く評価されるため、サイト運営者は積極的に活用しておきたいですよね。

今回は、WordPressでページ内リンクを貼る方法をレクチャーしてみました。

 

ページ内リンクを貼る方法

WordPressでページ内リンクを貼るには、以下の2種類の方法があります。

 

・テキストエディターを編集する(←基礎知識)

・プラグインを使う(←効率的)

 

どちらの方法もとても簡単です。

記事内で頻繁にページ内リンクを使う場合には、「プラグインを使う」方が効率的ですが、WordPress内だけで通用する方法です。

WordPressを使っていない方やページ内リンクの基礎知識を押さえておきたい方は、上から順番に読み進めることをオススメします。

 

テキストエディターを編集する

こちらは、HTMLでページ内リンクを貼り付ける方法です。

コンテンツのHTMLを編集できる環境であれば、WordPress以外でも応用できます。

ページ内リンクを貼る場合には「リンク元」と「リンク先」の両方に編集が必要です。

 

リンク元_リンク先

 

まず、リンク先に「目印」を付けてあげましょう。

リンク元をクリックした時に「ここに飛んでくださいねー」と教えるための目印です。

WordPressのエディター画面で「テキストエディター」を開いてください。

 

テキスト_エディター

 

リンク先に指定したい見出しや段落のHTMLに以下の「id属性」を挿入します。

 

id=”〇〇〇”

 

そして「〇〇〇」の部分を、あなたが区別しやすいテキスト(目印)に置き換えてください。

 

見出しタグの場合

<h2 id=”〇〇〇”>リンク先</h2>

 

段落タグの場合

<p id=”〇〇〇”>リンク先</p>

 

※「id属性」に指定できるテキストは半角「英数字」と「-(ハイフン)」「_(アンダーバー)」等の一部の記号に限定されています。
※また、数字や記号から始まるテキストは認識されません。必ずアルファベットから始めてください。

 

id属性

次にリンク先に付けた目印をリンク元に教えてあげます。

 

<a href=”#〇〇〇“>リンク元のアンカーテキスト</a>

 

〇〇〇」の部分にid属性を入力します。
 

リンク先指定
 

これでテキストエディターでのページ内リンクの設定は完了です。

最後に必ず「プレビュー」で動作を確認してみましょう。

もし、うまく動作しない場合はこちらをチェックしてみてください。

 

プラグインを使う

ページ内リンクはHTML編集でも簡単ですが、記事内に複数ある場合には、地味に手間がかかります。

作業を効率化させるためにも、プラグインを使うのは有効な手段です。

この講座では、エディター強化プラグイン「TinyMCE Advanced」を使って、ページ内リンクを貼る方法をご紹介します。

 

「TinyMCE Advanced」とは?

「TinyMCE Advanced」はWordPressのエディター機能を強化するためのプラグインです。

ページ内リンクのほかにも、「下線」や「マーカー」「テーブル」等の装飾ツールを追加できます。

「TinyMCE Advanced」の魅力や詳しい使い方はこちらをチェックしてみてください。

 

TinyMCE Advancedでは、エディター画面に「アンカー」項目を追加することで、ページ内リンクをサクサク設置できるようになります。

 

アンカー

 

アンカーは、リンク先の見出しや段落に「id属性」を付けるためのエディターツールです。

id属性とは、リンク元をクリックした時に「ここに飛んでくださいねー」と教えるための目印のことです。

では、さっそくアンカー項目を追加してみましょう。

 

【WordPress】プラグインのインストール方法 基本から応用まで3つのメソッドをご紹介

 

TinyMCE Advancedを有効化したら、WordPress管理画面「設定」より「TinyMCE Advanced」に移動してください。

 

TinyMCE_Advanced

 

次に使用中のWordPressのバージョンに合わせてタブを選択します。

 

バージョン切り替え

 

今度は、下図のようなツールバーが表示されている項目を探してください。

 

ツールバー

 

このツールバーに「Unused Buttons for the Classic…(使用しないボタン)」以下のボタンの中から「アンカー(icon_anker)」をドラッグ&ドロップします。

 

ドラッグ&ドロップ

 

メニューバーに「アンカー(icon_anker)」項目が追加されていることを確認したら、画面最下部の「変更を保存」をクリック。

これで準備は整いました。

ページ内リンクを貼りたい記事のエディター画面を開きましょう。

 

カーソル

 

リンク先に指定したい段落や見出しの文頭にカーソルを合わせたら、メニューバーにある「アンカー(icon_anker)」項目をクリックします。

※新エディターをご使用の場合は各ブロックで「Classic Paragraph」を選択するとメニューバーが表示されます。

 

ID入力

 

するとID入力欄が開くので、id属性(目印)を入力します。

※「id属性」に指定できるテキストは半角「英数字」と「-(ハイフン)」「_(アンダーバー)」等の一部の記号に限定されています。
※また、数字や記号から始まるテキストは認識されません。必ずアルファベットから始めてください。

 

次にリンク元を設定します。

 

リンク挿入

 

一般的なリンクと同じ要領でアンカーテキストを選択し、メニューバーの「リンクの挿入(icon_リンク挿入)」をクリック。

 

リンク先入力

 

URLの入力欄に、アンカーで入力したid属性を入力します。

ここでは必ずid属性の文頭に「#」を入れる決まりになっています。

最後に適用ボタン(icon_適用)をクリックすれば、ページ内リンクの完成です。

きちんと反映されているかプレビューでの動作確認も忘れずに。

 

Q&A

クリックしても移動しない

あれれ?クリックしても微動だにしないくま~。
リンクを貼る時に「#」を忘れてないです~?

 

アンカーテキストの設定だけで済む内部・外部リンクとは違い、ページ内リンクはジャンプ先の設定も必要です。

作業工程が増えるため、ささいなミスで「リンクが正常に機能しない!」なんてことが、頻繁に起こり得ます。

 

アンカーテキストをクリックしても、画面が遷移しない場合は、以下の2点を確認してみてください。

 

・アンカーテキストのHTMLに「#」を入れ忘れている。

・リンク先の「id属性」に「#」を入れてしまっている

 

シャープ

 

どちらも間違いやすい箇所なので気を付けましょう。

 

別ページの特定位置に移動したい

別ページにリンクする時に、適当な位置にジャンプさせるにはどうしたら良いくま~?
そんな時は「URL」と「id属性」の両方を設定するです~。

 

今まで同じページ内の特定の位置にリンクを貼る方法をレクチャーしてきました。

では、「別ページ」の特定の位置にジャンプさせるには、どうしたら良いのでしょうか?

別ページの特定の位置へのリンクとは、例えばこちらのようなものです。

この場合でも、作業はほとんど変わりません。

まず、別ページの移動先の段落や見出しに「id属性」を設定しておきます。

そして、リンク元のアンカーテキストには以下のHTMLで囲みます。

 

<a href=”☆☆☆#〇〇〇“>アンカーテキスト</a>

 

☆☆☆」にURLを、「〇〇〇」にid属性を入力します。

 

URL_id属性 

 

WordPressのビジュアルエディターなら、リンクの挿入(icon_リンク挿入)を押し、URL入力欄に「☆☆☆#〇〇〇」を設定します。

 

 

最後に「プレビュー」を押して動作確認を行いましょう。

 

「ページ内リンクの貼り方」のおさらい

簡単に今回のまとめをしておくです~。

 

まとめ

・記事内の特定の位置にリンクすることを「ページ内リンク」と呼ぶ

・ページ内リンクは、読者が必要とする情報にすぐにアクセスできる

・ページ内リンクによって記事のユーザビリティが向上すると、間接的にSEO対策にも有効

・リンク元とリンク先の両方の設定が必要

・プラグインを導入すると効率的に運用できる

・正常に機能しない場合は「#」を要チェック

 

関連記事

【初心者必見】WordPressで投稿してみよう【旧エディター】

 

新規パートナー無料登録はこちら

 

 

サイト作成コース 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による