WordPressで記事ページ内の特定場所へリンク！超簡単な設定方法

こんにちは。ジロウです。

WordPressを使ったブログの個別記事ページの中で、特定の場所へリンクを貼ってスクロール（ジャンプ）させる簡単な設定方法を解説します。

目次の設定に見られるお馴染みの仕組みを、目次に関係なく、狙った場所に任意で設定する方法です。

いわゆる “ページ内リンク” というヤツですね。

これ、「TinyMCE Advanced」プラグインを利用すれば、スゴく簡単に実装できます。

でも今回は、プラグインに頼らない方法も併せて、ご紹介したいと思います♪

ブログなんかを運営していると、同一の記事ページ内で読者の求める項目へリンクさせたい、といった仕掛けをしてみたくなることがあると思います。

「このページの◯◯を参照してね♪」

みたいな感じで、クリックすれば余計な文章をジャンプして目的の場所へスクロールできる、といった仕掛けです。

これ、意外なくらい簡単に実装できるので、是非とも参考にしてみてください♪

ただ、アドセンス広告までもジャンプする形になると、場合によっては収益に悪影響を与える結果になる可能性もあるので、使い方には用心するべきかも知れませんが・・・。

このブログや、僕のマニュアル「アクセス・ボンバー」を参考にして頂いている場合には、既に「TinyMCE Advanced」プラグインをインストール＆有効化されていることと思います。

もし、まだ取り入れていない場合には、最初にインストール＆有効化してください。

「TinyMCE Advanced」の設定

■WordPressダッシュボードの左サイドメニューから、

［設定］⇒［TinyMCE Advanced］

と進みます。

■「TinyMCE Advanced」のエディター設定画面で、「使用しないボタン」の中から、下図のようにリボンの形をしたアイコンを任意の位置へドラッグ＆ドロップで移動します。

■［変更を保存］をクリックすれば、設定は完了です。

「TinyMCE Advanced」を使った実装方法

まずはスタート地点となるテキストにリンクを貼って、ボタン化しましょう。

■ページ内リンクを設置したい記事の「投稿の編集」画面で、スタート地点となるテキストをドラッグ＆ドロップで指定します。

■エディター内の「リンクを挿入」ボタンをクリックします。

■リンク設定のウィンドウが開くので、先頭に半角の「#」を入力し、続いて任意のテキストを入力したら、［適用］ボタンをクリックします。

■これでリンク設定が適用されました。

続いて、リンク先となるゴール地点のテキストに「アンカー」を設定します。

■ドラッグでテキストを指定し、リボンの形の「アンカー」ボタンをクリックします。

■スタート地点のリンクに設定したのと同じ文字列を、「#」を除いて入力します。

入力できたら［OK］をクリックしましょう。

■設定が完了し、テキストの頭に錨（アンカー）マークが表示されます。

以上でページ内リンクの設置が完了しました。

プレビュー画面で動作を確認してみましょう。

画像内で例に挙げたリンクを実装してみると、下記のようになります。

「スタート地点」をクリックすると、画面がスクロールして「ゴール地点」がページ頭に移動します。

スタート地点

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

ゴール地点

手動でページ内リンクを実装する方法

実は、「TinyMCE Advanced」をインストールしていなくても、ページ内リンクは簡単に設置できます。

「スタート地点」と「ゴール地点」のそれぞれに、下記のようにコードを付け足してやるだけです。

あ、「スタート地点」にリンクを貼るのは、「TinyMCE Advanced」がインストールされていなくてもデフォルトのエディターで可能ですね。

<a href="#aaa">スタート地点</a>

<a id="aaa"></a>ゴール地点

ゴール地点が見出しの場合には、下記のようにコードを追記します。

<h2><a id="aaa"></a>ゴール地点</h2>

いかがでしょうか。意外に簡単でしたよね♪

スクロールの速さやジャンプの仕方など、細かいところを調整したいとなると、「jQuery」といった“JavaScript” のお世話になることになるんだと思います。

でも、通常のブログならそれほど多用する仕組みじゃないし、今回の方法で十分じゃないでしょうか・・・ね。