男性のクリック率が加速するボタン”MIYACHIMAN”を実装する方法

要注意

これはクソ記事です。もちろんNoIndexです。消す可能性が高いです。

クリックが加速するボタン”MIYACHIMAN”を作成しました。

クリックが加速する新型CTAボタン「MIYACHIMAN」を作って動画とってたら、後ろ通った事務員さんに覗かれた気配がして、へんな感じになったやで!(^q^)! pic.twitter.com/u11iWhv9La

— まっさーMIYACHIMAN (@iMassa07) 2018年9月3日

自分でクリックして満足しようと思っていましたが嬉しいことに

「どうしてもクリックしてみたい！」
「私のブログにもMIYACHIMANのnew_ring（乳輪）を！」

という要望を多くいただきました。悩んだ末、なんと今回無料公開します。

全世界の人口の半数を占める「男性」という種族。私は長年彼らの本能と行動心理を研究し、ある人物との出会いにより一つの仮説にたどり着きました。

先生、おっぱいをマイクロコピーでクリックしたいです(๑╹ω╹๑ )

— みやちまん@法人アフィリマン (@masa381) 2018年9月3日

彼らはCHIKUBIをダブルクリックしたい生き物なのでは…？
これをサイト作りに生かす方法はないのか…？

すぐさま「MIYACHIMAN」の開発に着手。
2018年9月、ついにボタン化させることに成功しました。
全人口の半数がクリックしたくなる魔法のボタン、”MIYACHIMAN”の作り方を解説します。

この記事のもくじ

MIYACHIMANボタン導入方法

導入方法はとても簡単です。
WordpressにCSSを追記して、これから紹介するリンクタグを使うだけ。

CSSをコピペ

以下をコピペして、Style.cssに追記してください。

管理画面より外観→テーマの編集→style.cssを開いて修正することができます。

クリックしてCSSをコピー

コード


/*--------------------------------------
MIYACHIMAN
--------------------------------------*/
.miyachiman{
	display: inline-block;
	text-decoration: none;
	border-radius: 50%;
	width: 130px;
	height: 130px;
	padding: 15px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;transition: .3s;
	background: #fccec5;/*new-toh*/
	border: solid 38px #fcd7c5;/*new-ring*/
	box-shadow: 7px 7px 14px 0px rgba(255,255,255,0.35) inset, -7px -7px 14px 0px rgba(0, 0, 0, 0.06) inset;
}
.miyachiman:active {
    box-shadow: 3px 3px 6px 0px rgba(157, 157, 157, 0.07) inset, -2px -2px 3px 0px rgba(255, 255, 255, 0.52) inset;
}