Google Blogger 回るボタンで下から上に戻るボタンを設置

ハートのボタン

最近は記事が長くなってきた気がして
自分が見ても画面を下から上に戻す操作が面倒くさいと感じてきたので 下に「TOP」ボタンを設置しました。
全然更新してない もう一つのブログに設置してたのを移植しただけですがデザインがこのブログには可愛すぎたかな~?(^^)

スポンサーリンク

回るボタンの設置方法

このブログを下へスクロールすると右下に現れる


このハートの矢

マウスオーバーするとクルッと回って
クリックで矢が飛ぶように上に戻って可愛いでしょ♪(´ω`*)

私が参考にしたのは↓のSunabox様。
私のブログにとってはバイブルのようなBloggerカスタマイズ・サイトです。(^_^)v

[blogger]下から上まで一気に飛ぼう!「ページトップに戻る」ボタンを付ける。そして回転させる・・・。 – Sunabox

難しい説明抜きで簡単に設置できる説明のみにするので
行き詰まったら上記のSunabox様のページをお読み下さい。

 ボタンを動かす「jQuery」スクリプトを設置します。

Bloggerのテンプレート → HTMLの編集 から
<head></head>の間へコードを入れます。

迷ったならHTML内を1度クリックし画面をアクティブにしてから
Ctrl + F キーを押し Searchボックスを表示させ <head> を検索

<head>は1つしかないので、
その下あたりに以下のコードをペーストして下さい。

 カスタムCSSを追加します。

テンプレートカスタマイズ から 上級者向け をクリック

カスタム CSSを追加 画面へ以下のコードをペースト。
↓の31番の()内へはご自身が使用する画像のURLを入れて下さい。

私が使用しているハートは、私が作ったものなので自由に使用して結構です。
その際は、上の「← このハートの矢」の画像をダウンロードし、ご自身のブログへアップロードすれば「Picasaウェブアルバム」へ保存されるので、そこを開いて画像URLを取得して下さい。
↓のCSSはこのハート用に動きを合わせています。
 

もし、このハートを使用される場合は変更箇所があるとすれば
4番目のbottom: 15px; の部分で高さを変えるくらいでしょうか。
5番目はボタンの横位置ですが見る人のモニターやブラウザの大きさによって変わってきます。

もし画像と一緒に「上に戻る」等のテキストも表示するなら
7番目からの#back-top a で設定します。

 「HTMLの編集」からもう一度コードを追加します。

またHTMLの編集から</body>を検索し、その上あたりへ
以下のコードをペーストします。

↑2番目の<span></span>の間へ 上に戻る などのテキストを入れるとボタンと一緒に表示することができます。


以上で設定は完了です。
ちゃんとクルッと回りましたか?(^^)

ブラウザFirefox Chrome IEの最新版では 問題なく動作しますが古いバージョンの IE では回らなかったと思います。

動作が確認できたら、次は自分のサイトにあったボタンへ変更してもいいですね。
その場合は大きさを合わせ、背景を透過した.gif.png画像にすることをお勧めします。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る