Kindleストア売れ筋ランキング

コクーンカスタマイズ|コピペで簡単クリックを促すボタンの作り方!

まいどおおきに!おおもと(@so88qa)です

毎度おなじみの、ワードプレス無料テーマCocoon(コクーン)カスタマイズ記事でございます<(_ _)>

今回のカスタマイズはこちら⤵︎

  1. マウスをボタン上に乗せるとボタンが浮き上がり、影もそれらしい動きをする。
  2. マウスをボタン上に乗せると色が反転する。
  3. ボタンをクリックすると、ボタンが沈み込む

という動きを作ってみました!

コピペで簡単に実装できるので、気になる人は使ってくだだいね!

Contents

コピペで簡単クリックを促すボタンのコード

.shoplinkamazon a,.shoplinkkindle a ,.shoplinkrakuten a,.shoplinkrakukobo a, .shoplinkyahoo a {
	box-shadow: 0 0 15px rgba(0,0,0,.29);/*ボタンに影をつける*/
	border-radius:4px;/*ボタンの角をとる*/
}

.shoplinkamazon a{
	background-color:#ffb36b;/*アマゾンボタンの背景の色変更*/
	border:solid 2px #ffb36b;/*アマゾンボタンの枠線の色の変更*/
}

.shoplinkrakuten a{
	background-color:#ea7373;/*楽天ボタンの背景の色変更*/
	border:solid 2px #ea7373;/*楽天ボタンの枠線の色変更*/
}

.shoplinkyahoo a{
	background-color:#ff5722;/*ヤフーボタンの背景の色変更*/
	border:solid 2px #ff5722;/*ヤフーボタンの枠線の色変更*/
}

.shoplinkamazon a:hover,.shoplinkrakuten a:hover, .shoplinkyahoo a:hover{
	transform: translateY(-4px);/*ボバー時に上に動くように変更*/
	transition: .6s;/*ホバー時の動きの速度を調整*/
	box-shadow: 0 20px 25px -17px rgba(0,0,0,.29);/*ホバー時の影を変更*/
	opacity:1;/*ホバー時の透明度をなくす*/
	background-color:#fff;/*ホバー時の背景の色の変更*/
}


.shoplinkamazon a:hover{
	border:solid 2px #ffb36b;/*ホバー時のアマゾンボタンの枠線の色変更*/
	color:#ffb36b;/*ホバー時にアマゾンボタンの文字色変更*/
}

.shoplinkrakuten a:hover{
	border:solid 2px #ea7373;/*ホバー時の楽天ボタンの枠線の色変更*/
	color:#ea7373;/*ホバー時に楽天ボタンの文字色変更*/
}

.shoplinkyahoo a:hover{
	border:solid 2px #ff5722;/*ホバー時のヤフーボタンの枠線の色変更*/
	color:#ff5722;/*ホバー時にヤフーボタンの文字色変更*/
}

.shoplinkamazon a:active,.shoplinkrakuten a:active,.shoplinkyahoo a:active{
	transform: translateY(1px);/*クリック時に下に動くように変更*/
	transition: .1s;/*クリック時の動きの速度を調整*/
	color:#fff;/*クリック時の背景の色変更*/
	box-shadow: 0 0 15px rgba(0,0,0,.29);/*クリック時の影を変更*/
}

.shoplinkamazon a:active{
	background-color:#ffb36b;/*クリック時のアマゾンボタンの枠線の色変更*/
	border:solid 2px #ffb36b;/*ホバー時にアマゾンボタンの文字色変更*/
}

.shoplinkrakuten a:active{
	background-color:#ea7373;/*クリック時の楽天ボタンの枠線の色変更*/
	border:solid 2px #ea7373;/*ホバー時に楽天ボタンの文字色変更*/
}

.shoplinkyahoo a:active{
	background-color:#ff5722;/*クリック時のヤフーボタンの枠線の色変更*/
	border:solid 2px #ff5722;/*クリック時にヤフーボタンの文字色変更*/
}

コピペで簡単クリックを促すボタンのまとめ

今回のカスタマイズは

  1. マウスをボタン上に乗せるとボタンが浮き上がり、影もそれらしい動きをする。
  2. マウスをボタン上に乗せると色が反転する。
  3. ボタンをクリックすると、ボタンが沈み込む

という動きの記事でした。

簡単コピペでできるので、ワードプレス無料テーマCocoon(コクーン)を使っている人はぜひ実装してくださいね!

あわせて読みたい
物販アフィリボタンのクリック率を向上させるカスタマイズをしてみた!
物販アフィリボタンのクリック率を向上させるカスタマイズをしてみた!まいどおおきに!おおもと(@so88qa)です!みなさん、儲けてまっか?ぼくは、最近少しずつアマゾン・楽天の物販をはじめて成果が出てきています(*´∀`*)物販リンクはCoc...

コメント

コメントする

CAPTCHA

Contents
閉じる