【アメブロ向けの申し込みボタン】素材＋作り方を紹介！

アメブロでのボタンの作成・設置の手順

 

 

この記事では、アメブロ用のボタン素材と設置方法を紹介します。

 

（下記は見本なのでクリックしても飛びません）

 

アメブロ用のボタン

 

提供サービスの「申込ページ」などへ誘導するボタンですね。

 

ボタンは文字リンクよりクリックされやすいので、簡単に売上を伸ばせます。

 

 

あめっくま
 

コピペでサクッと設置しましょう！

 

 

事前に確認しておこう！

▶ アメブロのカスタマイズ方法を全部紹介！

 

 

この記事を書いた人

あめっくま

  • Amebaオンラインレッスン認定講師
  • アメブロ収益UP講座を運営
  • コンサル生300名以上が収益UPに成功

>> 提供サービスはこちら

>> あめっくまをフォロー

 

 

＼アメブロ20記事で5万PVの手法／

アメブロで資産記事を作る方法はこちら ⇒

＼ついに登場！アメトピ攻略法／

アメトピ攻略法はこちら ⇒

 

 

シンプルなボタン 

 

フラットなボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

角丸ボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

影つきボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

影つき＋角丸ボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border-radius: 30px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border-radius: 30px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border-radius: 30px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border-radius: 30px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

枠＋影つきボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #4169e1; background: #e0e7fa; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #4169e1; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #59a136; background: #d6efbe; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #59a136; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #eb6ea5; background: #fbe4ee; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #eb6ea5; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #fca60d; background: #fee8c2; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #fca60d; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

枠＋各丸＋影つきボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #4169e1; background: #e0e7fa; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #4169e1; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #59a136; background: #d6efbe; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #59a136; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #eb6ea5; background: #fbe4ee; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #eb6ea5; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 3px solid #fca60d; background: #fee8c2; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #fca60d; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

おしゃれ・かっこいいボタン 

 

立体ボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border-bottom: 5px solid #1b3fac; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border-bottom: 5px solid #447a29; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border-bottom: 5px solid #e54389; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border-bottom: 5px solid #d48702; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

立体＋各丸ボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border-bottom: 5px solid #1b3fac; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border-bottom: 5px solid #447a29; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border-bottom: 5px solid #e54389; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border-bottom: 5px solid #d48702; border-radius: 30px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

立体ボタン②

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border: 6px outset #1e46be; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border: 6px outset #4d8a2e; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border: 6px outset #e85494; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border: 6px outset #e89402; border-radius: 5px; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

かわいいボタン 

 

水玉模様のボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #4169e1; background-color: #e0e7fa; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #4169e1; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #59a136; background-color: #d6efbe; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #59a136; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #eb6ea5; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #eb6ea5; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #fca60d; background-color: #fee8c2; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #fca60d; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

水玉＋各丸ボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #4169e1; background-color: #e0e7fa; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #4169e1; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #59a136; background-color: #d6efbe; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #59a136; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #eb6ea5; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #eb6ea5; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; border: 2px solid #fca60d; background-color: #fee8c2; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-radius: 35px; box-shadow: 0 3px 5px rgba(0,0,0,.5); font-size: 1.1em; font-weight: bold; color: #fca60d; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

キルト風のボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border: 2px dashed #ffffff; border-radius: 5px; box-shadow:0px 0px 0px 5px #4169e1; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border: 2px dashed #ffffff; border-radius: 5px; box-shadow:0px 0px 0px 5px #59a136; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border: 2px dashed #ffffff; border-radius: 5px; box-shadow:0px 0px 0px 5px #eb6ea5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border: 2px dashed #ffffff; border-radius: 5px; box-shadow:0px 0px 0px 5px #fca60d; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

キルト＋各丸ボタン

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #4169e1; border: 2px dashed #ffffff; border-radius: 30px; box-shadow:0px 0px 0px 5px #4169e1; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #59a136; border: 2px dashed #ffffff; border-radius: 30px; box-shadow:0px 0px 0px 5px #59a136; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #eb6ea5; border: 2px dashed #ffffff; border-radius: 30px; box-shadow:0px 0px 0px 5px #eb6ea5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

お申し込みはこちら >
<div style="text-align: center;"><a href="リンク先URL" rel="noopener noreferrer" target="_blank" style="display: inline-block; background: #fca60d; border: 2px dashed #ffffff; border-radius: 30px; box-shadow:0px 0px 0px 5px #fca60d; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1em;">お申し込みはこちら ></a></div>
<p>&nbsp;</p>

 

 

 

アメブロでのボタンの作成・設置手順 

ボタンは下記の流れで設置します。

 

アメブロでのボタンの貼り方
  1. ボタン素材を選ぶ
  2. HTMLコードをコピー
  3. アメブロにコード貼り付け
  4. ボタンにURLを貼り付け
  5. ボタンの文字を書き替え

 

実際の操作を図解で解説しますね。

 

 

 

手順１：素材を選ぶ

最初に、この記事からボタンのデザインを選んで下さい。

 

なお、👇の記事ではさらに豊富なデザインを紹介しています。

 

素材数No.1

▶ アメブロ用の申し込みボタンをコピペで簡単作成

 

かわいくて・おしゃれなボタンが、いっぱいありますよ！

 

 

 

手順２：HTMLコードをコピー

デザインを選ぶと、下記のようにコードが表示されます。

 

ボタンのHTMLコードをコピー

 

 

グレーの部分のHTMLコードを全てコピーしましょう。

 

 

 

手順３：HTML表示に貼り付け

次にアメブロの記事作成画面を、「HTML表示」に切り替えてコードを貼り付けます。

 

ボタンのコードを貼り付け

 

 

貼り付けたら通常表示に戻して下さい。

 

ボタンのHTMLコードを貼り付け

 

 

すると、下記のようにボタンが設置されています。

 

アメブロにボタンを設置できた

 

 

 

手順４：ボタンにURLを貼り付け

次にボタンで誘導するサイトのURLを貼り付けます。

 

下記のようにボタンの中身の文字を選択した状態で、リンクマークをクリックして下さい。

 

ボタンにURLを貼り付ける

 

 

するとリンク編集用のボックスが出てくるので、誘導先ページのURLを貼り付けます。

 

ボタンにURLを貼り付けた図

 

 

「リンクを挿入する」をクリックすると、ボタンを押すと飛ぶようになりました。

 

ちなみに下記のデモボタンをクリックするとメインサイトの「アメブロメーカー」が開きます。

 

クリックしてみてね

 

このようにクリックで飛べればOKです。

 

 

 

手順５：ボタンの文字を書き替え

ボタンの中身の文章を書き替えます。

 

アメブロのボタンが完成

 

 

デフォルトでは「お申し込みはこちら」になっていますが、「お問い合わせはこちら」など自由に変えてOK。

 

記事を公開したら、クリックして目的のページに飛べるか確認しておきましょう！

 

 

カスタマイズの関連記事

▶ アメブロのカスタマイズ方法を全部紹介！オリジナルデザインで差別化できる

▶ 【アメブロのかわいい囲み枠】記事が伝わりやすくなる枠素材が多数！

▶ 【アメブロの見出し】記事が読みやすくなる素材多数！

▶ 【超便利】アメブロで使える会話風の吹き出し