【配布】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です!

ゆうこ

いつでも投げ銭大歓迎♬

よかったらシェアしてね!

この記事を書いた人

起業ママのWebコンサルタント。
HP制作・LP制作・オンラインサポートなど、Webを通してアナタの想いをお客様へ届けるお手伝いをします。また、ペライチやSNSの講座も開催。現在、伝えたいママと学びたいママをつなぐサイト《ママ’s コネクト》を準備中。
趣味は“自分オリジナル”な海外旅行。

もくじ
閉じる