Cocoon設定
トップへ戻るボタンの表示方法
- Cocoon設定
- ボタン
- トップへ戻るボタンを表示するにチェック
- アイコンを選択
- 色を選択
Cocoonの設定はとても簡単!
![](https://unity-right.com/wp-content/uploads/2020/12/5AE32CE1-26E4-4232-ADED-4CB94B09FAD3-500x497.jpeg)
ボタンのカスタマイズ
背景を透明にするという極めてシンプルなカスタマイズです。
セレクタ名を調べる (参考)
カスタマイズする際にいつも困るのは『コードの名前(セレクタ名)は何なのか』を調べるところです。私流の調べ方を参考として紹介します。
スマホで調べる場合はこんなやり方も
- Cocoon設定 → ボタン
- ボタンの色を『絶対にサイト内で使ってない色』に設定
- ソースから②の色コードを検索
- ③の先頭辺りにあるセレクタ名を確認
今回は「#1f5b6d」に設定
![](https://unity-right.com/wp-content/uploads/2020/12/3219F18A-3B49-4281-9C9C-AF56B1C0C640-447x500.jpeg)
あった! ※無料アプリ「HTML Viewer」を使用
![](https://unity-right.com/wp-content/uploads/2020/12/EDDFDFC5-F28C-412C-90FB-7325C7589BD0-500x129.jpeg)
カスタマイズコード
背景を透過(transparent)にして、サイズも少し大きくしました。
.go-to-top .go-to-top-button {
background: transparent;
font-size: 25pt;
}
Comment