変更するにあたってjQueryのコードとCSSの値を変更していきます。
もくじ
ボタンの表示位置・戻る場所・スピードに関する記述があるところ
表題に関することは以下のjQuery部分に書かれていますが、デザインに関することは後述するCSS部分に記述されています。
まずjQueryの部分から確認していきます。
jQueryのコード
- 「テーマ」→「htmlを編集」をクリック
- ctrl+Fで検索窓を出し「Back to top button」と入力
以下の記述を変更していきます。
// Back to top button
$(function(){
$(window).scroll(function(){
$(this).scrollTop()>400?$(".simplifytotop").addClass('arlniainf')
:$(".simplifytotop").removeClass('arlniainf')}),
$(".simplifytotop").click(function(){
return $("html,body").animate({scrollTop:0},400),!1})
});
ボタンが表示される位置を変更
$(this).scrollTop()>400?$(".simplifytotop")
simplify2に設置されている「トップに戻るボタン」は、ページの上部が表示されている間は非表示で、 下にスクロールすることで初めて出現するように設定されています。
この400は画面の一番上から数えて下に400pxスクロールしたらボタンを表示するということを表しています。
ここを０に変更すると、ページを開いたときから「トップに戻るボタン」を表示させることができるようになります。
ただそうすると「右サイドバーのコンテンツ」と「トップに戻るボタン」が重なってしまうので、「右サイドバーのコンテンツ」が無くなってからボタンを表示するようにデフォルトでは400（px）と設定されているのだと思います。
右サイドバーに表示するコンテンツの量を変えた時にはチェックしておきたい所です。
なお「画面の中でどこにボタンを表示するか」ということについては後で取り上げるCSSの部分で規定されているため、ごっちゃにならないように注意してください。
戻る位置とスピードの変更
.animate({scrollTop:0},400)
この「0」は「画面の一番上に戻る」ということを表しています。
「400」は「0.4秒で戻る（移動する）」ということを表しています。
たとえばここを
scrollTop:100
画面の一番上ではなく「記事部分の特定の場所に戻したい」などという場合にはこの数字を調整しましょう。
「ボタンが押された瞬間にscrollTop:で指定した場所に移動させたい」という場合は400を0にして下さい。
.animate({scrollTop:0},0)
ただ瞬間的に移動してしまうと、ブログを読んでいる方に「どこか別のページに移動してしまったのかもしれない」と 不安にさせる要因にもなるので、移動しているのが分かる程度のスピードに設定しておくのがいいのかもしれません。単位はミリ秒です。
背景色・ボタンの設置場所などが記述されているところ
CSSのコード
- 「テーマ」→「htmlを編集」をクリック
- 検索窓に「/* To top */」と入力
以下の記述を変更していきます。
.simplifytotop{
visibility:hidden;
z-index:2;
background:#95a5a6;
color:#fff;
font-size:20px;
width:37px;
height:37px;
line-height:37px;
text-align:center;
position:fixed;
bottom:10px;
right:10px;
border-radius:2px;
cursor:pointer;
transition:all .4s
}
.simplifytotop:hover{
background:#7f8c8d;
color:#fff;
}
ボタンの大きさを変える
ボタンのデザインは外枠と矢印部分の２つで構成されており、以下でその大きさを変更することができます。
width:37px;
height:37px;
line-height:37px;
font-size:20px;
width:37px;height:37px;しかしこの数値を変更しても枠内にある矢印の上下位置は変わらないため、結果として矢印の位置が変化してしまいます。
矢印を中央に配置するには
line-heightheight枠の中の矢印の大きさは
font-size:20px;ボタンの設置場所を変える
bottom:10px;
right:10px;
bottomは画面一番下からの位置、rightは画面一番右からの位置を表しています。
rightをleftに変更すると画面左からの位置に変更できます。
ボタンの枠の角を丸くする
border-radius:2px;
この数値を大きくすると枠の角が取れて丸みのあるデザインになります。
マウスのアイコンがボタンに載ったときにデザインが変化する時間を変える
transition:all .4s
この「4」という数値を大きくするとデザインが緩やかに変化し、小さくすれば瞬時に変化します。
マウスのポインターがボタンに載っている間のデザインは以下で指定します。
.simplifytotop:hover{
background:#7f8c8d;
color:#fff;
}
変更例
他の色とのバランスが悪いのでいずれ変更しますがご参考までに。
.simplifytotop {
background: pink;
color: red;
font-size: 50px;
width: 70px;
height: 70px;
line-height: 70px;
left: 10px;
border-radius: 38px;
cursor: pointer;
transition: all .1s;
}
.simplifytotop:hover {
background: red;
color: pink;
}
0 件のコメント:
コメントを投稿