- ワードプレス、Cocoonを使用しているブロガーさん
- 既存のトップへ戻るボタン、小さすぎると思う
- トップへ戻るボタンのカスタマイズをしたいけど、どうやるのか分からない
kikiです。
トップへ戻るボタン、設置していますか?
長い記事などを読んでいると、やっぱり便利なのがトップに戻るボタン!
ユーザビリティが上がりますよね
ただ、ワードプレスCocoonの既存のトップへ戻るボタンは、小さいと思います。
さまざまな企業のサイトでは、見たことがない小ささ。
本記事では、トップへ戻るボタンの設置とそのカスタマイズ方法を書きます。
備忘録として記録しておきます。
ご参考になれば幸いです。
【事前準備】トップへ戻るボタンの設置
簡単1クリックでできる!トップへ戻るボタンを設定していない方は、まずはここから!
Cocoon設定 > Cocoon設定 > ボタン > トップへ戻るボタンの表示
□トップへ戻るボタンの表示にチェックを入れる、たったこれだけです。
サイズを変える
外観 > テーマエディター > スタイルシート (style.css)内
スマホ画面だとタップしにくい、既存のトップへ戻るボタンを大きくできます!
/*トップへ戻るボタンのサイズ変更*/
.go-to-top-button {
width: 60px; /*横幅*/
height: 60px; /*高さ*/
}
.go-to-top-button {
font-size: 30px; /*アイコンフォントの大きさ*/
}
上のコードで、60×60pxが大きく感じれば50×50pxに変更するなど調節してみてください。
色を変える
Cocoon設定 > Cocoon設定 > ボタン > ボタン色
ここで、背景色とフォントの色を変更できます。
色に迷った時は、クリックするだけでマッチする2色を提案してしてくれるHello Colorで探してみるのもいいです。
アイコンフォントを変える
Cocoon設定 > Cocoon設定 > ボタン > ボタンのアイコンフォント/ボタン画像
トップへ戻るボタンの中の矢印を変えたいときは、別のアイコンフォントを選んでみましょう。

もしくは、自分でアイコン画像を用意してもOKです。
ICOON MONOでお気に入りの矢印画像を探してみてください。
まとめ
トップへ戻るボタンのカスタマイズ、とても簡単でした!
・サイズは、コードをコピペして変更する
・色とアイコンフォントは、Cocoon設定のボタンタブで変更する
コメント