こんにちは、ジブリッシュマンブログのエイジです。
今回は、いろんな人のブログの右下にあるこれ
私のいまこの記事の右下にあるページの先頭に戻るボタン。さらに、ホーム画面に戻るボタン。
いま見たでしょ？（笑）
ホーム画面に戻るボタンは、みなさんあまり設置していない人が多いみたいですが、ページの先頭に戻るボタンはだいたいみなさん表示してる人が多いですね。
私のホームボタン設置は、ここから違う記事も読んでくれたらいいなと思ってホーム画面ボタンも一緒に設置しました（笑）
私も最近ブログカスタマイズの記事を書いていると文字数が多くなってしまうので、先頭に戻るボタンがあったら、とても簡単にチェックができるのでありがたい機能だなと感じます。
この記事で出来ること
- ページの先頭に戻るボタン設置
- ホーム画面に戻るボタン設置
- ボタンの色を変える方法
さらに私のブログで他の必要な絶対入れたほうがいいカスタマイズ１６選を下記の記事で紹介しています。
ページの先頭やブログトップに戻るボタンの設置方法『はてなブログ』2022年最新版
今回参考にさせていただいたのはこちらのブロガーさんです。
はてなブログのデザイン「Minimalism」で、ページの先頭に戻るボタンを設置する方法 - いちcafe日記
ありがとうございました。
では本題に戻りましょう。
まずはコピペ作業を終わらせてからいろいろと設定していきましょう。
フッタにコピペ
まず下のコードをフッタにコピペです。
『デザイン』➡『カスタマイズ』➡『フッタ』の順番でフッタにコピペしてください。
<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="https://www.eijilife.com/"><i class="blogicon-home"></i></a></li>
</ul>
<script>
function smoothScroll(o){var e=window.pageYOffset,l=o>e;setTimeout(function(){l&&o>=e?(e=e+(o-e)/20+1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):!l&&e>=o?(e=e-(e-o)/20-1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):window.scrollTo(0,o)},10)}
</script>
デザインCSSにコピペ
次に下のコードをデザインCSSにコピペしてください。
『デザイン』➡『カスタマイズ』➡『デザインCSS』の順番でデザインCSSにコピペしてください。
/* To Top */
.toTop-nav {
position: fixed;
bottom: 10px;
right: 10px;
display: -webkit-flex;
display: flex;
padding: 0;
margin: 0;
z-index: 999; }
.toTop-nav li {
list-style-type: none;
background: rgba(0, 0, 0, 0.3);
border-radius: 50px;
text-align: center; }
.toTop-nav li:first-child {
margin-right: 10px; }
.toTop-nav li a {
display: block;
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px; }
.toTop-nav li a {
color: #ffdab9;
text-decoration: none; }
.toTop-nav li a:visited {
color: #ffdab9; }
.toTop-nav li a:hover {
color: #ffdab9;
text-decoration: underline; }
.toTop-nav li a:active, .toTop-nav li a:focus {
color: #ffdab9; }
.toTop-nav li a:hover {
text-decoration: none; }
これでコピペは以上になります。
お疲れ様でした。
次にお好みで他の部分を設定をしてみましょう。
他の部分設定(マーク、自分のURL、色)
コード上から、赤文字になってる場所を変えることでマークが変わります。
こちらは、はてなブログで使えるマークになります。自分の好きなマークを作ってみましょう。
こちらの方の記事に詳しく出でいますので、参考にしてください。
はてなブログアイコン素材一覧127種と使い方 - かまさんちのぶろぐ
次に緑色の文字になっている部分は、自分のホーム画面のURLをそせましょう。
こちらは、私のホーム画面のボタンの行き先です。
自分のブログの飛んでほしい所のURLをを載せましょう。
私ですこちらになります。
次に紫色の文字になってる場所を変えることで、色を変えることが出来ます。
こちらは色を変えることが出来ます。色はカラーチャートから選んで見てください・
どうでしたでしょうか？出来ましたか？（笑）
まとめ
今回は、ページの先頭に戻るボタンとホームに戻るボタンの紹介をさせていただきました。
意外に簡単に作れるし、とってもわかりやすいので、取り付けもあっとゆう間に出来たのではないでしょうか？
これでまた、カスタマイズが一つづつ増えていきますね。
では、今回はここまでです。
最後まで、読んでいただきありがとうございます。
