トップへ戻るボタンの設定とカスタマイズ【Cocoon】

coconトップへ戻るボタンのカスタマイズ

Cocoon設定

トップへ戻るボタンの表示方法
  • Cocoon設定
  • ボタン
  • トップへ戻るボタンを表示するにチェック
  • アイコンを選択
  • 色を選択
Cocoonの設定はとても簡単!

ボタンのカスタマイズ

背景を透明にするという極めてシンプルなカスタマイズです。

セレクタ名を調べる (参考)

カスタマイズする際にいつも困るのは『コードの名前(セレクタ名)は何なのか』を調べるところです。私流の調べ方を参考として紹介します。

スマホで調べる場合はこんなやり方も
  1. Cocoon設定 → ボタン
  2. ボタンの色を『絶対にサイト内で使ってない色』に設定
  3. ソースから②の色コードを検索
  4. ③の先頭辺りにあるセレクタ名を確認
今回は「#1f5b6d」に設定
あった! ※無料アプリ「HTML Viewer」を使用

カスタマイズコード

背景を透過(transparent)にして、サイズも少し大きくしました。

.go-to-top .go-to-top-button {
  background: transparent;
  font-size: 25pt;
}

Comment

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