”大人可愛い♡”が好きなハンドメイド作家・サロンオーナー様のためのデザイン事務所のJunkoです
記事にリンクを貼る際、
文字よりもボタンの方が見やすいですよね。
” 
お申込みはこちらをクリック ”
よりも
お申込はこちらをクリック
↑↑は見本なのでリンクは設定していません
の方がクリックしやすいと思いませんか？
ということで！！
ブログ記事にリンクボタンを設定するのは
簡単なのでご紹介します
● お申込みボタンを作ろう！
いつもブログを書く手順で
[ブログを書く]画面の下のところで
[HTML表示]に切り替えます。
リンクボタン一覧の中から
入れたいリンクボタンの
HTMLタグをコピーして貼りつけます。
通常表示に切り替えるとリンクボタンができます
● アメブロ記事のリンクボタン一覧
【四角いボタン】
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5e5; margin:3px; padding:15px 30px; background: #ffefef; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5ff; margin:3px; padding:15px 30px; background: #ffefff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #eddbff; margin:3px; padding:15px 30px; background: #f2e5ff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #dbdbff; margin:3px; padding:15px 30px; background: #eaeaff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #d6eaff; margin:3px; padding:15px 30px; background: #eaf4ff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #dbffff; margin:3px; padding:15px 30px; background: #eaffff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #d6ffea; margin:3px; padding:15px 30px; background: #eafff4; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #c6ffc6; margin:3px; padding:15px 30px; background: #dbffdb; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffffc1; margin:3px; padding:15px 30px; background: #ffffe0; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5cc; margin:3px; padding:15px 30px; background: #ffefe0; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
【角丸のボタン】
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5e5; border-radius:25px; margin:3px; padding:15px 30px; background: #ffefef; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5ff; border-radius:25px; margin:3px; padding:15px 30px; background: #ffefff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #eddbff; border-radius:25px; margin:3px; padding:15px 30px; background: #f2e5ff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #dbdbff; border-radius:25px; margin:3px; padding:15px 30px; background: #eaeaff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #d6eaff; border-radius:25px; margin:3px; padding:15px 30px; background: #eaf4ff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #dbffff; border-radius:25px; margin:3px; padding:15px 30px; background: #eaffff; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #d6ffea; border-radius:25px; margin:3px; padding:15px 30px; background: #eafff4; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #c6ffc6; border-radius:25px; margin:3px; padding:15px 30px; background: #dbffdb; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffffc1; border-radius:25px; margin:3px; padding:15px 30px; background: #ffffe0; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5cc; border-radius:25px; margin:3px; padding:15px 30px; background: #ffefe0; font-weight:bold; color:#666666; text-decoration:none;" target="_blank">お申込みはこちら</a></p>
【影付きのボタン】
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5e5; border-radius:25px; margin:3px; padding:15px 30px; background: #ffefef; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5ff; border-radius:25px; margin:3px; padding:15px 30px; background: #ffefff; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #eddbff; border-radius:25px; margin:3px; padding:15px 30px; background: #f2e5ff; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #dbdbff; border-radius:25px; margin:3px; padding:15px 30px; background: #eaeaff; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #d6eaff; border-radius:25px; margin:3px; padding:15px 30px; background: #eaf4ff; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #dbffff; border-radius:25px; margin:3px; padding:15px 30px; background: #eaffff; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #d6ffea; border-radius:25px; margin:3px; padding:15px 30px; background: #eafff4; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #c6ffc6; border-radius:25px; margin:3px; padding:15px 30px; background: #dbffdb; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffffc1; border-radius:25px; margin:3px; padding:15px 30px; background: #ffffe0; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
<p style=" text-align:center;"><a href="リンク先のアドレス" style="border:1px solid #ffe5cc; border-radius:25px; margin:3px; padding:15px 30px; background: #ffefe0; font-weight:bold; color:#666666; text-decoration:none; box-shadow:3px 3px 3px #999999;" target="_blank">お申込みはこちら</a></p>
上記のリンクボタン一覧でお配りしているタグを
そのままコピーするだけでも使えますが、
もっとあなたのブログにあったイメージで作りたい場合は
色を変えたり、形を変えたりして
自分だけのこだわりのリンクボタンを作ってみましょう
【カラー変更の参考ページ】
WEB色見本カラーコード
◆POINT◆
- リンク先のアドレスの部分は自分のリンク先のアドレスに置き換えてくださいね
- お申込みはこちらの部分はお好きな文字に変えてもOKですが、長すぎると割れてしまうので10文字程度がベター
- HTML表示しなくてもそのまま[通常表示]で貼り付けることはできますが、余計なタグが入ってしまうので、[HTML表示]で貼り付けることをオススメします。
それでは、皆さまにとって素敵な１日となりますように
最後までお読みいただきありがとうございました
旧アカウントからリニューアル♡
＼1,000人以上が受け取ってます／
SNSで世界観をつくる8つのプレゼント
↓ ↓ ↓ ↓ ↓
LINE公式
画像をクリックして登録♡
LINE画面が表示されない方は
@joujounetでID検索
(@も含めて検索してください)
Service
アメブロカスタマイズ／ライティング添削
ヘッダー／バナー／HP制作／インスタテンプレ作成
Instagramコンサル／Canva／LINEリッチメニュー
デュプロマ・テキスト・講座資料の作成
Lステップ代行構築／LINE運用アドバイス
SNSマーケティングをもとに幅広く
女性に響くデザインで
あなたらしさを叶えます♡
ハンドメイドやエステサロン
カフェ&レストラン・英語教室
アロマ・ネイル・婚活塾など
全国各地からご依頼・コンサルで一人一人
寄り添ったサポートを心がけています♡
＼３人のママでも理想の働き方を手に入れた方法✨／
＼インスタはこちら♡Follow Me✨／
LINE公式マーケティングやデザイン作りのヒントを発信♡
心ときめく食器とお花が作れるポーセラーツ＆フラワーインテリア
JouJouetteの教室ブログはこちら♡
