Cocoon！トップに戻るボタンを画像にし、サイズ・hover画像を変えるコピペCSSカスタマイズ

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の微調整するようにしています。

微調整の様子は以下記事を参考にどうぞ。

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画像が見切れるとき

上記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()カッコ内にいれてくださいね。

さいごに

トップに戻るボタン画像を、好み通りに自由にカスタマイズしていただけたら！と思います。

LINKCocoonカスタマイズの記事一覧へ

あぁ～～、、、可愛すぎるよぉ・・・。※動きの変更は気まぐれで時々やったりします。

それでは、かうたっくでした❦