【blogger】誰でもできる！トップページに戻るボタンを追加する方法

カメさん

トップページに戻るボタンがほしいな！

ひゅー

今回は初心者の人でも簡単にできるトップページに戻るボタンの追加方法を教えるよ！

トップページに戻るボタンがあるブログはおしゃれですよね。

どんなに調べても、わからない！

という人もいるかと思います。

この記事ではbloggerでコピペするだけでできるトップページに戻るボタンを追加する方法を紹介します。

トップページに戻るボタンの追加する方法

トップページに戻るボタンの追加には「HTML」と「CSS」を使います。

カメさん

「HTML」とか「CSS」とか何もわからないんだけど！！

ひゅー

そんな人でも大丈夫です！コピペだけでも追加できるようになっています！

カメさん

それは助かる！

今回のトップページに戻るボタンの追加で参考にしているサイトはこちらです。

参考サイト：コトダマウェブ

「コトダマウェブ」で紹介されている、ものを少しだけアレンジしたものを紹介します。

トップページに戻るボタンの追加には2つしなければいけないことがあります。

この2つを両方とも追加するようにしてください。

片方だけと、トップページに戻るボタンの追加はできませんので、注意してください。

HTMLに追加すること

まずはじめに、HTMLの追加を行います。

これで、HTMLの操作は完了になります。

CSSに追加すること

つぎに、CSSの追加を行っていきます。

これで、トップページに戻るボタンの追加が完了になります。

つぎに、トップページに戻るボタンのアレンジ方法を紹介していきます。

ボタンの色とかブログに合った色に変更ができます！

トップページに戻るボタンのアレンジ

トップページに戻るボタンのボタンの部分を少しだけアレンジすることができます。

ボタンの色やサイズ、位置を変更ができる

それでは、僕がアレンジした文章を紹介します。

#page_top{
width: 60px;
height: 60px;
position: fixed;
right: 30px;
bottom: 30px;
background: #a8daf0;
opacity: 0.6;
border-radius: 50%;
}
#page_top a{
position: 50px;
display: block;
width: 60px;
height: 60px;
text-decoration: none;
}
#page_top a::before{
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
content: ‘\f106’;
font-size: 25px;
color: #fff;
position: absolute;
width: 30px;
height: 35px;
top: -5px;
bottom: 0px;
right: 0px;
left: 0px;
margin: auto;
text-align: center;
}

自分なりにカスタマイズしたCSS

こちらは、CSSを少しアレンジしています。

この文章をコピーしてCSSに貼り付けても良いです。

数字の部分は自分で変更することができます。

自分の好きなボタンのサイズ、位置にしましょう！

また、青文字の「#a8daf0」ではボタンの色を変更が可能です。

こちらのカラーコードで調べえることができます

自分のブログに合った色にしましょう！

さいごに

今回は、bloggerでトップページに戻るボタンの追加する方法のお話しました。

トップページに戻るボタンがあると、おしゃれなブログになりますよね。

ブログ記事を読んでくれている人も、読みやすくなって、たくさん記事を読んでくれるようになるかも！？

コピペして、あとは自分好みのボタンにするだけなので、簡単だったのではないでしょうか。

bloggerのHTMLを自分でカスタマイズしている場合は「トップページに戻るボタン」が設置できない場合がありますので、ご了承ください。

ひゅー

気ままなブロガー

XContact

20代の気ままなブロガーです。ブログ運営で生活をしています。ブログ運営で得た知識を当サイトで発信中。