QooQカスタマイズ”ページトップに戻るボタン”をガジェットで追加！超簡単導入！

　スマホなどで長いサイトを読んでいるときに読んでるページの最初に戻りたいときありますよね。
　そんなとき、ページトップに戻るボタンがあると便利です。 

　Bloggerの標準テーマや無料テンプレートのQooQには、残念ながらこの機能がないんですよね。
　　ということで、今回は超簡単に導入できる”ページトップに戻るボタン”のご紹介と導入方法を具体的にわかりやすくまとめて記事にしています。

QooQカスタマイズ”ページトップに戻るボタン”をガジェットで追加！超簡単導入！

　今回はQooQに導入しますが、Bloggerの標準テーマContempo、Soho、Emporio、Notable、Essentialなどにも導入できると思いますので参考にしていただいてチャレンジしてみてはいかがでしょうか？

QooQカスタマイズとは

　QooQはくうく堂様で配布されているBloggerに使用できる外部テーマです。

　外部テーマという言い方は、正確ではなくBloggerの標準テーマ以外でテーマとして使用さできるものをテンプレートと呼ぶようです。

　テンプレートはテーマと同じくブログのウエブデザインを決めるひな形として機能します。
　導入方法が気になる方はこちらの記事をご覧ください。

　これらのテンプレートは、Blogger導入後にガジェットやすこし高度になりますが直接HTML編集からコードを変更し、好みのウエブデザインにカスタマイズすることができます。
　今回は、”ページトップに戻るボタン”をガジェットの追加だけで超簡単に導入できる情報がありましたのでご紹介します！

”ページトップに戻るボタン”とは

　さて、ページトップに戻るボタンをご存知ですか？

上記はBloggerの無料テンプレートSmartの標準機能の”ページトップに戻る”ボタンです。

　トップページにあるとき表示されず、すこしスクロースすると現れるというとってもおしゃれで機能美があります。

　これは、スマホ表示の時で、PC画面の場合は形が変わるんです！

　右下に、スマホ同様にすこしスクロールすると現れます。

　これらのアイコンをタップやクリックするとトップページに戻れるわけです。

上記はスマホの例ですが、”ページトップに戻る”で戻るか、新規に開いてページトップの位置で閲覧中では、”ページトップに戻る”アイコンは消えています。

　素晴らしいですよね。

　QooQにもほしいなぁとおもって調査すると、jQueryや highlight.js などの外部サーバーを利用しいた実装方法のご紹介記事がいくつかりました。
　それらは、HTMLやCSSなども含めてHTML編集を行うものですが、多機能で素晴らしい出来栄えなのです！

　いつか使ってみたいですね。

　QooQの細かいところはこちらの関連記事を参考にどうぞ。

　しかし、今回ご紹介するのは、ガジェット追加で行う超簡単な方法なんです！

ガジェットで追加！超簡単導入！

　さて、本題のガジェットの追加で、お手軽に”ページトップに戻るボタン”機能を追加する方法のご紹介に移ります。

ガジェットの追加

　ガジェットはBlogger管理画面→レイアウト→フッターの”ガジェットを追加”をクリック。

　ガジェットの一覧が表示されます。

　この中から”HTML/JavaScript”をクリックします。

　上図のようにコンテンツの中に以降で説明するコードをコピペします。

　タイトルには入力不要です。

　コンテンツには”ページトップに戻るボタン”のコードをコピペします。

　以下に順に説明します。

コードの準備  

私は以下のコードを使用しました。

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">
<img src="ボタン画像のURL" height="auto" width="40" /></a>

”ページトップに戻るボタン”画像の大きさは width="40"を好みの大きさに指定してください。

"ボタン画像のURL"は次項で説明します。

尚、こちらのコード情報はへたよこ＠様のサイトを参考にさせていただいています。

ページトップへ戻るボタン。ブログに設置する方法（簡単編）
いろいろなブログでよく見る ページトップへ戻るためのボタン 。 BloggerのテンプレートであるVaster2には、標準でついていなかったため設置することにしました。やはり、あるのと無いのではユーザビリティが違うと思います。今回は簡単にトップへ戻るボタンを設置できる方法を紹...
 

"ボタン画像のURL"の準備

　さて、”ページトップに戻るボタン”には画像が必要です。

　あらかじめ”ページトップに戻るボタン”の画像をパソコン等に準備してください。

　画像の自作も楽しいですが、反面、大変です。

　そこで、フリーのアイコンを配布しているサイトをご紹介します。
　とてもシンプルできれいなアイコンがありますので、利用すると楽ちんです。

上 | 検索結果: | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
 

私は、以下の画像を選びました。
画像はサイトからPCにPNG形式でダウンロードしました。

　さて、Bloggerでは、画像を直接サーバーにアップロードすることができません。
　一方で、投稿記事などに画像を挿入すると、記事用の画像としてサーバーに保管されます。

　そこで、Bloggerサーバーに画像をアップロードするために、”ページ”に作業用のページを作り利用します。
　”投稿記事”ではなく、”ページ”を利用するのは、”ページ”は用途が限られていますので、投稿数がすくなく管理しやすいからです。

　使い方は、使用する”ページ”は公開せず”下書き”のママにしておくと、画像をアップロードしたい時に、何度も使えて便利です。

Bloggerへの画像のアップロードには”ページ”を利用

　具体的に、”ページ”を作成し、画像をアップロードする手順を説明します。

　Bloggerの”ページ”は管理画面の”ページ”で作成できます。

　Blogger管理画面→ページ→新しいページ

　＋新しいページを押すことで”ページ”が作成できます。

　　この固定ページに、準備した画像を張り付けます。
　　わたしはパソコンにダウンロードしていましたので、”パソコンからアップロード”で対象のアイコンをページに挿入（アップロード）しました。

　　上図は出は、パソコンからアップロードとしていますが、このページに画像をはりつけるとBloggerのサーバーに保存されます。

　貼り付けたら、画像の上で右クリックし”画像アドレスのコピー”を選択し画像のURLを取得します。

　先ほどのコードの”ボタン画像のURL”の位置にコピペします。

　上図のようにボタン画像のURLを選択し”プレーンテキストとして貼り付ける”を選ぶと間違いがすくないと思います。

　具体的には以下のようになります（赤文字部分がコピペです）

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYhP_xeJkFcFzwliAAMQAd8KiIznxn8M79jIQd7Ryru06D_BNtezI58_AkQBVb5YAl9UkdtGCu2nGEr-99vtOAED3nTNA2q5SJx-oQYOY6Gxw8oZJ1Cow0wFS7HyyGkwXIBi9Jrr2dQ/s0/%25E4%25B8%25B8%25E6%259E%25A0%25E4%25BB%2598%25E3%2581%258D%25E4%25B8%2589%25E8%25A7%2592%25E7%259F%25A2%25E5%258D%25B0%25E3%2581%25AE%25E3%2582%25A2%25E3%2582%25A4%25E3%2582%25B3%25E3%2583%25B3%25E7%25B4%25A0%25E6%259D%2590+%25E4%25B8%258A.png" height="auto" width="40" /></a>

このコードを”ガジェットの追加”の章で説明した”コンテンツ”部分にコピペしてください。

上記の状態で保存します。

これで”ページトップに戻るボタン”が導入できました。

実際の動作をみてみましょう！

導入したブログの紹介

　上記のガジェットをQooQに導入すると次のように”ページトップに戻るボタン”が表示されます。

スマホ画面の”ページトップに戻るボタン”

PC画面の”ページトップに戻るボタン”

　上記のように”ページトップに戻るボタン”が追加されました。

まとめ

　Smartのようにデバイスの画面サイズでアイコンを切り替えたり、スクロール位置で表示、非表示するなど高機能ではありませんが、必要十分で且つ、超簡単に導入できるガジェットです。

　ポイントは

• 　コードの入手とカスタマイズ
• 　画像のアップロードにBloggerの記事に一度アップロードする。

　程度でしょうか？

　本記事の内容で特に惑うことはないかとおもいます。

　ガジェット追加でできるお手軽カスタマイズですので、挑戦してみてはいかがでしょか？

編集後記

　Smartには及ばないものの、だいぶ寄せることができたので満足です。

　その他のカスタマイズもこちらにまとめていますので参考にご覧ください。

　→Blogger用無料テンプレートQooQ導入とカスタマイズまとめ

　ほかにやり方、対処の仕方をご存知の方はコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします