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

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

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

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

蓮

「文字数多い記事を書く人」はページ内ジャンプ必須です!

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

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

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

ワードプレスでページ内ジャンプする5つの手順
  1. 「TinyMCE Advanced」というプラグインを入れる
  2. 「TinyMCE Advanced」の設定
  3. 「飛ぶ地点」と「着地地点」を決める
  4. 「飛ぶ地点」にリンク挿入する
  5. 「着地地点」にアンカー設定する

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

TinyMCE Advanced

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

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

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

2.「TinyMCE Advanced」の設定

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

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

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

はい、できましたね!

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

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

蓮

ここまでで1分

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

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

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

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

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

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

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

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

蓮

「#abc」「#aaa」「#ccc」「#koko」「#tobu」とかてきとーでOKです。

いれたらエンターね。

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

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

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

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

これで完了!

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

4つの注意点!

ページ内ジャンプの設定するときの注意点4個
  1. 必ずプレビューで試せるかチェックする!
  2. 「飛ぶ地点」に「#」入れる!
  3. 着地地点の位置のずれ…
  4. 任意の英数字は毎回変える

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

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

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

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

2.「飛ぶ地点」に「#」入れる!

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

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

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

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

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

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

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

するとこうなります。

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

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

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

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

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

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

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

蓮

全部を「aaa」とかでやっちゃわないように気を付けてくださいね。

まとめ

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

ワードプレスでページ内ジャンプする5つの手順
  1. 「TinyMCE Advanced」というプラグインを入れる
  2. 「TinyMCE Advanced」の設定
  3. 「飛ぶ地点」と「着地地点」を決める
  4. 「飛ぶ地点」にリンク挿入する
  5. 「着地地点」にアンカー設定する
ページ内ジャンプの設定するときの注意点4個
  1. 必ずプレビューで試せるかチェックする!
  2. 「飛ぶ地点」に「#」入れる!
  3. 着地地点の位置のずれ…
  4. 任意の英数字は毎回変える

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