Bloggerにてページの先頭に戻るボタンを設置してみた

ページを見ていくと先頭に戻りたいとき、わざわざスクロールしなければならないわずらわしさをなくすため、先頭に戻る用のボタンを設置してみました。

なお、モバイルページの場合、記事に画像がかぶってしまうため設置しませんでした。

ボタン用画像の用意

まずは、ボタン用の画像を用意します。

今回は、下記の画像をペイントソフト（GIMP）にて自作しました。

戻るボタン

ブログの色にあった画像を用意するとよいと思います。

画像を使わずCSSにて作成することも可能ですが今回は割愛します。

設置方法

調べてみると、jQueryを使うものと使わずできるものがありました。

今回はjQueryを使わない方法で設置しました。

下記コードを<body>～</body>の間（</body>の直前を推奨）に貼り付けます。

<b:if cond='!data:blog.isMobile'>
<a rel="nofollow" style="position:fixed;bottom:10px;right:10px;" href="#" title="Back to Top"><img src="画像のURL" /></a>
</b:if>

コードの意味としては、モバイルページでない場合、画像を右から10px、下から10pxの場所に表示させ、押すとページの先頭に戻るということです。

モバイルページでも表示させたい場合は、<b:if～>と</b:if>の部分を削除してください。

ちなみにこの方法は、Blogger以外のブログやホームページでも使用できます。

以上、参考にしていただけたら幸いです。

メニュー

2017年3月11日土曜日