皆さんこんにちはGB350.comです。今回はWordPressでもHTMLでも使える「前に戻る」ボタンの作成をしていきたいと思います。もとに戻るボタンは結構カンタンに作成することができますが、ユーザーにとっては結構使うことが多いボタンかもしれません。
使う場面
例えば万が一リンクミスなどをしていたり、存在しないページにアクセスしてきたユーザーに404ページを表示すると思います。そんなときさり気なく前のページに戻るボタンを設置してあげるとユーザーのブラウザバックを防ぐことができます。
デモ
See the Pen Back to Page by Tori とり(Torichan) (@Tori-Torichan) on CodePen.
動作デモです。ここで編集して動作を試すことができます。
※このデモはお使いのデバイス環境により動作しない場合があります。
コード
コードはたったの5行でできます。
<link href="https://gb350.netlify.app/style.css" rel="stylesheet" />
<p class="back" style="text-align:center"><a href="#" onClick="history.back(); return false;" style="text-decoration:none;">
<span>前のページにもどる</span>
</a></p>
最後から2行目の<span>で囲まれている文字が表示される文字なので、ここを自由に表示したい文字にカスタムします。
CSS
また、CSSを外部サイトから読み込んでいますが、これをWordPressなどで使用する際にCSSコードをテーマなどに埋め込みをして表示させたいという方もいるかも知れません。そんなときは以下のコードを使用してください。
/* 戻るコンテンツ用 */
.back a {
color: #000000;
}
.back span:hover {
text-decoration: underline;
}
/* 戻るコンテンツ用 */
使用する際はHTMLの
<link href="https://gb350.netlify.app/style.css" rel="stylesheet" />
を削除して使用してください。
また、CSSで「もとに戻る」の色を指定しています。変更したい場合は
.back a {
color: #000000;
}
のcolorを編集してください。
colorは16進数で示しているので、指定したい色をGoogleなどで調べてカスタムしてみてください。
例えば「白」にしたければ、
白 16進数 もしくは white hex
などと検索してみてください。
白だったら「#FFFFFF」と出てくるのでこれを置き換えます。そうすると文字色が白に変わります。
下線
<p class="back" style="text-align:center"><a href="#" onClick="history.back(); return false;" style="text-decoration:none;">
上のHTMLコードの最後の「style=”text-decoration:none;」でリンクの下線を消すというコードを追加しています。
はじめから下線を表示したい場合はこのコード1を削除してください。
- style=”text-decoration:none; ↩︎
.back span:hover {
text-decoration: underline;
}
CSS内の上のコードでテキストにマウスカーソルを当てたときに下線をつけるというコードを書いています。
必要に応じて削除したりしてください。
テキストの場所
<p class="back" style="text-align:center"><a href="#" onClick="history.back(); return false;" style="text-decoration:none;">
上のコードの「style=”text-align:center”」で「前のページに戻る」という文字の場所を指定しています。
例えば
style="text-align:left"
で左寄りにしてみたり
style="text-align:right"
で右寄りにしてみたりお好みでカスタムしてください。
詳しい情報は下記サイトが便利です。
https://developer.mozilla.org/ja/docs/Web/CSS/text-align
終わりに
この前に戻るボタンはコピペでカンタンにどこにも設置することができますが、ユーザーにとっては結構重要な役割をしていると思います。
みなさんもこのコードをコピーして、カスタムして使ってみてください!それでは〜!
コメント