ミニマリストアローンのブログ

【3分で完了】ブログでページトップに戻るボタンを設置する方法

BLOG

トップに戻るボタンを表示させたい人「ブログでページトップに戻るボタンを表示させるには、どうしたらいいんだろう?」

こういった疑問に答えていきます。

本記事の内容

  • ページトップへ戻るボタンを実装する方法

完成イメージ

完成イメージ
こんな感じのやつです。
コピペで完了するので、3分で実装できますよ( ˘ω˘ )

スポンサードサーチ

ブログでページトップへ戻るボタンを表示させる方法

下記のソースコードを使います。

HTML

<p id="page-top"><a href="#"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></p>

上記のコードを、『footer.php』</body>の上にコピペします。

CSS

#page-top {
    position: fixed;
    bottom: 5px;
    right: 15px;
    font-size: 77%;
}
#page-top a {
    background: #87CEFA;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 50px;
	font-size:15px;
}
#page-top a:hover {
    text-decoration: none;
    opacity: 0.7;
}

上記のコードを『追加CSS』にコピペしてください。

なお、background: #●●●●●●;の部分でボタンの色を変更できます。カラーコードを調べて好きな色に変更してください。

以上です。

人気記事Amazonアソシエイトに落ちる?【もしもアフィリエイトで解決します】

人気記事【2019年】ミニマリストが買ってよかった物&手放してよかった物

スポンサードサーチ