戻る
※Amazonプライムビデオへ戻ります
| ■ 停止 | ▶ 再生 | ▶▶ 早送り | ||
|
||||
元のページへ戻る方法は、Webサイトの閲覧時やホームページ制作時に読者をスムーズに目的の場所へ誘導するための重要なテクニックです。JavaScriptによる自動ブラウザバック、指定URLへの遷移リンク、ページ内アンカーの3つの手法をマスターすることで、ユーザー利便性を劇的に向上できます。
「Webサイトを閲覧中に1つ前の画面に戻りたい」「自サイトの個別ページや詳細セクションに『元のページに戻る』ボタンを設置したい」「コピペで使える簡単なコードを知りたい」と思ったことはありませんか？
適切な戻る導線を設置することは、サイト離脱を防ぎユーザー体験を高める上で非常に効果的です。本記事では、初心者でもWordPressやHTMLサイトですぐに使える『元のページへ戻る』おすすめ実装コードと手順をわかりやすく解説します。
📌 1クリックで直前画面へ戻る
JavaScriptを活用し、直前に開いていたページへ全自動で画面を戻します。
📌 指定のまとめ・トップへ戻す
特定のURLを指定して、確実に親ページや比較表へ読者を誘導します。
📌 同一ページ内のスムーズ移動
長い記事でもページ最上部や目次へ一瞬でスクロール移動させます。
元のページへ戻る方法の基本と仕組み
Webサイトにおいて「元のページへ戻る」仕組みは、大きく分けて3つの方式が存在します。読者がどのような経路でページに訪れたかによって、最適な方法を選択することが重要です。
- ブラウザ履歴を利用する方法（JavaScript）：閲覧者のブラウザ履歴を参照し、1つ手前のページにワンタップで戻します。
- 特定URLへのアンカーリンク指定：あらかじめ親ページ（まとめ記事やトップページ）のURLを指定して確実にリンク移動させます。
- 同一ページ内のID指定（ページ内リンク）：1つの長い記事内で、最上部や特定の比較表セクションへスッと戻す場合に利用します。
ポイント：サイト制作やブログ運営においては、状況に応じてこれらのコードを使い分けることで、読者が迷子にならず快適に周回できるサイト構造を作ることができます。
元のページへ戻る具体的な3つのコードと使い方
1. 直前のページへ自動で戻る（ブラウザバック型）
閲覧者がどのページから遷移してきたかに関わらず、直前に見ていた画面へ戻したい場合は、JavaScriptの「history.back()」を使用したボタンコードを配置します。
2. 指定したまとめページやトップページへ戻る（固定URL型）
「比較まとめ記事」や「トップページ」など、確実に特定の親ページへ読者を戻したい場合は、標準的なHTMLリンク（href=”URL”）にオシャレなボタン装飾を施して設置します。
3. 記事内の比較表や最上部へ戻る（ページ内スクロール型）
縦に長い記事などで、見出しや最上部の比較表へ一瞬で戻したい場合は、戻り先の要素に「id」を設定し、「#id名」でリンクを張ることで、同一ページ内でのスムーズな移動を実現します。
元のページへ戻るボタンを設置する際の注意点
設置時の注意ポイント：
・別タブ（target=”_blank”）で開かれたページでJavaScriptのブラウザバックを実行しても戻れない場合があります。別タブ遷移のリンクには固定URL型のボタンを配置するのが確実です。
・スマホ表示時にボタンが小さすぎて押しづらくならないよう、適度なパディング（余白）と押しやすい大きさを維持しましょう。
実装方法別の特徴・メリット比較表
| 実装パターン | ブラウザバック型 | 固定URL型 | ページ内スクロール型 |
|---|---|---|---|
| 主な用途 | 直前の画面へ戻す | 親記事・トップへ戻す | 比較表・最上部へ戻す |
| 確実性 | 同一タブ閲覧時のみ有効 | 100%確実に遷移 | 100%同一ページで移動 |
| おすすめ利用場面 | 検索結果や一覧から来た時 | 個別の詳細レビュー記事 | 縦長ランキング記事 |
WordPressで「戻るボタン」を設置する簡単3ステップ
- ステップ1：記事編集画面で「カスタムHTML」ブロックを追加する
WordPressのブロックエディタ（またはクラシックエディタのテキストタブ）を開き、カスタムHTMLのブロックを追加します。 - ステップ2：目的のボタンコードを貼り付ける
用途に合ったHTML/CSSコードをそのままコピー＆ペーストで貼り付けます。 - ステップ3：プレビューで動くか確認して公開する
プレビュー画面で実際にボタンをクリックし、意図通りのページに戻るか動作テストを行って公開完了です。
まとめ：分かりやすい導線で親切なWebサイトを作ろう
「元のページへ戻る」ボタンを適切な場所に配置することで、読者のストレスを減らし、サイト内を快適に回遊してもらうことができます。
設置作業はコードを貼り付けるだけで数分で完了しますので、ぜひ本記事の手順を参考にして、親切で使いやすいWebサイトを構築してみてください。
※当記事で紹介しているHTML/CSSコードやブラウザ仕様は掲載時点のものです。お使いのWordPressテーマや環境に合わせて調整のうえご活用ください。
