Cocoon設定
トップへ戻るボタンの表示方法
- Cocoon設定
- ボタン
- トップへ戻るボタンを表示するにチェック
- アイコンを選択
- 色を選択
Cocoonの設定はとても簡単!
ボタンのカスタマイズ
背景を透明にするという極めてシンプルなカスタマイズです。
セレクタ名を調べる (参考)
カスタマイズする際にいつも困るのは『コードの名前(セレクタ名)は何なのか』を調べるところです。私流の調べ方を参考として紹介します。
スマホで調べる場合はこんなやり方も
- Cocoon設定 → ボタン
- ボタンの色を『絶対にサイト内で使ってない色』に設定
- ソースから②の色コードを検索
- ③の先頭辺りにあるセレクタ名を確認
今回は「#1f5b6d」に設定
あった! ※無料アプリ「HTML Viewer」を使用
カスタマイズコード
背景を透過(transparent)にして、サイズも少し大きくしました。
.go-to-top .go-to-top-button {
background: transparent;
font-size: 25pt;
}
Comment