こんにちは。
わしずあゆみです。
ブログを書く際にバナーを作る
ほどではないけれど
テキストのリンクよりもいい感じな
お申し込みボタンが欲しくて
(↑こういうものです)
「やさしいブログの松田さん」を参考につくりました。
松田さん、いつもありがとうございます!
▶︎お申し込みボタンが画像なしで簡単に作れます!
松田さんが紹介されていたのは角丸影付きのもので、
私はそこからアレンジしてシンプルな四角いものをつくりました。
できた嬉しい記事下に貼りたかったのです
画像じゃないので色もすぐ変えられて便利!
私も女性が使いやすそうなかわいい色味でいくつかお申し込みボタンを
以下に色サンプルをいくつか書いておきますので、
使いたい色のボタンのHTMLタグをコピーしてお使いくださいませ
(通常表示からHTML表示に切り替えて貼り付けます)
【注意点】
(松田さんのところから引用しています)
リンク先のアドレスのところは実際の
リンク先のアドレス(メールフォームなど)
に置き換えて下さい。
お申し込みはこちらからのところは
自由に変えられますが文字数が長いと割れて
しまうので10文字程度にしてください。
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #ff7fbe;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #ff99ad;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #cc9933;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #ffcc00;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #5bc184;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #a72dc1;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #d1265b;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
<div style="font-weight: bold; text-decoration: none; line-height: 5;"><a href="リンク先のアドレス" style="text-decoration: none; line-height: 5;" target="_blank"><span style="padding: 15px 30px; background-color: #a38a77;"><font color="#ffffff" size="4">お申し込みはこちらから</font></span></a></div>
活用いただけると幸いです。
お読みいただきありがとうございました
<コピペで作れるシリーズ>
【コピぺで作れる♡】アメブロのお申し込みの流れ
表現から自分の世界を広げる
デザイナー要らずの動画作成講座。
新たにリリースしました。
コツコツ気負わず
私だからできる発信を
育てていきませんか??
■専門知識もいらない
■基本無料で使える
■初心者でも大丈夫
撮影から〜投稿まで
一連の流れが可能になるように
6個のスマホ・パソコンのアプリ
合計10本の動画で紹介します。
インターネットを利用して
ご自身のペースで場所や時間を選ばず
学ぶことができます。
詳細は画像をクリックしてね
↓↓↓