【配布】CSSで作るお申し込みボタン(アメブロ用)

起業ママなつみのアイコン画像起業ママなつみ

アメブロの記事から、なかなかお申し込みが入らないのですが…

ゆうこのアイコン画像ゆうこ

お申し込みフォームへのリンクは、ボタンにしてますか?

起業ママなつみのアイコン画像起業ママなつみ

いいえ、画像を作るのって難しそうで。

まだ、告知ページ(ランディングページ)をお持ちでない方だと、アメブロの告知記事からお申し込みフォームへのリンクを貼ることになりますよね。

「お申し込みはこちら」と書かれたテキストにリンクを貼っても、なかなかお申し込みが入らない、ってことありませんか?

もちろん、お申し込みが入らない理由には様々ありますが、もしかしたらお客様が申し込み先を見つけられていないという単純なことが原因かもしれません!

お申し込みフォームへのリンクは、目立つようにボタンにしましょう。それだけでお申し込み率がアップすることも少なくないんです。

ボタンは、画像で作ってもいいのですが、HTML&CSSでの作成も簡単です。

ゆうこのアイコン画像ゆうこ

コピペで使ってもらえるものを用意したので、ぜひ使ってみてください!

もくじ

お申し込みボタンの使い方

  1. 通常の編集画面で、ボタンを入れたい部分にあらかじめ目印のテキストを入れておく(例:ボタン)
  2. 下記のうち、使いたいボタンの下にある、枠内のアルファベットを<p>から</p>まで全てコピー
  3. ブログ記事編集画面で「HTML編集」を選ぶ(スマホアプリの場合は一旦「入力完了」してから右下の「HTML編集」をタップ)
  4. 先ほど入れた任意のテキスト部分の前後<p>から</p>までを選択し、コピーしたものを上書き
  5. 「リンク先URL」と書かれた部分を書き換え
  6. 通常編集画面に戻って確認

お申し込み

↓これをコピー↓

<p><a href=”リンク先URL” style=”display: block; width: 200px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; background-color: #F69896; border-radius: 25px; -webkit-transition: all 0.5s; transition: all 0.5s”>お申し込み</a></p>

お申し込みはこちら

↓これをコピー↓

<p><a href=”リンク先URL” style=”display: block; width: 250px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; background-color: #E48B63; border-radius: 25px; -webkit-transition: all 0.5s; transition: all 0.5s”>お申し込みはこちら</a></p>

お申し込みはこちらからどうぞ

↓これをコピー↓

<p><a href=”リンク先URL” style=”display: block; width: 300px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; background-color: #585EAA; border-radius: 25px; -webkit-transition: all 0.5s; transition: all 0.5s”>お申し込みはこちらからどうぞ</a></p>

お申し込み

キャプション

<p><a href=”リンク先URL” style=”display: block; width: 200px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; background-color: #A0B37D; border-radius: 10px; -webkit-transition: all 0.5s; transition: all 0.5s”>お申し込み</a></p>

お申し込みはこちら

キャプション

<p><a href=”リンク先URL” style=”display: block; width: 250px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; background-color: #B37D8F; border-radius: 10px; -webkit-transition: all 0.5s; transition: all 0.5s”>お申し込みはこちら</a></p>

お申し込みはこちらからどうぞ

キャプション

<p><a href=”リンク先URL” style=”display: block; width: 300px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; text-align: center; background-color: #E7BB5E; border-radius: 10px; -webkit-transition: all 0.5s; transition: all 0.5s”>お申し込みはこちらからどうぞ</a></p>

青字で書いた色のコードは、任意の色に変更することも可能です。

こちらのページで色を選んで、そこに書かれている「#」から始まる数字やアルファベットの組み合わせで上書きすればOKです!

よくわからないから教えてほしい!相談に乗って欲しい!という方はぜひ、LINE公式アカウントの無料相談をご利用ください。お友達登録していただければ、1対1でメッセージのやりとりができます。

友だち追加
よかったらシェアしてね!
もくじ
閉じる