トップへ戻るボタンをカスタマイズする！【コピペでOK】～WordPress・Cocoon編～

kikiです。

トップへ戻るボタン、設置していますか？
長い記事などを読んでいると、やっぱり便利なのがトップに戻るボタン！
ユーザビリティが上がりますよね

ただ、ワードプレスCocoonの既存のトップへ戻るボタンは、小さいと思います。

さまざまな企業のサイトでは、見たことがない小ささ。

本記事では、トップへ戻るボタンの設置とそのカスタマイズ方法を書きます。
備忘録として記録しておきます。

ご参考になれば幸いです。

【事前準備】トップへ戻るボタンの設置

簡単1クリックでできる！トップへ戻るボタンを設定していない方は、まずはここから！

□トップへ戻るボタンの表示にチェックを入れる、たったこれだけです。

サイズを変える

スマホ画面だとタップしにくい、既存のトップへ戻るボタンを大きくできます！

/*トップへ戻るボタンのサイズ変更*/
.go-to-top-button {
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
}

.go-to-top-button {
  font-size: 30px; /*アイコンフォントの大きさ*/
}

上のコードで、60×60pxが大きく感じれば50×50pxに変更するなど調節してみてください。

色を変える

ここで、背景色とフォントの色を変更できます。
色に迷った時は、クリックするだけでマッチする2色を提案してしてくれるHello Colorで探してみるのもいいです。

アイコンフォントを変える

トップへ戻るボタンの中の矢印を変えたいときは、別のアイコンフォントを選んでみましょう。

もしくは、自分でアイコン画像を用意してもOKです。
ICOON MONOでお気に入りの矢印画像を探してみてください。

まとめ

トップへ戻るボタンのカスタマイズ、とても簡単でした！