■【Webクリエイターボックス】(Click New Tab)
こことか、
■【Twitter、Facebookボタンなどをまとめて簡単設置｜忍者おまとめボタン】(Click New Tab)
あ、ここでもでますねｗ
こういうのです。
こういうのが！付けてみたい！って思って、設置しました。
参考にさせて頂いたのは
tips! | スムーススクロールjQuery「Animated Scroll to Top」
一定間隔下へスクロールするとページトップに誘導するアイコンが現れて、 クリックするとスーッと上へ参りまーすできるアレです。 ...
WEB,HTML,CSS,Javascriptに関連するBLOG: ページスクロール JQuery「Animated Scroll to Top」簡単設置
ブロガー（blogger）にJavaScriptを設置するには 一言多いプログラマーの独り言
ブロガー（blogger）にJavaScriptを設置する方法は、いろいろあると思いますが、外部ファイルを読み込めない場合、ソースを直接埋め込んでしまう方法がお勧めです。ソースを管理する上で、視認性が ...
主にこちらのサイトです。ありがとうございます!
さて、手順ですが、
- スクリプトの設置
- CSSの追加
- HTMLにさらに追加
こちらを参考に進めました。
スクリプトの設置
まずは、HTMLの編集で、<head> </head>の間に、以下のコードを加えます。<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>
コードは、このサイト用に変更を加えてますので、参考にさせて頂いたコードから変えている部分がありますが・・・
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>特にこのjqueryのGoogle AJAX API使用するというコード。
参考サイト(Click New Tab)では、
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>こういった記述になっているのですが、この記述ではどうもうまくいかず、bloggerだから、変更か何かよくわからないものがあったのかな？
・・・とGoogle先生に聞いたところ、変更があったがどうかはともかくとして、
■【ブロガー（blogger）にJavaScriptを設置するには 一言多いプログラマーの独り言】(Click New Tab)
こちらのサイトで紹介されていたコードで、すんなり動く事ができまして、一安心。
ただ、参考サイトの記述で、間違いはないはずなので、うまく動かない場合に＜script language...＞を試して貰えるといいかもしれません。
その他の変更箇所。
1.) アイコンの表示タイミング
if ($(this).scrollTop() > 1000)この数字の【> 1000】の部分で、下にどれくらい画面をスクロールするとアイコンが浮かび上がるのかを設定できます。参考サイトから持ってきた数字だと、ちょっとホイール回しただけでアイコンがでるので、こんなに早くは要らないかな？と、1000に変更。
1000くらいだと、わたしの環境では、ホイールを3回回すくらいでアイコンが現れます。
2.) トップに戻るスピード
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
こちらの【400】の部分は、アイコンをクリックした時に、どれくらいのスクロールスピードでトップに戻るかを設定出来ます。400は、スッっという感じ（・・CSSの追加
スクリプトの設置が終わったら、次にCSSの追加をします。 単純といえば単純なのですが、テンプレートデザイナーページの、アドバンス設定でカスタムCSSの追加画面に行きます。そこのフォームに・・・
/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
margin-left: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 52px;
height: 51px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(※用意した画像のURL) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
-webkit-transform: rotate(720deg) scale(1.2);
-moz-transform: rotate(720deg) scale(1.2);
transform: rotate(720deg) scale(1.2);
opacity:0.5;
}
このようにコードを追加するだけ。
1.) 上から説明。背景を含めた、画像の表示位置
/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
margin-left: 85%;
}
最初の【/*】で始まる文は、追加したコードを分かるようにするための説明文です。次から、【position:】がスクロールしても画面に固定するために【fixed;】に指定。
【bottom:】が、画面の下からの位置指定。【margin-left:】が左からの位置・・・これは多分%指定の方がいいかな？デスクトップサイズが変わった時の為に%がいいような気がしています。
2.) 表示テキストの設定
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
これは、「多分」矢印画像の下にテキストを表示する場合の指定箇所。うん、きっとそうだｗテキストは消してしまってますが、そういうことも出来るようです。
3.) 矢印アイコンの設定
/* arrow icon (span tag) */
#back-top span {
width: 52px;
height: 51px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(※用意した画像のURL) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
こちらでは、本体とも言える？矢印の画像を設定。閑話休題・・・。
ほかの部分は、分かると思いますが【width】【height】で横幅と縦幅。bloggerのCSS追加画面では、実際のサイト画面を参照しながらリアルタイムで変化を確認できるので、実際触ってみたほうが早いでしょうが・・・。
4.) マウスオーバー時の設定
#back-top a:hover span {
-webkit-transform: rotate(720deg) scale(1.2);
-moz-transform: rotate(720deg) scale(1.2);
transform: rotate(720deg) scale(1.2);
opacity:0.5;
}
これは、マウスオーバー時の挙動を指定しています。ちょっとやってみたくなって、マウスオーバーしたら、矢印が回転するようにしてみました。
それと、【opacity】で50％透過。
これで、マウスオーバー時がわかりやすいかな？って思います。
回転については、CSS3を利用しているので、【CSS3 回転】などでGoogle先生に聞いてみるといいと思います。こんな簡単な指定で、こんなに動くのかとびっくりしましたし、こういったところが面白さなのかな？って少し感じましたので・・・。
更にHTMLに追加
さて、最後です。最後に、HTMLの編集に戻って、</body>のすぐ上あたりに（<body></body>の間ならどこでも）
<p id="back-top">
<a href="#top"><span></span></a>
</p>
とコードを追加して終了。まぁ、どこでもOKですが、>/body<の直前くらいが目安だと思います。
動作がうまくいったか確認してみて下さい。
【<span></span>】の間に文字を書くと画像の下に文字を表示することも出来ます。
こんな感じで、少し長くなりましたが、ページトップにスクロールしながら戻るボタンの追加ができます。jqueryなどを使う時、「bloggerの場合」っていうのが別にある感じで、Wordpressや他のブログサイト用に書かれているものではうまくいかないことが多くて、検索時に【"blogger"】の一文を追加するのが癖になってきました。
あと、矢印の画像ですが、作るのに難しい事はなんにもしてないんですが、こんな画像がいいって思う希少な方がいたら、どうぞご自由に使って下さい。
ただ、わたしのアップURLへの直接リンクは遠慮して頂いて、画像をダウンロードしてからご自分のblogなどに貼り付けて使用して下さい。よろしくお願いします・ｗ・
最後に、参考にさせて頂いたサイトの方々、ありがとうございました。
CSS弄ったこと無かったけど上手くいきました、ありがとうございます。
返信削除画像url前の#eae5e3はどう云う意味でしょうか、
テキストを足す場合はどうすれば良いでしょうか？
気が向いた時にでもお答えいただければ嬉しいです。
コメントありがとうございます。
返信削除●画像URL前の#eae5e3 は画像を使わなかったりした時や、このブログで使っているもののように画像が斜めにしてある時などに、背景色を指定したい時の為のものですね。背景色の指定については、http://www.colordic.org/w/などを参考にすると、どんな色になるのか検討しやすいかと思います。
また、#eae5e3自体を消してしまって、背景は無しで、画像表示のみというのも、いいですね。結局私はそうしてます（・・；
●テキストの表示は、「更にHTMLに追加」の部分のコードを、
Back to Top
のようにすると画像の下にテキストが追加されます。
足すだけだと、おそらく横長になるので、幅を調整する場合は、「2.) 表示テキストの設定」の、#back-top a{ のクラス名のCSSで、widthを調整して頂くといいかな？
と思いますよ。
よく分からない部分があればいつでも言って下さいね！
やってみました！とってもうまくいきました★
返信削除ありがとうございました。
ライトボックスも入れてたけど、その部分が今度はうまく動作しないのでどうしたものか…。ちょっと考えます。
とにかく素敵にくるくる回るのでたのしいです。
本当に有難うございます(*´U`*)
ありがとうございます！
返信削除クルクル回すのは、初めて出来た時にちょっと嬉しくなってしまいますね。
ライトボックスが上手く動作しないとの事ですが・・・ライトボックスってどういう物だろうと気になったりしています。上手く解決できるといいですね(。・ω・。)ゞ
いつも参考にさせて頂いてます。ありがとうございます。
返信削除この上に戻るボタンも、この記事を参考にして作ってみます。
上に戻るボタンの正式な言い方が未だに分かっていませんが、
返信削除うまくいくといいですね！
どうもうまくいかないなどあれば、またコメントなり頂けると幸いです。
有難うございます。上手くいきました。
返信削除はじめまして。
返信削除すなふさんの記事を参考にさせて頂きました。
イメージ通り導入できて、とっても助かっています。
ありがとうございます！
イメージ通りに導入出来たとのお言葉。すごく嬉しいです！
返信削除ありがとうございます(。・ω・。)ゞ
嬉しいコメント、有難うございます！！
返信削除すなふ様、素敵なサイトで羨ましく拝見させていただいております。くるくる回るボタンに感動して、早速こちらのボタンを拝借ツカマツリました。...のですが、フェードインや戻るスピードなどが上手く動作していないようなのです。テストページや、プレビューでは問題なく動作します。お心当たりがありましたらご教授いただけると嬉しいです。ずっと表示されたままでもそれはそれでヨシなのですが、ちゃんと動作してくれたらもっとウレシー！気が向いたらで結構です。
返信削除アイコンになると思ってとんでもない画像を送ってしまい大変申し訳ありません。オハズカシー...。
返信削除ありがとうございます。
返信削除画像、可愛いですねｗ ここのコメントはDisqusを使用しているんですが、アイコンを自分仕様にしようと思うと、アカウント登録が必要だったと思います。少し判りづらかったかもしれませんね、すみません。
さて、本題。
設置したボタンで、フェードイン、スピードなどが動作していないということで、恐らく jqueryがうまく動いていないのだと思いましたが、確証が持てません。ので、すみませんが、ちょっとブログを探させて頂きました。
ソースを確認したところ、フェードインなどに動作に必要な
「」
という部分のコードが
「
早速のご返事、全くもって恐れ入ります。この返事を書いていて目に入るバカデカイガゾーが
返信削除とてもハズカシーです。削除できるなら葬ってやってくださると幸いです。
右と左がわからないのに、あれもこれもとやりたがるのが初心者のいけないところですね。
テストサイトで上手くいったので、それをそのまま張り付けたのですが...。それから丸一日半あの円盤と戦っております。
さて、わざわざサイトを確認くださって本当にありがとうございます。ご指導いただいた通り記述を変えてみましたが、さも当たり前というように居座っております。テストサイトでは上手くいくということは、テストサイトにはおいていない他の何かの記述が邪魔しているようなことはないのでしょうか？見当違いの質問かもしれませんけど。
人にお借りして、人に直せと言っている自分がこれまたハズカシー...。
確認させて頂きました。
返信削除書き換えて頂いたコードの、
「 」
この中で１文字抜けていて、外部ファイルの参照を一枠で済ますには、
「 」
こうしなければいけませんでした、すみません。
自分のところからコピペしたんですけどねｗ
コメントにコードを書こうとした場合、こういうことがあったりするものなのです。
さて、まとめとして、
「 」
↑ これは、
「
確認させて頂きました。
返信削除書き換えて頂いたコードの、
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"＞
この中で１文字抜けていて、外部ファイルの参照を一枠で済ますには、
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/＞
こうしなければいけませんでした、すみません。
自分のところからコピペしたんですけどねｗ
コメントにコードを書こうとした場合、こういうことがあったりするものなのです。
さて、まとめとして、
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/＞
↑ これは、
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script＞
という書き方でも大丈夫です。意味は同じになります。
そして、このすぐ下にあったはずの
＜script＞
これは、消さないであげてください。これは、書き換えて頂いた部分とは別に、挙動を直接書き込みますよ、と示す ＜script＞ ～ ＜/script＞ の冒頭なので、必要になります。
すなふ様。ホントにありがとうございます。
返信削除そのスラッシュには気が付きましたので、とりあえず修正したりしてやってみました。
思い切って一度テンプレートを別のものに変更してみたのですが残念ながら...。
こんだけ抵抗されるとなんだか不憫になってきたりもしましたので、とりあえずはそっとしておいてやろうと思います。
すなふさんがマウスオンで透過するようにしてくださっていたので文字が被ったとしても読めますし。
ワタクシも少しずつ勉強して自分のレベルが上がってくれば、また解決方法も自ずからやってくると思います。
わざわざ年末のお忙しいときに骨を折ってもらってホントに感謝しています。
たこ助がクルクル回るのがかわいらしいのでこれはこれで。
これからも色々とお力添えくださいね。
なんと・・・無理でしたか。。。
返信削除あとは、を
すなふ様。立て続けに申し訳ありません。
返信削除一応動作しなかった原因と思われるものが判明いたしましたのでご報告させていただきます。
どうやらカレンダーのガジェットと干渉しているようです。
ガジェットを一つずつ削除していったのでたぶん間違いないとは思いますが。
カレンダーをを外している現在、正常に動作しています。回避方法を模索中です。
ありがとうございました。
まずは原因判明おめでとうございます！
返信削除しかし、カレンダーですか・・・。何が干渉するか分からないものですねぇ。。
うまく両立出来るよう祈っております・ｗ・
いつも参考にさせていただいています。
返信削除ありがとうございます。
すなふさんのページが一番わかりやすいです。
数時間かけてやっと作動しました。
もしよかったら、TOPではなく、タブバーあたりに戻る方法を教えていただきたいです。
こんばんは。コメントありがとうございます！
返信削除これ、時間かかりますよね・・・私も調べながらだったので数時間格闘していた覚えがあります。
ご質問の件ですが、移動（ジャンプ）位置を変更するのは、追加したjavascriptの「back to top」あたりの変更が必要なはずですが、申し訳ないことに私も詳しく変更する部分が分かっていません。折を見て調べて見ようとは思いますが・・・。
モバイルバージョンで表示しないようにするには、「管理画面→カスタマイズ→上級者向け→CSSの追加」のCSS欄に、「.mobile #back-top{display:none!important}」と追加して頂ければ大丈夫なはずです。確か、モバイルテンプレートを「カスタム」にする必要があったと思います。
モバイル非表示の基本的なところは
http://www.sunabox.net/2012/08/Recommendations.mobile.html
にて書いていたと思いますので、よろしければ一読を・ｗ・
さっそくのお返事ありがとうございます。
返信削除CSSをいじり倒してえらいことになっております。。いつか要らないものは削除したいと思いますがなかなか言うことを聞きませんね＜CSS
PCバージョンばかり飾ってモバイルの事を考えていませんでした。
モバイルで閲覧する方が半数近くいると知ってからあわててカスタマイズしているところです。
さっそくご教授頂いたこと、実行してみました。
すなふさんのカスタマイズ関係はほぼ読み尽くしておるつもりですが・・・
!important
もダメでした・・・この!important 好きです＾＾
モバイルのカスタマイズは手こずっております。
ありがとうございましたm(_ _)m
いつもいつもお世話になってます。bloggerカスタマイズでは有用な情報元で感謝です。トップへ戻るボタン、練習させてください。画像の設定がいまいちうまく出来ませんでしたが、さらに勉強してみたいと思います。お邪魔しました。
返信削除