• 2015.6.9
• TCDANカスタマイズ
• コメントを書く

AN(tcd014)でページ上部へ戻るボタンをカスタマイズする方法

WordPressのテーマ、AN(tcd014)で、「ページ上部へ戻る」ボタンをカスタマイズする方法を紹介します。

デフォルトのページ上部へ戻るボタンは、PCで表示された場合もスマホで表示された場合も、サイズが少し小さくて目立ちにくいかなァと感じました。

ですので、これらのページ上部へ戻るボタンを、少し大きめの画像に替えてみました。

画像を用意してファイル名とサイズを変更する

お手軽に変更できる方法として、ページ上部へ戻るボタンの画像を用意、アップロードして、画像のファイル名と画像サイズを変更する方法があります。

変更するファイルは、style_pc.css の /* — footer — */ の部分で、#return_top がページ上部へ戻るボタンに関する記述です。

変更例

/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */
#return_top { float:right; margin:0 10px 0 0; display:block; text-indent:100%; overflow:hidden; white-space:nowrap; width:150px; height:45px; background:url(img/footer/returntop-pc.gif) no-repeat center center; }
#return_top:hover { opacity:0.6; }

私は、幅(width)150px、高さ(height)45pxの画像を用意し、margin-bottomを20pxから0に変えてフッターエリアとくっつくようにして、いろんなサイトでよく見かける形っぽくしてみました。

変更後のページ上部へ戻る

スマホのページ上部へ戻るボタンを大きくしてみる

スマホで表示される「ページ上部へ戻るボタン」は、小さなボタンでちょっと地味なので、ブラウザ幅いっぱいに表示されるぐらいの大きめのボタンに変更してみたいと思います。

スマホでの表示を変更する場合は、style_sp.css の /* — footer — */ で、#return_topの箇所を変更します。

変更後

/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */

#return_top { z-index:auto; position:static; display:block; text-indent:100%; overflow:hidden; white-space:nowrap; max-width:100%; height:auto; margin:5px; padding:0; background:url(img/footer/returntop-sp.gif) no-repeat center center; }

スマホでの「ページ上部へ戻る」ボタン

ボタンに使われている画像は、「return_top2.gif」というファイル名の小さい三角です。この三角の画像は白いので、背景に幅(width)35px、高さ(height)35pxの薄い黒色(#333333)が指定されています。

border-radiusは、この薄い黒色(#333333)の背景の角を丸くするプロパティです。一部の古いブラウザにも対応させるために、ベンダープレフィックスをつけた指定もしています。

大きめのボタンに変更すると、copyrightの隣に収まらないので、まず、本来表示される位置であるフッターエリアの上に表示されるように、positionプロパティを初期値のstaticに変更します。

staticにした場合は、bottom:7px や right:7px の移動距離は無効になりますので、削除してもかまいません。

もし、PCで表示された時のように、フッターエリアの上で、なおかつ右下に表示させたいという場合は、position:relativeにして移動距離を指定するといいです。

次に、ページ上部へ戻るボタンは、copyrightが表示されるエリアの上に重なって表示されますので、重なる順序を指定するために、z-indexプロパティが指定されています。こちらも初期値のautoに変更します。

画像の幅は、ページ上部へ戻るボタンが表示される領域いっぱいに広がるようにmax-width:100%を指定します。これで、端末の幅に合わせて画像が自動的にリサイズされますが、画像の縦横比を維持させる場合は、height:auto; にしてください。

私が用意した画像は、幅480px、高さ50pxなのですが、高さをautoにすると、幅が縮小されると同時に、高さも低くなってしまって少しブサイクになったので、高さは50pxのままになるように、height:50pxと指定しました。

幅は、ほとんどのスマホで、画面の幅いっぱいまで広がって表示されます。もし、画面の幅が481px以上の端末で表示された場合(スマホを横向きにした時やタブレットなど)は、画像の幅480pxでしか表示されません。

私は、用意した画像に、backgroundの薄い黒色(#333333)と角を丸くする指定は必要なかったので、削除しています。

marginやpaddingなどの値は、用意したボタン画像に合わせて適宜、調整してくださいね。