ページの一番上に戻るボタンと一番下に行くボタンを設置　はてなブログテーマMinimalism

注意

この記事は旧ブログ時に書いたものです。

こんにちは！ゆきおです。
当ブログにページの一番上に戻るボタンと一番下に行くボタンを設置しました。
参考にさせていただいたブログとHTMLコード、CSSコードを紹介したいと思います。
他のブログを見ると下に行くボタンはあまり見かけませんね。

参考にさせていただいたブログ
HTMLコード
CSSコード
最後に

参考にさせていただいたブログ

タイトルにもあるようにとてもシンプルなコードで気に入りました。↓

adlife-seasons.com

HTMLコード

［ダッシュボード］＞［デザイン］＞［カスタマイズ］＞［フッタ］に貼り付けてください。（張り付ける前に必ずバックアップしておいてください。）
［フッタ］ではなく［ヘッダ］＞［ブログタイトル下］に貼り付けても問題なさそうです。（枠内クリックでコピー）↓

<p class="page_top"><a href="#top"><span class="blogicon-chevron-up lg"></span></a></p>
<p class="page_botom"><a href="#footer"><span class="blogicon-chevron-down lg"></span></a></p>

CSSコード

［ダッシュボード］＞［デザイン］＞［カスタマイズ］＞［デザインcss］に貼り付けてください。（張り付ける前に必ずバックアップしておいてください。）
@media screen～の部分からはスマホ表示のコードです。
ボタンを少し小さくしてテキストや画像と重なることを考慮して透過性を持たせています。（枠内クリックでコピー）↓

.page_top a,.page_botom a {
    text-decoration: none;
    display:block;
}

.page_top,.page_botom{
    position: fixed;
    right: 40px;
    width:40px;
    line-height:40px;
    text-align:center;
    border-radius:50%;
    border:1px solid #789DAE;
    z-index:100;
}

.page_top {
    bottom: 120px;
}

.page_botom {
    bottom: 40px;
}

@media screen and (max-width:640px){
    .page_top,.page_botom{
        position: fixed;
        font-size:10px;
        right: 15px;
        width:25px;
        line-height:25px;
        text-align:center;
        border-radius:50%;
        border:1px solid #789DAE;
        z-index:100;
        opacity:0.7;
    }

    .page_top{
        bottom: 70px;
    }
 
    .page_botom{
        bottom: 20px;
    }
}