【wordpress】で、かんたんにページ内ジャンプする方法

WordPressを使ってかんたんにページ内ジャンプする方法を解説いたします！

➡ページ内ジャンプってこんな感じ！

2分でできますのでご覧ください。

ユーザーさんが必要な情報をすぐにみれるよう、

ブログ記事内にページ内ジャンプを配置し、活用してみてください！

WordPressでページ内ジャンプする5つの手順

1．「TinyMCE Advanced」というプラグインを入れる

TinyMCE Advanced

↑↑これをコピペでもいいけど…生徒さんたち見ていると、もともとこのプラグインが入っている人が多いので、プラグインチェックしてみてください。

「TinyMCE Advanced」とは投稿画面の文字や操作にかかわるプラグインで、必須です。

＞＞ワードプレスの入れるべきプラグイン5つ＋6つと…いらないプラグイン

2．「TinyMCE Advanced」の設定

「設定」⇒「TinyMCE Advanced」をクリック。

このクラッシックなんちゃらって方をクリック。

下の方にある「アンカー」をこの辺りにドラッグで移動します。

はい、できましたね！

そしたら投稿画面に戻ってみましょう。

投稿画面の上のバーに、この「アンカー」のマークがあれば準備OKです！

3．「飛ぶ地点」と「着地地点」を決める

次にページ内ジャンプする手順を書いていきますね。⇒ここから

「5．着地地点にアンカー設定する」の見出しまで飛んでみますね。

普通は記事冒頭から「〇が知りたい方はこちら➡該当見出し」って感じで長い記事の下の方に飛ばします。

4．「飛ぶ地点」にリンク挿入する

まず、飛ぶ地点をドラッグで選択。

その後「リンク挿入ボタン」をクリックします。

次にリンクを入れます。まず「#」をいれて、その後てきとうな「英数字」を入れてください。

いれたらエンターね。

5．「着地地点」にアンカー設定する

次に「着地地点」をドラッグで選択して、上の「アンカー」ボタンをクリックします。

するとこんな画面が出てくるので、ここで「飛ぶ地点」のリンクで入れた英文字を入れます。

この時「#」は入れません！

これで完了！

プレビューで試してみてください。

4つの注意点！

1．必ずプレビューで試せるかチェックする！

まれに「#abc」と入れたのに、着地点のアンカーには「aaa」と入れちゃったりしてうまく飛ばないこともあります。

人間ですのでミスはつきもの。

ページ内ジャンプ設定後に必ず、プレビュー画面で飛べるかどうかを確認してください。

2．「飛ぶ地点」に「#」入れる！

飛ぶ地点に「#」入れるのをお忘れなく。

同時に、着地点に「#」は入れないでくださいね！

3．着地地点の位置のずれ…

ページ内ジャンプの着地点を「見出し」にする人が多いのですが…

見出しにするとこうなります。

↑↑わかりますか？見出しの文字は画面の上の方になって見えないんです。

次に、着地点を「見出しの1個上の文章」にしてみました。

するとこうなります。

↑↑ほら。これだと見出しが見えるように飛ぶんです。

だから着地点は「見出しの1個上の文章」にするといいですよ！

4．任意の英数字は毎回変える

リンクとアンカーで書く文字は毎回変えます。

A→A”…英数字は「#aaa」→「aaa」

B→B”…英数字は「#bbb」→「bbb」

って感じで、飛ぶ個所ごとに変えましょう。

まとめ

wordpressでページ内ジャンプする方法、かんたんに解説してきましたが、いかがでしたか？

わりと毎回役立ってる手法なので、ぜひ試してみてください！