おすすめの記事

ブログのノウハウ

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

bloggerのトップページに戻るボタンを追加する方法
hyu
当サイトのリンクには広告が含まれています。
カメさん
カメさん

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

ひゅー
ひゅー

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

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

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

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

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

この記事でわかること
  • トップページに戻るボタンの追加方法
  • トップページに戻るボタンのアレンジ
読みたいところをタップ
  1. トップページに戻るボタンの追加する方法
  2. トップページに戻るボタンのアレンジ
  3. さいごに

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

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

カメさん
カメさん

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

ひゅー
ひゅー

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

カメさん
カメさん

それは助かる！

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

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

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

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

  1. 「HTML」に追加
  2. 「CSS」に追加

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

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

HTMLに追加すること

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

bloggerの管理画面を開く
「レイアウト」をクリック
下の方にある「フッター3」の「＋ガジェットを追加」をクリック

「HTML/JavaScript」をクリック
コンテンツの中に以下の文章を追加する
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<div id="page_top"><a href="#"></a></div>
引用：コトダマウェブ

タイトルには何も入れなくて大丈夫です。

「保存」をクリック

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

CSSに追加すること

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

bloggerの管理画面を開く
「テーマ」をクリック
「カスタマイズ」をクリック

「詳細設定」をクリック
「文字の色」をクリックして「CSSを追加」をクリック
「カスタムCSSを追加」に以下の文章を追加する
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  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: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
引用：コトダマウェブ
右下にある「保存」をクリック

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

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

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

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

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

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

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

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

ABOUT ME
ひゅー
ひゅー
気ままなブロガー
Contact
20代の気ままなブロガーです。ブログ運営で生活をしています。ブログ運営で得た知識を当サイトで発信中。
関連記事
こちらの記事もどうぞ
記事URLをコピーしました