Simplicityデフォルトでは、記事をスクロールなどすると、画面右下に以下のような「トップへ戻るボタン」が表示されます。
今回は、上記のような「トップへ戻るボタン」を以下のような画像に変更する方法を紹介します。
今回のカスタマイズは、テーマカスタマイザーから行えるので、それほど難しくはないと思います。
主な手順
トップへ戻るボタンを画像に変更するための主な手順は以下です。
- 画像を用意する
- 画像を適切な大きさに変換する
- テーマカスタマイザーで画像をセットする
画像を用意する
まずは、「トップへ戻るボタン」で利用するための画像を準備します。
今回は例として、ぴよたその飛び跳ねて喜ぶひよこを利用させていただきました。
出来れば画像は、ぴよたそのような透過したものの方が綺麗に設定できるかと思います。
画像を適切な大きさに変換する
次に、画像を画像編集ソフトなどを用いて適切な大きさに変化します。
大きさは、縦横100px前後くらいがちょうど良いかと思います。
あまり大きな画像を利用すると、そのままの大きさで表示されるので注意してください。
テーマカスタマイザーで画像をセットする
あとは、Wordpressの「外観→カスタマイズ→レイアウト（全体・リスト）」も「トップへ戻るボタンに画像を指定」から、画像をアップロードして設定します。
あとは、カスタマイザーの「保存して公開」ボタンを押せばOKです。
なお、以前のアイコンフォントでのボタン設定よりも、画像の設定が優先されます。
まとめ
画像使うと、いろいろと楽しいトップへ戻るボタンを作ることができます。
Webサイトを閲覧中に、ページ上部に戻るための「ページトップ(スクロールトップ)」ボタン。ページの機能としての重要性は低く、あまり目立たない(目立たせない)ものです。そんな中でも、おっと思わせる遊び心
今回のカスタマイズで、上記記事にあるような、画像のボタンを、ある程度手軽に作成できるようになりました。（位置などは、スタイルシートで調節する必要はあると思います。）
