Web
Analytics

ゲームと柴犬は神!!

小5から始めているブログです。読者登録やスター大歓迎です♪

はてなブログで上に戻るなどを設定する方法


ⓘスポンサードリンク


フォロー&ブックマーク
お願いします!

👆読者登録してくれると嬉しいです!!

 

こんばんは!ひゃくまんさんです。

今回ははてなブログで上に戻るを設定する方法を紹介!!

早速何ですがブロガーさんを見るとこういうのないでしょうか?

f:id:shiyuzevo:20210906203741j:plain

                                                                                                           👆みたいなやつ。

僕はちょっと違うのですが今回は今紹介したやつを紹介します。

やり方はとても簡単!!

やり方1 フッタにコードを貼る

やり方は超簡単です。

ただコピーして貼る簡単な作業。

<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を貼ります。

このコードはやどめさんのブログを参考にしました!

www.yadomede.com

この記事です。

とても見やすくてわかりやすいブログです!!

やり方2 コードをデザイン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; }

これはデザイン➡カスタマイズ➡デザインCSSに貼ります。

皆さんお疲れ!!これで完成です!!ブログを見てみましょう

たった2個のコードで上に戻るボタンを設置できる

今回紹介したコード2個のみで設置することが可能です!

スマホで見るとみずらくなってます。

っで上に戻るボタンの横に家のマークもあります。

家のマークを押すとホームに戻ります。

ホームに戻ったり一番上に戻ったりするのがわかりやすい!!

最後に

今回ははてなブログで上に戻るボタンを紹介しました👍

コード2個ですぐできるのでやってみてください!!

参考になった方はスター等よろしくお願いします!

簡単だからぜひやってみて👀

では今回はこの辺で!!

ばいばい!