前回、jQueryを使った画像をポップアップ表示させる方法をご紹介しました。ボタンを設置したいと思います。ウェブサイトでよく見かけるこれです。仕様1.スクロールしていない状態では表示されない。2.ある程度スクロールするとふわっと表示される。3.タップするとサイト上部まで滑らかに戻る。4.上部まで戻ると消える。1,3,4,に関してはこのページをご覧頂いている通りです。(どの端末でも同様)2に関しましては、ページ毎に挙動を変えてあります。TOP及び固定ページふわっと表示、ふわっと消える。固定ページ(カスタマイズ方法一覧)ブログ(news)ページ画面下からポコッと現れて、下がりながら消えます。このページの挙動です。目的ページの離脱率を下げるため。多くの情報やサービス・自身を訪問者に見て貰おうする際、より多くのページにすぐに辿り着ける様にする。ページ下部(フッター)にメニューや各項目へのリンクが無いサイトは、特に合った方が良いと思います。上記とほぼ同じ理由です。スマートフォンでは、記事が長いページを読み終えた際、上部へ戻るのに何度もスクロールさせなければなりません。戻るボタンがあれば一発で上部に戻ることが出来ます。実践編まずはボタン素材を用意しよう。こちらから頂いております。実際のページこの矢印デザインの大サイズをPNG形式でダウンロード。(Jpegだと周りの白い部分が入ってしまいます)アイコンをクリックすると色と大きさが変わりますので、好みのものを右クリックから保存します。FTPソフトで画像用のフォルダ(images)にアップします。※アップローダーからアップしても大丈夫です。画像のURLをメモしておきます。http://ratio32.msstyle.jp/images/btngr.png直接リンクは禁止します。ご自身のサーバー内に画像をおいて下さい。レイアウトテンプレートに移動します。レイアウトテンプレートに数カ所追記しますので、ソースのバックアップを必ず取ってから作業して下さい。?></div>1行目と4行目を追記しています。