【WordPress】ページ内リンク(アンカーリンク)を貼ってみたい(初心者向け)

【WordPress】ページ内リンク(アンカーリンク)を貼ってみたい(初心者向け)

目次

デキ子
デキ子

ページを作成しているときに、
「後述します」と書いて、
実際にその後述部分にページが飛ぶように設定できると便利ですよね。
意外と簡単に出来たのでご案内しますね♪

1.ページ内リンク(アンカーリンク)とは?

実際に「ページ内リンク」を体験してみましょう!

ここから (←クリックしてください)




ここへ

どうでしたか?
飛びましたよね。
これは使えるアイテムですね~(^^♪

2.仕組みについて

このあとタグ(HTML)を使って説明しますが、実際の操作にはタグは使用しませんので安心してください。

①ここから

<a href="#abc">ここから</a>
ざっくりとした意味 → 「 abc番地へ飛びたい」

②ここへ

<a id="abc">ここへ</a>
 ざっくりとした意味 → 「abc番地です」

このようなシステムになっています。

3.私たちがすること

・行きたい場所を決める
・番地を設定する

この2つだけです。

では、実際に作業の説明をします

4.設定の仕方

①「ここから」の設定

・リンクを貼ります

←これや

←これの、リンクのアイコンを使います

・「リンク」をクリックします (※あらかじめクリックさせる文字を選択しておく)

・番地の入力をします

    「#abc」と入力します

      (シャープ) と 半角英字で任意の番地を決めます
・矢印の「送信」をクリックします

②「ここまで」の設定

←この「アンカー」ボタンを使います

・「アンカー」ボタンをクリックします

・出てきたウィンドウに番地の「abc」を入力して「OK」ボタンをクリックします
     ※ここでは、「#」は入れません!!!

これで、作業は終わりです(^^♪

5.動作確認をする

設定が出来たら、必ず動作確認をしてください

なんかおかしいですか…?

6.設定できないとき

①プラグインの確認

・Contents系のプラグインが入っていますか?
・Contents系のプラグインが複数あれば、不要なプラグインを無効化してください
  ちなみに私は、「Table of Contents Plus」を使っています

②動かない場合の対処

《予想されること》

・「#」を入れるのを間違えている(ここからの方だけです)
・半角英字で入力していない(プラグイン初期設定は半角英字だと思われますが、異なる場合もあるので設定画面で確認してください)
・番地の綴りが間違っている
・不要なスペースが入っていませんか

③ズレて動作する

・プラグインを開いて「スムーズ・スクロール上部余白」に数字が入っていれば「0」にしてみてください
  (※キャッシュの関係ですぐに反映されない場合があるので翌日に再度確認してみてください)
  ワードプレスにログインする → 左の項目から「設定」 → 「TOC+」 → 下部の「上級者向け (表示)」 をクリックします)

   (「Table of Contents Plus」プラグインの開き方…こちらも参考にしてください

④スムーススクロールしない

・プラグインを開いて「スムーズ・スクロール効果を有効化」に「☑」チェックを入れてください(「Table of Contents Plus」プラグイン)       

⑤アンカーボタンがない

・「TinyMCE Advanced」プラグインを開く

・「アンカー」ボタンをツールバーへ移動させる
・下部にある「変更を保存」をクリックします

解決しましたか?

デキ子
デキ子

別ページにジャンプさせるときは
「ここから」設定で該当ページのURLと最後に
「#abc」の設定を。
「ここまで」ページにも「abc」アンカー設定をしてください

デキ子
デキ子