Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

Cocoonトップへ戻る(とhover)ボタン画像のCSSカスタマイズ

スポンサーリンク
スポンサーリンク

Cocoonでトップに戻るボタンを画像に変更する設定

Cocoonトップに戻るボタンの設定

『Cocoon』設定を開き『ボタン』タブをクリック。『トップへ戻るボタンを表示する』にチェックが入っている事を確認したら、下へスクロール。

設定からトップへ戻るボタン画像を指定

『ボタン画像』にトップに戻るボタンに使いたい画像を入れてください。※URLを入れるか、選択してメディアからアップロード。

トップに戻るボタンの画像の位置を微調整・変更するCSS

デフォルト:画像:位置変更後

例)右から10px・下から20pxの位置に変更する場合

.go-to-top {
	right: 10px;
	bottom: 20px;
}

トップに戻るボタンの画像を大きくするCSS

 

上述とおり戻るボタンの大きさは、元のトップに戻るボタンの大きさと同じです。画像を大きくしたい場合は以下CSSを追記してください。

幅80pxにした場合

例)横幅80pxにしたい場合

.go-to-top-button {
	width: 80px; /* 横幅指定 */
	height: auto; /* 画像の高さpx指定でもOK! */
}

例)縦幅80pxにしたいとき

.go-to-top-button {
	width: auto; /* 高さに合わせてauto */
	height: 80px;
}

画像の最大値の変更をするCSS

背景画像の最大値は120pxまでと親テーマに指定があります。もしそれ以上の大きさにしたいときは以下のように指定してください。

130pxに指定したトップへ戻るボタン

例)幅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を入れて調整した例

さらにpaddingの値を大きく指定すれば、以下画像のように左上にhover画像を入れる事も可能です。

TOPへ戻るボタン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あたりをどうぞ。

LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像のURLはどこ

さいごに

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

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

ビバ★りずむ5月末top戻るボタンの動き

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

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

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る