2017年3月11日土曜日

Bloggerにてページの先頭に戻るボタンを設置してみた | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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以外のブログやホームページでも使用できます。


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


  • このエントリーをはてなブックマークに追加
  • list


ブログランキング・にほんブログ村へ

0 件のコメント:

コメントを投稿

Ads by A8.net