Cocoonでトップに戻るボタンを画像に変更する設定
『Cocoon』設定を開き『ボタン』タブをクリック。『トップへ戻るボタンを表示する』にチェックが入っている事を確認したら、下へスクロール。
『ボタン画像』にトップに戻るボタンに使いたい画像を入れてください。※URLを入れるか、選択してメディアからアップロード。
トップに戻るボタンの画像の位置を微調整・変更するCSS

デフォルト:画像:位置変更後
例)右から10px・下から20pxの位置に変更する場合
.go-to-top { right: 10px; bottom: 20px; }
トップに戻るボタンの画像を大きくするCSS
上述とおり戻るボタンの大きさは、元のトップに戻るボタンの大きさと同じです。画像を大きくしたい場合は以下CSSを追記してください。
例)横幅80pxにしたい場合
.go-to-top-button { width: 80px; /* 横幅指定 */ height: auto; /* 画像の高さpx指定でもOK! */ }
例)縦幅80pxにしたいとき
.go-to-top-button { width: auto; /* 高さに合わせてauto */ height: 80px; }
画像の最大値の変更をするCSS
背景画像の最大値は120pxまでと親テーマに指定があります。もしそれ以上の大きさにしたいときは以下のように指定してください。
例)幅130pxに指定したいとき
.go-to-top-button { width: 130px; /* 横幅指定 */ height: auto; max-width: 130px; /* 最大横幅 */ }
マウスを置いたとき画像を変更

hover前・hover
トップに戻るボタンの画像にマウスを置く:hoverしたとき、画像が2重にならないように元の戻るボタンをCSSで非表示にしカスタマイズしてます。
hover画像も自由度が高くしたいので、画像サイズを調整して作成せず(元の戻るボタンと同じサイズでなくても良い)好きな画像を表示できるようCSSの微調整するようにしています。
微調整の様子は以下記事を参考にどうぞ。
見出し2章の1:『hover画像が大きくて見切れてしまう場合の対処』
LINKCSSでTOPに戻るボタン、hover画像のみPCで表示させる超かわいい、カスタマイズ【Simplicity2】
hover画像サイズ指定CSS
hover時の画像のURLはurl()
カッコ内にいれてくださいね。
.go-to-top-button img:hover { visibility: hidden; /* onマウスしたとき、元画像を表示しない */ } .go-to-top-button:hover { background: url(ココに画像のURL) no-repeat; background-size: 85px; /* 背景画像のサイズを指定 */ padding: 0 10px 20px 0; /* 画像が表示しない場合余白:上右下左 の順番 */ }
hover画像が見切れるとき
hoverボタンが見切れた例
上記CSSのpaddingの数値を4つ入れているのは、画像が見切れたときは画像に合わせて調整できるように入れてます。
さらにpaddingの値を大きく指定すれば、以下画像のように左上にhover画像を入れる事も可能です。
お好みにあわせてにカスタマイズを楽しんでくださいね。
トップへ戻るボタンのカスタマイズ・全てのCSSをコピペする
/* * TOPに戻るボタン * ******************/ @media screen and (min-width: 769px) { .go-to-top { right: 10px; /* 右から10px */ bottom: 20px; /* 下から20px */ } .go-to-top-button { width: 80px; /* 横幅指定:120px以上にしたい場合は追記を例)max-width: 130px; */ height: auto; /* 画像の高さpx指定でもOK! */ } .go-to-top-button img:hover { visibility: hidden; /* onマウスしたとき、元画像を表示しない */ } .go-to-top-button:hover { background: url(ココに画像のURLを入れる) no-repeat; background-size: 85px; padding: 0 10px 20px 0; /* 画像が表示しない場合余白:上右下左 の順番 */ } }
hover時の画像のURLはurl()
カッコ内にいれてくださいね。
画像のパス確認方法は、以下:目次1章:1.2あたりをどうぞ。
さいごに
トップに戻るボタン画像を、好み通りに自由にカスタマイズしていただけたら!と思います。
あぁ~~、、、可愛すぎるよぉ・・・。※動きの変更は気まぐれで時々やったりします。
それでは、かうたっくでした❦
Comments