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>
見出しタグ、テキスト部分および、「aaa」の部分は、任意の文字列に置き換えてください。

 

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

 

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

 

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

 

スポンサーリンク

5 件のコメント

  • 初めまして、最近ワードプレスでブログを開設したものですが Tiny MCE Advanced をインストールして「リンクの設定」と「アンカー」の設定もしたんですけど、うまく飛べません。ちゃんと「リンク」のところには#も付いてるし、「アンカー」のところにもマークは表示されてます。何が足りないのかまったくわかりません、どうかご教授いただければ幸いです。

    • kin`sさん
      こんにちは。遅くなってすみません。
      こればっかりは状況を直接見てみないと分からないのですが・・・。
      まずは、今一度じっくり設定を確認してみて下さい。ブログの「うまく行かない」は、人為的な間違いがほとんどですので。
      それでも「いや!」という場合には、お使いのWordPressテーマの機能との兼ね合いなども関係しているかも知れません。
      単純な設定のはずなので、頑張ってみて下さい♪

  • はじめまして、ガッチと申します。
    今年1月初めからブログをスタートしたのですが、ページ内リンク方法が分からず困っていました。

    こちらのページを拝見させていただいたところ、とても分かりやすく記載されていて全てが解決しました!

    非常に助かりました、ありがとうございます!

  • AMPに切り替えてからTinyMCEの記事内へのリンクが飛ばずに困っていましたが
    ガッチさんの記事で一発で解決しました。
    感謝しています。

    もし誰かの役に立てばと思い、
    AMPで対応したページのリンクをご参考に。
    まえがきの途中の「手順へジャンプ」の部分です。

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    日本語が含まれない投稿は読めませんのでブロック対象となります。ご注意ください。