絶対読みたいおすすめ漫画

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

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

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

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

「どうしてもクリックしてみたい!」
「私のブログにもMIYACHIMANのnew_ringを!」

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

 

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

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

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

MIYACHIMANボタン導入方法

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

CSSをコピペ

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

管理画面より外観テーマの編集style.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;
}

タグをコピーして使う

リンクさせたいURLを、以下のコードの#の部分に貼り付けて使います。以下をコピーして利用してください。

コード
<a  href="#" class="miyachiman" > </a>

リンクボタンからリンクを取り払う

ここで一つ、ユーザービリティを高めるポイントを解説します。

MEMO
MIYACHIMANはなんども連打クリックしたくなるボタン。そのため、リンク先ページに飛んでしまうとMIYACHIMANをクリックできなくなり、ユーザーの満足度が下がってしまいます。

このボタンはリンク先ページに飛ばさないことが最大のユーザー体験です。

そうなってくるともうAタグの必要はありませんね。ここはAをDIVに変えて、クリックしたらnew_ringが反応するだけのボタンにしましょう。
コード
<div class="miyachiman" > </div>

MIYACHIMANでクリックを加速させろ!

いかがでしたでしょうか?

あなたのブログにもMIYACHIMANを導入して、クリックを加速させましょう。

もしこの記事をシェアいただく場合は、「ちょwwwMIYACHIMANやばすぎわろたwww」とコメントを添えてください。

こんなクソ記事も用意しています
ワイが結婚式でやらかしたハプニングベスト3

コメントを残す