はてなブログにスマートフォン用の上に戻るリンクを設置する

このブログには、「上に戻るボタン」を設置していて自分でもお気に入りなのですが、スマートフォンでブログを見るとボタンが邪魔だなーと思ったりしています。

そこで、スマートフォン用（レスポンシブデザイン）に「上に戻るリンク」を設置することにしました。

上に戻るリンク（スマートフォン用）

 

（次のコードをコピーしてデザイン→カスタマイズ→フッタに入力します）

<!-- 上に戻るリンクのHTML -->
<div id="mobile-top">
    <a tabindex="-1" onclick="$('html, body').animate({scrollTop:0}, 'slow');">▲ トップへ戻る</a>
</div>

<!-- 上に戻るリンクのCSS（スマホ用設定） -->
<style>
@media screen and (max-width:640px) {
    /* スマートフォン用の上に戻るリンク */
    #mobile-top {
        display: block;
        width: 100%; /* 背景の幅 */
        height: 40px; /* 背景の高さ */
        background: #ccc; /* 背景の色 */
        color: #000; /* 文字の色 */
        line-height: 40px; /* 文字の位置（縦中央揃え） */
        text-align: center; /* 文字の位置（横中央揃え） */
    }
    /* スマートフォン用の上に戻るリンク（マウスオーバー） */
    #mobile-top a:hover {
        text-decoration: none !important; /* リンクの下線を消す */
    }
    /* PC用の上に戻るボタンを消す */
    #move-page-top {
        display: none;
    }
}
</style>

<!-- 上に戻るリンクのCSS（PC用設定） -->
<style>
/* スマートフォン用の上に戻るリンクを消す */
#mobile-top {
    display: none;
}
</style>

上に戻るリンクのHTML「<div id="mobile-top"> ~ </div>」でリンクを表示します（onclick属性を使った「上へ戻る」スクロールなのでスクロールはスムーズです）。

上に戻るリンクのCSS（スマホ用設定）の「@media screen and (max-width:640px) { ～ }」でスマートフォン用の設定（リンクの位置や見た目を調整）をします。

参考になるブログ・Webサイト

CSS：縦中央揃えにする方法まとめ

左右中央ぞろえは margin: auto や text-align: center があるけど、 縦方向の上下中央揃えのやり方で躓く人は多いはず。私もいまだに自信が無い。 なので、まとめてみました！

ゆずどっとこむ

また、「#move-page-top { display: none; }」で（スマートフォンでブログを見るときは）PC用の「上に戻るボタン」を消します。

上に戻るリンクのCSS（PC用設定）の「#mobile-top { display: none; }」で（PCでブログを見るときは）スマートフォン用の「上に戻るリンク」を消します。

なお、上に戻るリンクのCSSをデザインCSS（デザイン→カスタマイズ→デザインCSS）に入力する場合は、<style>と</style>の記述は不要です。