どうもです！
クラフト作家が習いに来るレジュフラワー・ＵＶレジンアクセサリー教室
「P*（ピィ）ハンドメイドアクセサリー」改め

半年で教室を満席にする
ハンドメイド講師コンサルタントの三上美幸です。

関連記事：ハンドメイド講師が使うシンプル申し込みボタンの使い方！

コンサルメンバーに結構質問をもらう事の多い
申し込みボタン！

こういうやつですね！

これって、どうやってやっているんですか？
とご質問をいただきます！

ハンドメイドの方はPCが苦手なので
なかなか申し込みボタンを
設置するのが苦手…って方が多いんですよね。

私も苦手でしたもん…。

でも実は、ブログからレッスンの申し込みのしやすさ、
はたまた問い合わせのしやすさは
このボタンにかかっていたりするんです！

文字にリンクを張るよりも
申し込み率が全然変わるんですよ！

なので、レッスンの申し込みボタンや
レッスンスケジュールのページに
ボタンをつけてほしいです！！

今回は、アメブロに申し込みボタンを設置する方法を
公開しちゃおうと思います！！

画像をバナーにしてリンクを張る方法とそうじゃない方法がある！

なんと、画像をバナーのようにしてボタンとして使う方法と
（バナーとはクリックすると他のページなどにリンクされているものの事）
別の方法があるのです！

綺麗なブログでは、画像にリンクを張るってる方法を
結構とっているハンドメイド講師の方が多いのですが、
画像の加工とかが結構大変だったりするんです。

ネット上に落ちている申し込みボタンなどは
商用利用不可のものもあるので、
自分でボタンを作るのが良いのですが、
実はこのボタンを綺麗に作るのが大変。

なので、今回ご紹介するのは、画像を使わなくっても
申し込みボタンを設置できる方法をご案内しちゃいますね！！

HTMLをコピーして文字を変更するだけ！！

画像ではありません

↑このボタン、画像ではないんです！

どうなっているかというと
HTML編集で、HTMLを張り付けて、
文字をビジュアル画面
（ブログに投稿した時に見えるような画面）
からボタンに入れる文字を編集しているだけ！

とっても簡単なので、今回、いくつかサンプルを
ご紹介しますのでアメブロで、HTML表示にして
張り付けて使ってくださいね！

追記：
ボタンに入れる文字が長すぎると、
スマホからボタンを見たときに
変になってしまうので、そこだけ要注意です！！

サンプル

グリーン系

ここの文字を変更する

<span style="margin:3px; padding:15px 30px; background:#32cd32;border-radius:25px; box-shadow:3px 3px 3px #999999; font-size:12pt;"><a href="ここにURLを入れる" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;">ここの文字を変更する
</a></span>>

ここの文字を変更する

<span style="margin:3px; padding:15px 30px; background:#006400;border-radius:25px; box-shadow:3px 3px 3px #999999; font-size:12pt;"><a href="ここにURLを入れる" style="color:#ffffff; font-weight:bold; text-decoration:none; line-height:5.0;">ここの文字を変更する
</a></span>

オレンジ系

ここの文字を変更する

<span style="margin: 3px; padding: 15px 30px; background: #ffa500; border-radius: 25px; box-shadow: 3px 3px 3px #999999; font-size: 12pt;"><a style="color: #ffffff; font-weight: bold; text-decoration: none; line-height: 5.0;" href="ここにURLを入れる">ここの文字を変更する
</a></span>

ここの文字を変更する

<span style="margin: 3px; padding: 15px 30px; background: #ffd700; border-radius: 25px; box-shadow: 3px 3px 3px #999999; font-size: 12pt;"><a style="color: #ffffff; font-weight: bold; text-decoration: none; line-height: 5.0;" href="ここにURLを入れる">ここの文字を変更する
</a></span>

レッド系

ここの文字を変更する

<span style="margin: 3px; padding: 15px 30px; background: #ff0000; border-radius: 25px; box-shadow: 3px 3px 3px #999999; font-size: 12pt;"><a style="color: #ffffff; font-weight: bold; text-decoration: none; line-height: 5.0;" href="ここにURLを入れる">ここの文字を変更する
</a></span>

ここの文字を変更する

<span style="margin: 3px; padding: 15px 30px; background: crimson; border-radius: 25px; box-shadow: 3px 3px 3px #999999; font-size: 12pt;">
<a style="color: #ffffff; font-weight: bold; text-decoration: none; line-height: 5.0;" href="ここにURLを入れる">ここの文字を変更する
</a></span>

ピンク系

ここの文字を変更する

<span style="margin: 3px; padding: 15px 30px; background: #ffc0cb; border-radius: 25px; box-shadow: 3px 3px 3px #999999; font-size: 12pt;"><a style="color: #ffffff; font-weight: bold; text-decoration: none; line-height: 5.0;" href="ここにURLを入れる">ここの文字を変更する
</a></span>

ここの文字を変更する

<span style="margin: 3px; padding: 15px 30px; background: #ff69b4; border-radius: 25px; box-shadow: 3px 3px 3px #999999; font-size: 12pt;"><a style="color: #ffffff; font-weight: bold; text-decoration: none; line-height: 5.0;" href="ここにURLを入れる">ここの文字を変更する
</a></span>

まとめ

申し込みボタンは、寒色系カラーは向かず、
グリーン、オレンジ、レッドなどのカラーが向いていると
言われています！

なので、今回は申し込みボタンにふさわしいと
いわれるカラーのHTMLを用意しました！！

これで、ブログに申し込みボタンが設置できるので、
ぜひ試してみてくださいね！