Simplicityでトップへ戻るボタンに画像を使用する方法

Simplicityデフォルトでは、記事をスクロールなどすると、画面右下に以下のような「トップへ戻るボタン」が表示されます。

デフォルトのトップへ戻るボタン

今回は、上記のような「トップへ戻るボタン」を以下のような画像に変更する方法を紹介します。

画像を使用したトップへ戻るボタン

今回のカスタマイズは、テーマカスタマイザーから行えるので、それほど難しくはないと思います。

主な手順

トップへ戻るボタンを画像に変更するための主な手順は以下です。

  1. 画像を用意する
  2. 画像を適切な大きさに変換する
  3. テーマカスタマイザーで画像をセットする

画像を用意する

まずは、「トップへ戻るボタン」で利用するための画像を準備します。

今回は例として、ぴよたそ飛び跳ねて喜ぶひよこを利用させていただきました。

Exif_JPEG_PICTURE

出来れば画像は、ぴよたそのような透過したものの方が綺麗に設定できるかと思います。

画像を適切な大きさに変換する

次に、画像を画像編集ソフトなどを用いて適切な大きさに変化します。

大きさは、縦横100px前後くらいがちょうど良いかと思います。

画像を適切な大きさに変換

あまり大きな画像を利用すると、そのままの大きさで表示されるので注意してください。

テーマカスタマイザーで画像をセットする

あとは、Wordpressの「外観→カスタマイズ→レイアウト(全体・リスト)」も「トップへ戻るボタンに画像を指定」から、画像をアップロードして設定します。

トップへ戻るボタンを画像にする

あとは、カスタマイザーの「保存して公開」ボタンを押せばOKです。

なお、以前のアイコンフォントでのボタン設定よりも、画像の設定が優先されます。

まとめ

画像使うと、いろいろと楽しいトップへ戻るボタンを作ることができます。

Webサイトを閲覧中に、ページ上部に戻るための「ページトップ(スクロールトップ)」ボタン。ページの機能としての重要性は低く、あまり目立たない(目立たせない)ものです。そんな中でも、おっと思わせる遊び心
そのページの先頭へ移動する要素として設置しているところも多い「ページの先頭へ」や「ページトップ」がユニークなサイトのショーケースです。

今回のカスタマイズで、上記記事にあるような、画像のボタンを、ある程度手軽に作成できるようになりました。(位置などは、スタイルシートで調節する必要はあると思います。)

Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)