wordpressページ内リンクへジャンプする方法

アンカー設定

wordpressのページ内でリンクへジャンプと言えば定番なのが「目次機能」ですね。

目次機能ならプラグイン「TOC+(Table of Contents Plus)」をインストールすれば簡単に自動挿入できます。

今回やりたいことは目次ではなく、本文の中からページ内の特定の場所(行)へリンクを飛ばす(ジャンプする)方法です。

ブログの読者は必要な情報を探している訳ですから、本当は読んでほしい前段階の記事を読まずに結論のみを欲している人の方が多いのです。

そこで、「お急ぎの方は○○○○へ」のような形でジャンプリンクを設定することがあります。

他にも最初の見出しで全体比較表を表示し、比較表から気になる見出しへジャンプできるようにするなどに使えます。以下の記事で活用しています。

同窓会の会場
熊本の同窓会、ホテルの会場を人数や金額まとめて比較熊本の同窓会をホテルでするならどこがいい?先生方をお招きしての同窓会ならホテルが無難。人数と金額プランでまとめてみましたので会場選びの参考にしてください。...

ジャンプ先にアンカーを設定する

ページ内リンクのジャンプ先を設定します。

TinyMCEAdvancedプラグインを使っている場合と使っていない場合で設定の方法は異なります。

プラグインTinyMCEAdvancedを使っている方の場合

TinyMCEAdvancedプラグインを使っている場合はビジュアルエディタにアンカーアイコンが表示されていますので、これをクリックするだけでジャンプ先のアンカーが設定できます。

アンカー設定

記事内のジャンプしたい部分にカーソルを合わせてアンカーボタンをクリックします。

アンカー名設定

ジャンプ先の位置に名前を付けます。

記事内に同じ名前のアンカーを作らないようにしましょう。

OKボタンをクリックするとアンカーを設定した位置にイカリマークが付きます。

アンカーマーク

プラグインTinyMCEAdvancedを使っていない方の場合

テキストモードでアンカーを設定したい位置に以下のコードを記入します。

<a id=”Jumpto“></a>

【Jmpto】の部分がアンカー名です。

クリックするテキストにリンクを設定する

今度はクリックする側のテキストにリンクを設定します。

リンク文字として設定する文字列を選択し、【リンクの挿入/編集】アイコンをクリックします。

リンクの挿入
リンク先設定

リンク先に先ほど設定したアンカー名【Jumpto】の前に【#】を付けて入力します。

【#】は半角でアンカー名との間にスペースなどが入らないようにしましょう。

以上で設定は完了です。

試してみましょう

以下の「ココ」をクリックすると【Jumpto】を設定した導入文の「ブログ読者は・・・」のところへジャンプします。

ココをクリックすると【Jumpto】という名前のアンカーにジャンプします。

ABOUT ME
まつみ
まつみ
もっと輝く50代応援メディア『50blog』を運営するアラフィフ女子まつみ@老後戦略家です。 現在は社内SEとして働きながら、これからの新しい働き方のために猛烈にポジティブに活動中です。 楽しく過ごす50代、おしゃれに暮らす50代、未来に備える50代。 50代は大忙しです。 もう若くないから・・・なんて言わずにもっともっと輝きましょう! 一緒にがんばる仲間も募集中!twitterフォローよろしくお願いいたします。

COMMENT

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