動くボタン(ドキドキボタン)を設置する方法と注意点バインドアップ

HOME | 動くボタン(ドキドキボタン)を設置する方法と注意点バインドアップ

 

私が執筆者です。

山形県長井ネット
 色摩 正暢(50)

 

ドキドキボタン設置方法

 

画面右上の「サイト設定」→スクリプトと詳細設定→<head内>に下記を埋め込む

 
 

 

 

下記をコピーして<head内>に貼り付ける

 
 
<style>
.button-simple {
position: relative;
font-weight: bold;
padding: 5px 15px;
margin: 0px 5px;
border-radius: 30px;/*角の丸み*/
font-size: 40px;/*文字サイズ*/
background-color: #00a41a;/*背景色*/
color:#FFFF00 ;/*文字色*/
display: inline-block;
text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
a:hover .button-simple {
background-color: #006600;/*触れたときの背景色*/
color: #fff;/*触れたときの文字色*/
box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
animation-play-state: paused;
top: 3px;
}
.dokidoki {
animation: dokidoki 1.5s infinite;
}
@keyframes dokidoki {
0% {
transform: scale(1.05)
}
5% {
transform: scale(1)
}
95% {
transform: scale(1)
}
100% {
-webkit-transform: scale(1.05)
}
}
</style>

 通常の編集画面でドキドキボタンを入れたい所にパーツ一覧から「カスタムタグ」を選択

 

 

 

 下記のコードをコピーして貼り付け

 
<a href="https://bindup.jp/" target=”_blank” rel=”noopener”><span class="button-simple dokidoki">バインドアップはこちら>></span></a>
 
 
 

https://bindup.jpを自分の飛ばしたいURLに変更する。
「バインドアップはこちら」を自分の好きな文字に変更する。

サイト内ページならどのページにもブロック単位、単独でコピー出来ます。

 

ブロック単位

 

 

 

単独コピー

 
 

 

問い合わせページに貼り付けしてみます。

 

 
貼り付けされました。
 

 

注意点

 

ドキドキボタンのレイアウトはパソコンの閲覧を基準で作られています。
必ずスマホ表示で確認して大きすぎるようでしたら文字サイズ等を変更してください。

 

実際に設置するとこんな感じで動く

 

ネットショップの作り方
Bind up無料プレゼント

 
ネットショップの作り方2020【Bind up】.pdf