HTMLを使わなくても簡単に出来る方法はないの？
こんなお悩みを解決します。
ページ内リンクは「TinyMCE Advanced」というプラグインを利用すれば簡単にページ内リンクを作ることが出来ます。
まずはページ内リンクを設置するメリットから説明していきますので、ページ内リンクの作り方だけ知りたいという方はこちらをクリックしてください。
ページ内リンクを設置するメリット
ページ内リンクを設定するとユーザビリティの向上に繋がり、SEOの効果も期待できます。
ページ内リンクを設定することによって、ユーザーが見たい情報をスクロールせずにたどり着くことが簡単になります。
そうなるとユーザーの満足度が高まりGoogleからの評価向上に繋がります。
ユーザーの満足度が高まることでサイトの滞在時間が上がり、離脱率も少なくなりますよね。
プラグインを利用したページ内リンクの作成方法
プラグインを利用したページ内リンクはたった3つのステップで完了します。
3つのステップ
①「TinyMCE Advanced」をインストールする
②テキストにアンカーリンクを設定する
③指定したいリンク先にアンカーポイントを設定する。
①「TinyMCE Advanced」をインストールする
今回は「TinyMCE Advanced」というプラグインを利用します。
「TinyMCE Advanced」を利用するとページ内リンク作成作業が全てビジュアルエディタで完結します。
「TinyMCE Advanced」をインストールしていない方は下記の手順でプラグインをインストールしてください。
「プラグイン」→「新規追加」→「TinyMCE Advanced」→「インストール」
インストールまで完了すると、「有効化」というボックスが表示されるのでインストールしたプラグインを有効化させましょう。
有効化まで完了したら「プラグイン設定」から「アンカー」のボタンを編集ツールに移動させます。
すると、編集ツール内に「アンカー」ボタンが表示されているはずです。
②テキストにリンクを作成する。
次に記事投稿ページに移動します。
リンクしたいテキストを選択し、「リンクの挿入/編集」をクリック
空欄が表示されるので空欄の頭に「＃」を入力し、そのあとに好きな英数字を入力してください。
リンク元の準備はこれで完了です。
③指定するリンク先にアンカーポイントを設定する
次に先程作成したリンクの指定ポイントを設定します。
指定ポイントとは、さっき作成したリンクをクリックすると移動する場所です。
まずは、移動させたいいテキストを選択し、アンカーボタンをクリックします。
クリックすると下記のような画面が出てくるので、こちらの枠に②で設定した英数字を入力してください。
今回の場合は「aaa」ですね。
この時に「＃」を入力しないように気を付けてください。
最後に「OK」ボタンをクリックすると完了です。
プレビューを開いて、ちゃんと設定されているか確認してみてください。
プラグインを利用しないページ内リンクの作成方法
プラグインを利用せずにページ内リンクを作りたいという方向けにプラグインを使わずに作る方法を説明していきます。
2つのステップ
①テキストにリンクを作成する
②指定するリンク先にアンカーポイントを設定する
先程とステップは同じですが今回はテキストエディタを使います。
テキストエディタを使いたくないという方は「TinyMCE Advanced」をインストールしてビジュアルエディタで記事を作成しましょう。
①テキストにリンクを作成する。
<a herf="#○○"＞ページ先リンクのテキスト</a>
まずは、スタート地点に上記のコードを入力してください。
◯◯の部分に半角英数字を、その先頭に「＃」を入力してください。
先ほど説明したビジュアルエディタで同じ操作をして作成してもOKです。
これでリンク元の準備は完了です。
②指定するリンク先にアンカーポイントを設定する
リンク元のコードの設定が終わったら、リンク先のコードを作成します。
<span id="○○"＞ページ先リンクのテキスト</a>
指定したいリンク先に上記のコードを入力してください。
「h2」タグや「h3」タグに移動させたい時は下記のように入力します。
<h2><span id="○○"＞ページ先リンクのテキスト</a><h2>
こちらには「＃」は不要なので気をつけましょうね。
プラグインを利用しない方法はこれで完了です。
こちらもプレビューを開いて、ちゃんと設定されているか確認してみてください。
ページ内リンク（アンカーリンク）を簡単に作成する方法：まとめ
今回はページ内リンクを作成する方法を解説しました。
ページ内リンクはの作成2つのステップ
①テキストにリンクを作成する
②指定するリンク先にアンカーポイントを設定する
ページ内リンクを作成することでユーザビリティも向上し、さらに見やすいブログ記事を作成することが可能となります。
少し面倒な作業になるかもしれませんがぜひチャレンジしてみてください。
関連記事：WordPressでサイトマップの作り方を解説します【初心者必見です】
関連記事：クローラーの巡回の仕組みとは？認知される方法を理解しよう