Bloggerの画面トップに瞬時に移動するアイコン

Apple, Ikea, Workspace Setup今回は、Bloggerに瞬時にブログトップまで移動できるアイコンを表示する方法を紹介してみたいと思います。
photo credit: Vince Welter



今回は、BloggerにTopまで移動するアイコンを表示する方法を紹介していきたいと思います。ほとんどが こちら の記事の引用ですが、変更部分があります。


まずは、Bloggerの管理画面にて、 テンプレート > HTML編集 を選択します。そして、以下を </head> の上に追記します。


<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>


そして、 </body> の上にいかを追記します。

<p id="back-top">
<a href="#top"><span></span></a>
</p>



次に、Bloggerの管理画面にて、 レイアウト > アドバンス > CSSの追記 を選択し、以下を追記します。

/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
right: 20px;
margin-right: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 50px;
height: 50px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(※用意した画像のURL) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover span {
opacity:0.5;
}


なお、画像は、以下のサイトにてダウンロードしアップロードするといいと思います。




また、上で指定した画像サイズにするために、画像サイズを変更します。以下のコマンドで画像サイズを変換することができます。

brew install imagemagick

convert -resize 50x50 src.png dst.png


これで、Bloggerの画面下の方にTopに戻るアイコンが表示されたと思います。

blogger_top_icon


なお、今回参考にした記事はとても分かりやすく書かれているため、分からない人は、そちらを観てもらうのが一番かと思います。