【はてなブログ】上に戻るボタン|設置したやぁん

《《《ヤドめで独自お題の回答者ぼしゅうちゅう》》》

やぁん?ヤドクイーンです。

記事を読んだ後、ページのトップに簡単に戻ることができたら便利ですよね?

 

そんな思いから、「上に戻るボタン」を設置しました!

コピペで簡単に設置できたので、気になる方はぜひ参考にしてください。

f:id:yadomede:20200307154132p:plain

 

「上に戻るボタン」の設置方法

参考にした(コピペさせていただいた)サイトです。

ありがとうございます!

www.imuza.com

 

フッタに入力するコード

以下のコードを「デザイン > カスタマイズ > フッタ」に入力してください。

<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="あなたのブログURL"><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>

"あなたのブログURL"という部分に、自分のブログURLを入力します。

この《ヤドめで》であれば「https://www.yadomede.com/」です。

 

デザイン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: #fff;
text-decoration: none; }
.toTop-nav li a:visited {
color: #fff; }
.toTop-nav li a:hover {
color: #fff;
text-decoration: underline; }
.toTop-nav li a:active, .toTop-nav li a:focus {
color: #fff; }
.toTop-nav li a:hover {
text-decoration: none; }

 

設置したときの画面の見え方

【パソコンから見た場合】

f:id:yadomede:20200307153016p:plain

 

【スマホから見た場合】

f:id:yadomede:20200307154314j:image

 

こんな感じで、ページの右下に表示されています。

設置してから知ったのですが、「トップページに戻るボタン」も同時に設定できました(笑)

 

 

おわりに

簡単に設置することができました。

 

せっかく設置したので、この記事を読んだあなた!

1回はクリックしてみてください♡

 

(厚かましい・・・笑)

 

以上です。 

最後まで読んでくださって、ありがとうやぁん♡

ちょうど1か月前の記事は・・・?

www.yadomede.com

 

Twitterはそこそこ更新しています。
フォローバックするので、よかったらフォローおねがいします!

twitter.com