公開日 2022年8月15日 最終更新日 2022年8月15日
先日Twitterに流れてきたリンクカードをクリックすると、その記事の途中、見出しの所に飛びました。
リンク先が記事の途中の見出しになっていたようです。
Twitterに投稿した本人はそうした記憶もなくたまたまそうなったようなのですが、「そんなことできるんだ」と思いますよね。
この記事ではページ内にリンクを作り、記事の途中に飛ばす方法をお伝えします。
目次から見出しに飛ばす
このWordPressブログにはプラグインで見出しを入れてあります。
見出しのプラグインについてはこちらをご覧ください。
今のリンクカードからはページのトップに飛んだかと思います。
ではこれはどうでしょう。
同じページですが、目次の文字サイズ変更の見出しに飛んだのではないでしょうか。
この記事のURLはhttps://masudamegumi.com/table-of-contents/
目次の文字サイズ変更の見出しはhttps://masudamegumi.com/table-of-contents/#i-5
これはプラグインが見出しに独自のURLを作ってくれているので、そこに飛ぶようにしたからなのです。
特定の見出しに飛ばす際には、このURLを取得すれば良いのです。
例えば下記は私のメニュー記事にあるステップメール・ホームページ作成サポートに直接リンクさせました。
もちろんテキストにリンクを貼ることもできます。
ステップメール・ホームページ作成サポートはこちらです。
メニューページのトップに飛ばし、探してもらうより親切ですよね。
ページ内の任意の場所にジャンプするようにリンクを作る
WordPressは目次を入れれば見出しに飛ばすことができます。
noteも目次から見出しに飛ばすことができます。
目次を使わずに任意の場所にリンクで飛ばしたい場合はどうすればいいのでしょうか。
タグを使って飛ばす先を指定してあげればいいのです。
使用するタグは以下の２つです。
飛ばす元 ⇒ <a href="#半角英数任意の文字列">飛ばす元</a>
飛ばす先 ⇒ <h2 id="半角英数任意の文字列">飛ばす先</h2>
id="abc"など、半数英数にしてください。
「飛ばす元」、「飛ばす先」も言葉を入れ替えてくださいね。
やってみましょう。（今回任意の文字列はaaaとしました）
（テスト）飛ばす先
いかがでしょうか。
この見出しにジャンプしましたよね！
これがページ内にジャンプさせる方法です。
別ページの任意の場所にリンクで飛ばす方法
現在書いている記事から別記事や固定ページの任意の場所に飛ばしたいこともあるかと思います。
冒頭でメニューページ（別ページ）のステップメール・ホームページ作成サポート（任意の場所）にジャンプして見せましたが、あれと同じです。
他のページにジャンプさせる場合は以下のように記述してください。
<a href="https://masudamegumi.com#英数半角任意の文字列">ジャンプします！</a>
では、別ページの任意の場所にジャンプしてもらいますね。
こちらは先ほどの <a href="https://masudamegumi.com#英数半角任意の文字列">飛ばすための文章</a>
英数半角任意の文字列が /menu/#60
飛ばすための文章は「初めての方限定ではありますが60分オンラインコンサルティングは特別価格でお話しできます。
とします。
下記のテキストリンクをクリック（タップ）すると初めての方限定コンサルにジャンプしますのでご確認くださいね。
初めての方限定ではありますが60分オンラインコンサルティングは特別価格でお話しできます。
まとめ
一番簡単なのは、目次で見出しに任意の文字列を作ってもらうことです。
目次から見出しに飛びそのアドレスを取得することで、その見出しにジャンプさせることができます。
見出しを使わない場合、タグだけ見ているとややこしそうに見えるかもしれません。
やってみるとそんなに難しくもありません。
プレビューでちゃんとジャンプするか確認することもできますのでぜひチャレンジしてみてくださいね！
