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

PC
  • ワードプレス、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設定のボタンタブで変更する

コメント

タイトルとURLをコピーしました