Simplicityをちょっと改造してみた part8-2 トップへ戻るボタン編2 オリジナルのまま改良

以前に、以下のブログカードで現在このサイトでも利用しているアニメーションして出現するトップへ戻るボタンのやり方を説明しました。

これはどちらかというと、ちょっとどころか結構イジるカスタマイズだったので、もう少しライトにかつ動きがあり、また応用も効く方法を紹介してみようと思います。

Simplicityをちょっと改造してみた part8 トップへ戻るボタン編
4月の終わりに、Simplicity公式で「Simplicityでトップへ戻るボタンに画像を使用する方法」が投稿されてカスタマイザーからそれ...

どういったものかを見てもらうために、codepenにて作ってみましたので以下でそのサンプルを見てみてください。

See the Pen WordPressTheme Simplicity BacktoTop button arrange by Hidekichi (@Hidekichi) on CodePen.

これを作った経緯には、フォーラムで、「ページの終わりが右にずれる」と言うのがありまして、それ自体はサイドバーに仕込んであるウィジェットの中身の閉じタグが原因だったみたいなんですが、解決した後、該当のサイトを見に行ったら、右下にPtengineの小さなボタンと言うかバナーがでていまして、それとトップへ戻るボタンが重なっていたので、修正したほうが良いですよと言う内容のレスをしたのがまず発端でした。

あわせて、jQueryの3.0アルファ版がリリースされ、その仕様変更で「cssでdisplay:none;を仕込んである要素に、jQueryの.show()や.fadeIn()等で表示ができなくなる」と言う内容をわいひらさんにコメントした事があったのですが、変更するのが色々と大変だと言うのと、3.0がリリースされても古いバージョンも利用できるので、しばらくは古いバージョンで行くというレスをもらったのもきっかけになります。

何かしらサンプルがあると、サックリ実装できることもあるので、そこら辺を踏まえてやってみた次第です。やっちゃってみた次第です(笑)

そもそものトップへ戻るボタンのCSSを変更

トップへ戻るボタンは、以下のような構成になっています。

オリジナルのcssでは、この中のaタグに背景色をもたせたりspanの内容であるfontAwesomeの矢印に色を付けたりする仕様になっているのですが、実際の所、このaタグはどこかにリンクしているわけではなく、単純にjQueryでトップへ戻るためだけのセレクタになっているわけです。

ということは、別にリンクを操作しているわけではありませんから、必ずしもaタグが必要なわけではありません。そこで今回は以下のような構造にしました。

はい、とてもシンプルになりました。aタグが無くなったことにより、矢印の色などはspanに対して行います。CSSとしては以下のようになります。

まず、トップへ戻るボタンの位置は、#page-topのrightとbottomで決まります。右からどれぐらいの位置か、下からどれぐらいの位置かと言うことです。またその大きさは、widthとheightで決めます。今回は100pxの正方形でやってみました。
次に中身の矢印の部分ですが、spanで書いてあるため、display:blockにしてブロック要素にしています。spanはインライン要素です。親となる#page-topのポジションをrelativeにして、子要素であるspanをabsoluteにすることで、親要素の中での絶対位置を指定することができます。

spanの位置をtop、leftそれぞれ50%にします。spanをブロック要素にしたので、spanの周囲には見えない枠線があると考えます。つまりは箱の中にspanが入っているということです。top、leftが50%と言うことは、その箱の左上角が親要素の中心に来るので、そのままだと中心からやや右下に位置することになります。そのため、子要素自身の横幅と縦幅の半分をマイナスしてやれば完全にセンターに入ることになるという仕組みです。これはtranslate3dで指定しています。
translate3dはその値をx,y,zと持っており、zは奥行きなので今回は0、その他を-50%にすることで実現しています。

一部噂では、translate3dにしなくてはGPUが動作しないと言う話もありました。GPUの方がCPUよりも高速に動作するので、GPUで動作させる方がヌルヌル動くと言う恩恵はあるものの、実際どうなんだ?ってぐらいな話です。しかもtranslate3dじゃなくても普通にtranslateでもGPU使ってねぇか?なんて話も出てきて一部の人が色々と検証しているみたいですが、その結果がどうなったのかは知りません(笑)
そういうGPUがどうのというよりは、位置を変更するという手段で利用しています。

ボタン自体の色は、#page-topで、中身の矢印部分はspanにそれぞれ指定することで、色の使い分けがわかりやすくなっており、それぞれの機能を果たしているようにしてみました。

#page-topにz-indexが指定してありますが、これは何かしらと重なる時のみ必要な値で、何も重なる要素がない場合は特に必要ありませんが、ひとまず入れておけば大抵のものに重なることはないのではないかと思います。

続きまして、ゆっくり表示したり消したりする部分の説明になります。

今回は別で利用しているわけではないのでわかりやすく.showと.hideと言う名称にしましたが、他で.showなどと利用している場合は、ちょっとアイデアが必要ですけれども、名称変更するなりして機能が被らないようにするのが良いかも知れません。そのあたりのアイデアは後述します。
CSSは以下のようになります。

.showによってゆっくり表示させ、.hideでゆっくり消すというのは、transitionがやっています。今回の例では、ボタンが消えている段階で左回りに180度回転させておき、表示する際にはいわゆる通常の向きになるように回転させています。opacityがどちらも1の場合、パッと表示されてパッと消えます。←消えはしません(笑)

先ほど書いた.show、.hideのアイデアとして、機能を別のcssに分けることで汎用性を高めることもできます。

このようにcss側で設定しておき、htmlでは、

このように指定すれば、同様の機能となり、汎用性は上がるものの若干jQueryでの操作が面倒になります。場合によっては、単純に、.backtopShowなどと言う名称にして、汎用性を犠牲にする方がわかりやすいかもしれません。

jQueryで中身の矢印サイズを自動計算する

#page-topの中身であるspanでは、FontAwesomeの矢印が入っています。span自体にサイズを指定しても良いのですが、それすら面倒臭い僕としては、#page-topのサイズさえ決めれば中身は自動で計算するという方が良いのではなかろうかと言うことで、以下のようにしてあります。

どう言うことをしてあるのかと言いますと、spanの中身の矢印は、font-size:2emで計算されていました。fontAwesonの設定自体は14pxだったので、2emと言うことから28pxであろうと思ったわけです。元々のaタグには7pxのpaddingが設定してあったので、上下で14px、矢印のサイズとpaddingで42pxだろうと思ったのですが、表示的には約38px位となっており、どちらのサイズでやるか迷いましたが、ひとまず42pxを採用しました。

元々42pxだったと仮定して、その中身が2emだったと言うことから、 42px : 28px = boxsize : ?px と言う式になり、#page-topの横幅に2em(28px)をかけて、それを#page-topの横幅(42px)で割れば、同じ比率で矢印が表示されるだろうと踏んだわけです。
仮に#page-topが正方形の場合は横幅だけでよかったのですが、もしかすると、#page-topのサイズを100 x 50px(横長長方形)とかにする人がいるかも知れないと言うことで、もし横長長方形だった場合は、縦の幅から計算し、逆の場合か正方形の場合は横の幅から計算することで、#page-topの中身がはみ出すことを無くし、かつオリジナルの比率と同じようにすると言うことを実現しています。

このようにすることで、中身のspanのサイズは自動で計算されるので、利用される人は#page-topのサイズを決めるだけで良いという感じになりました。

オリジナルのスクロールして表示する部分を変更する

修正したのが上記になります。すでにcssで表示する際、消す際の処理は書いてあるので、そのclassをいつどのようにして#page-topに付けるかだけです。つまり、もしスクロールの位置が600を超えたら、#page-topに元々付けてある非表示のための.hideを消して.showを付けることで表示させ、600以下になった時は、.showを消して.hideを付けることで非表示にすると言うことをしています。

トップへ戻るボタンは画面下部に出て、かつスクロールの位置が600にならないと表示されないので、elseに入る時には必ず.showがついているだろうと言う事で処理をしています。厳密にする場合は、if( hasClass(show) ){…}などで調べる必要がありますが、まぁこれで良いのではないかと。

オリジナルでは、トップへ戻るボタンをクリックすると画面上部にアニメーションして戻るという処理をaタグ(id=”move-page-top”)に書いてあったと思いますが、aタグ自体を今回はなくしているので、#page-topがその役割を担います。これにより、ボタンのどこをクリックしてもトップに戻ることが可能になります。

オリジナルでは、$(“#page-top”).click(function(){ … })このように書かれていますが、.on()を利用することにしました。機能的には同じですが、その中身のイベントの部分(“click”)を例えばスマホなどのタッチイベントに対応させるのに.on()の方が良いのではないかという意味合いです。

PCで言えば、このイベント部分の”click”は、いわゆるマウスクリックになりますが、スマホの場合はクリックはありません。なので、本来はタッチイベントが先行するはずなのですが、その部分が”click”になっていると、あ、touchstartねって具合に翻訳するわけです。なので体感できるほどではないにせよ、若干遅れが生じます。
touchstartが良いのか、touchendが良いのかはなんともわかりませんが、例えばこのように書くことができます。

これも完璧かどうかは実機で触ってみないと何ともわかりませんが、まぁこんな感じでイケるんじゃなかろうかと。指が離れた時に処理するのであれば、touchendでイケると思います。

これまでは、$(“#page-top”).on(“click”, function(){ … })でしたが、もしタッチスタートができる場合と言う意味合いの処理をしているので、イベント名ではなく、変数がイベントの場所に入っています。しかしながら、通常のPCではタッチイベントがないので、”click”が入るわけなんですが、スマホなどの場合は、タッチスタートがわかるので、そこにはtouchstartが入ることになります。つまりは、

と言う具合でしょうか。さほど気にする箇所でもありませんが、反応速度を高めたい場合は入れておきたい処理でもあります。

さて、このようにして、ボタンを改造してみました。一度設定してしまえばそうそう変えることはない箇所かと思うんですけれどもこのようにして改造することができます。ただし、これを行うとカスタマイザーでの変更等ができなくなるかもしれないので注意が必要です。
ここまでの内容を理解してもらえたら、カスタマイザーで変更をする前に、CSSでチョチョイと変更できる…はず…たぶん。

何かの参考までに。

スポンサーリンク

シェアする

フォローする