■ボタンアニメーションジェネレーター
https://btnmaker.g-design-test.xyz/
ユーザー名：admin
パスワード：g20120402
使い道
Trend-Lifeなどの記事サイトへボタンを設置する際、ボタンのアニメーションを自作できます。
使い方
赤枠の部分を調整し、好みのアニメーションを作成してください。
■画像 ※1
→記事内に貼るためのソースコードが表示されます。
ボタンを設置したい箇所に、こちらのコードを記載してください。
「■■リンク先URL■■」部分には、リンク先のページのURLを入力してください。
「■■画像ファイルURL■■」部分には、実際に使用する画像のURLを入力してください。
■スクリプト ※2
→ボタンをアニメーションさせるためのスクリプトが表示されます。
Trend-Lifeの場合、「タグの設置（＜body＞内）」欄にこちらのスクリプトを記載してください。
↓
※スクリプトは記事内に貼っても機能するとは思いますが、この部分に貼ったほうが確実です。
※LifeStyleのワードプレスでも使用できます。
ボタンを複数設置する場合
設置するボタンの数だけ、アニメーションを作る必要があります。
例として、2個めのボタンを作る場合は「ユニークNO」を「2」にしてください（※3）。
その後「画像」欄のソースコードを記事内に記載し、「スクリプト」欄に表示された「※4」部分を、既に準備したスクリプトに追加してください。
このようなイメージです。
↓
※この例の場合、3つのアニメーションボタンを作成したことになります。
「同じ動きのボタン」を複数設置する場合
「画像のソースコード（※1）」と「スクリプト（※2）」、ともに基本的にコピペで使えるのですが、若干の調整が必要です。
「同じ動きのボタン」を複数設置する場合
手順1：画像のソースコード（※1）の調整箇所
以下の通り、ボタンごとにソースコード内の数字（赤文字部分）を変更してください。
例）
■1個めのボタン
<a class="btn-animation-btn" id="btn-animation-img-1" href="■■リンク先URL■■" target="_blank"><img src="■■画像ファイルURL■■"></a>
■2個めのボタン
<a class="btn-animation-btn" id="btn-animation-img-2" href="■■リンク先URL■■" target="_blank"><img src="■■画像ファイルURL■■"></a>
■3個めのボタン
<a class="btn-animation-btn" id="btn-animation-img-3" href="■■リンク先URL■■" target="_blank"><img src="■■画像ファイルURL■■"></a>
「同じ動きのボタン」を複数設置する場合
手順2：スクリプト（※2）の調整箇所
BtnAnimateMaker.setting(○,○○,○○,～);
の一行をコピペし、以下の通り「括弧内の最初の数字」を変更してください。
例）
<script>
$(function(){
BtnAnimateMaker.setting(1,100,24,0,33,0,50,0,50);
BtnAnimateMaker.setting(2,100,24,0,33,0,50,0,50);
BtnAnimateMaker.setting(3,100,24,0,33,0,50,0,50);
//複数のボタンを設置する場合、「ユニークNO」を変更してここへ上記一文を追加してください。
BtnAnimateMaker.start();
});
</script>
以上