別ページの指定した箇所にリンクが飛ぶようにする方法【WordPressも】

今回は、「別ページの指定した箇所にリンクが飛ぶようにする方法」について紹介します。

静的サイトだけでなく、WordPressサイトでも使える方法も紹介するので、是非参考にしてください!

【静的ページ】別ページの指定した箇所にリンクが飛ぶようにする方法

リンクの移動先コード

リンクの移動先ファイルはdemo.htmlとします。

まずはリンクをクリックした移動先のコードを書きます。

ポイントは、リンクの移動先にid名を記述することです。

id名はご自由に決めてください。

リンクの移動元コード

リンクの移動元ファイルはindex.htmlとします。

リンクの移動元のコードはこちら。

ポイントは、aタグのhrefに「移動先のファイル名#移動先のid名」と記述することです。

これでaタグをクリックすると、demo.htmlファイルの中にある#sec01のid名を指定した箇所にリンクが飛ぶようになります。

【WordPress】別ページの指定した箇所にリンクが飛ぶようにする方法

リンクの移動先コード

リンクの移動先コードは静的ページと一緒のコードでOKです。

リンクの移動元コード

WordPressでは静的ページと違い、ファイルのパスを通す際にテンプレートタグを入れる必要があります。

上記のコードだと、スラッグがdemoのページの#sec01の箇所にリンクが飛ぶようになります。

WordPressで別ページにリンクを飛ばしたい場合は、必ずテンプレートタグを忘れないようにしましょう!

まとめ

以上が、「別ページの指定した箇所にリンクが飛ぶようにする方法」でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事