【コピペで簡単】TOPへ戻るボタンを設置する

縦長のサイトを見ているとき、ページの一番上まで戻るのに苦労したことはないでしょうか。

PC画面では画面右にスクロールバーがあるので少し楽ですが、スマホで見ている場合にはそうはいきません。

特にブログのような文字の多いサイトでは、スマホの画面サイズではかなり縦長になってしまうもの。一番上まで戻るのは一苦労です。

上の方にもう一度見たい内容がある場合、そこで諦めてしまう人もいるかもしれません。

【参考】当サイトのスマホからのアクセス率

※フリーソフトで作成したため見づらく申し訳ありません。

【コピペで簡単】TOPへ戻るボタンを設置する

そこで、今回は「TOPへ戻る」ボタンの設置方法をご紹介します。

【この記事を読むメリット】

TOPへ戻るボタンが設置できる
サイト閲覧者の利便性を上げることができる

HTMLとCSSがわかると、デザインだけではなく機能も増やせるようになります。

それでは今回のコンテンツです。

【コピペで簡単】TOPへ戻るボタンを設置する
- 設置はコピペだけでできる
  - １．HTMLを編集する
  - ２．CSSを編集する
- HTMLとCSSを知れば何でもできる

設置はコピペだけでできる

今回はコピペシリーズです。

手順をご紹介しますので、そのまま進めていただければTOPへ戻るボタンが表示されるようになります！

HTMLを編集する
CSSを編集する

１．HTMLを編集する

下記のとおりにHTMLコードを編集します。

デザイン設定画面の「カスタマイズ」から「記事」をクリック。

【コピペで簡単】TOPへ戻るボタンを設置する

記事下の入力エリアを編集します。

【コピペで簡単】TOPへ戻るボタンを設置する

入力モードになりますので、下記のコードをコピぺしてください。

コピペはコピーアンドペーストの略です。

<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i>TOP</a></p>

ボタンはアイコンだけでよい、という方は赤字のTOPは削除してしまってください。

【コピペで簡単】TOPへ戻るボタンを設置する

これでHTMLの編集は完了です。

編集エリア以外の場所をクリックするとエディターが閉じます。

HTMLは１行追加するだけ。あとはCSS。

２．CSSを編集する

HTML編集が終わったあとは、そのまま下記のコードをCSSにコピペします。

CSSの編集が初めての方はこちらの記事をご参照ください。

www.blog.biz-thinking-k.com

#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
}

@media screen and (max-width: 480px) {
#pageTop {
position: fixed;
bottom: 5px;
right: 0px;
}
}

#pageTop i {
padding-top: 6px
}

#pageTop a {
display: block;
z-index: 999;
padding: 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color: #9FD6D2;
color: #5f9ea0;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}