ペライチにドキドキ（動く）ボタンを設置する方法

(ドキドキボタン完成形はこちら)

あなたのサイトはこちら>>

「マイページ」→「ページ編集」から

「ページ情報編集」をクリック

「ページ情報編集」→「タグの埋め込み」→「headタグ内の埋め込み」

「headタグ内の埋め込み」に下記コードをコピーして貼り付けます。

「headタグ内の埋め込み」に、下記①コードをコピーして貼り付けます。

黒い枠の右上にマウスを持っていくとコピーボタンが出ます。

                
                    <style>
                     /* ①コード */
                     /* ここからドキドキボタンのcss */
                     .button-simple {
                         font-weight: bold;    /* 文字の太さ */
                         padding: 5px 15px;
                         margin: 50px 5px;
                         border-radius: 30px;/*角の丸み*/
                         font-size: 40px;/*文字サイズ*/
                         background-color: #FF0066;/*背景色*/
                         color:#FFFF ;/*文字色*/
                         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);
                     }
                     

                     
                     .button-chuou {
                       text-align: center;
                     }
                     
 
                     a:hover .button-simple {
                         background-color: #FFAD90;/*触れたときの背景色*/
                         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>

「ブロックの挿入」をクリック

「その他」→「HTML埋め込み」→「決定」

コードを貼り付けるブロックの「編集」をクリック

最初に表示されている文字を消し空白にします。

「html埋め込み」に、下記②コードをコピーして貼り付けます。

黒い枠の右上にマウスを持っていくとコピーボタンが出ます。

            
              
              <div class="button-chuou">
              <a href="https://長井ネット塾.com" target=”_blank” rel=”noopener”><span class="button-simple dokidoki">
              あなたのサイトはこちら>>
              </span></a>
              </div>