これだけでお問い合わせ率が3倍に？！アメブロリンクを可愛く装飾

投稿日 2021年2月17日
更新日 2021年2月20日
著者 Ambran Create
カテゴリーその他

アメブロで使える可愛いボタン集

Contents

1 アメブロで使える可愛いボタン集
2 コードの入れかた
3 画像では読み込みが遅くなるのでコードがおすすめ！

みなさんはブログでリンクを飛ばすときに何か工夫はしていますか？

よく見かけられるのが、

お問い合わせはこちら→☆

と、文字だけでリンク先を案内しているのが多いですが

ユーザー目線で
お問い合わせボタンやリンク先へのボタンはわかりやすく
してあげるとより親切♡

ということで、アメブロで使える可愛いボタン集を作ってみました♡

見た目的にもメリハリができて読みやすくなり
クリック率が大幅にアップするというメリットもありますよ！

下のコードをコピーしてアメブロに貼り付けるだけ♪
テキスト変更とリンク先設定は”通常表示”から行えます！

白抜きボタン

<p><a href="#" style="font-weight: bold;
    background-color: #91e3d8;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
    border :3px solid #39e6ce;
    color: white;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-color: #ffaded;
    border: none;
    border-radius: 4px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
    border :3px solid #fa89e1;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-color: #89d2fa;
    border: none;
    border-radius: 4px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
    border :3px solid #52b5f7;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-color: #d194ff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
    border :3px solid #bc68fc;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-color: #ff9494;
    border: none;
    border-radius: 4px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
    border :3px solid #f76868;
      color: white;
      text-align: left;">BUTTON</a></p>

型押し風ボタン

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #668ad8;/*ボタン色と同じに*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #445988;
    border-radius: 3px;/*角の丸み*/
    font-weight: bold;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);" target="_blank">BUTTON</a></p>

<p><a active="transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;" class="btn-square-raised" href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #d466d8;/*ボタン色*/
    color: #d466d8;/*ボタン色と同じに*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #884482;
    border-radius: 3px;/*角の丸み*/
    font-weight: bold;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);" target="_blank">BUTTON</a></p>

<p><a active="transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;" class="btn-square-raised" href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534f53;/*ボタン色*/
    color: #534f53;/*ボタン色と同じに*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #272327;
    border-radius: 3px;/*角の丸み*/
    font-weight: bold;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);" target="_blank">BUTTON</a></p>

<p><a active="transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;" class="btn-square-raised" href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f11717;/*ボタン色*/
    color: #f11717;/*ボタン色と同じに*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #8a1717;
    border-radius: 3px;/*角の丸み*/
    font-weight: bold;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);" target="_blank">BUTTON</a></p>

<p><a active="transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;" class="btn-square-raised" href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #eb41a4;/*ボタン色*/
    color: #eb41a4;/*ボタン色と同じに*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #931d75;
    border-radius: 3px;/*角の丸み*/
    font-weight: bold;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);" target="_blank">BUTTON</a></p>

付箋風ボタン

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #FFFFFF;
    border-left: solid 6px #ffcc00;/*左線*/
    color:#ffcc00;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);">BUTTON</a></p>

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #FFFFFF;
    border-left: solid 6px #ff00e1;/*左線*/
    color:#ff00e1;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);">BUTTON</a></p>

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #FFFFFF;
    border-left: solid 6px #62ff00;/*左線*/
    color:#62ff00;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);">BUTTON</a></p>

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #FFFFFF;
    border-left: solid 6px #789140;/*左線*/
    color:#789140;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);">BUTTON</a></p>

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #FFFFFF;
    border-left: solid 6px #bfad63;/*左線*/
    color:#bfad63;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);">BUTTON</a></p>

<p><a href="#" style="display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #FFFFFF;
    border-left: solid 6px #9c9165;/*左線*/
    color:#9c9165;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);">BUTTON</a></p>

カプセル型ボタン

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(180deg, #b8f0e8 0%, #39e6ce 100%);
    transition: .9s;
    background-color: #91e3d8;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(180deg, #709dff 0%, #b0c9ff 100%);
    transition: .9s;
    background-color: #91e3d8;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(180deg, #f7caec 0%, #f35ece 100%);
    transition: .9s;
    background-color: #91e3d8;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(180deg, #f3f31c 0%, #f588da 100%);
    transition: .9s;
    background-color: #fcfcfb;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(180deg, #ebd8fe 0%, #898bf5 100%);
    transition: .9s;
    background-color: #fcfcfb;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(90deg, #fed8d8 0%, #ff4f4f 100%);
    transition: .9s;
    background-color: #fcfcfb;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

<p><a href="#" style="font-weight: bold;
    background-image: linear-gradient(90deg, #94faa3 0%, #7aeff7 100%);
    transition: .9s;
    background-color: #fcfcfb;
    border: none;
    border-radius: 20px;
    font-size: 16px;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
      text-align: left;">BUTTON</a></p>

ラウンド型押し風ボタン

<p><a href="#" style="display: inline-block;
    text-decoration: none;
    background: #ffba78;
    color: #ffba78;
    width: 120px;
    height: 120px;
    font-size: 21px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #d29963;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.43), 1px 1px rgba(0, 0, 0, 0.49);
    transition: .4s;">BUTTON</a></p>

<p><a class="btn-circle-kirby" href="#" style="display: inline-block;
    text-decoration: none;
    color: #f9a9ae;
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    background-image: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);">BUTTON</a></p>

<p><a active="box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.32);
    background-image: linear-gradient(#fed6e3 0%, #ffcfcf 100%);" class="btn-square-raised" href="#" style="display: inline-block;
    text-decoration: none;
    color: #ee626c;
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    background-image: linear-gradient(#fed6e3 0%, #f35757 100%);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);" target="_blank">BUTTON</a></p>

コードの入れかた

アメブロのコードの入れかたです。
HTML表示にして上記でコピーしたコードを貼り付けてください。

HTML表示に切り替える

コピーしたコードを貼り付け通常表示に

ボタンをクリックして、変更を選択

リンクの挿入と、テキストの変更

画像では読み込みが遅くなるのでコードがおすすめ！

バナーやSNSのリンクは画像の方がわかりやすいですが、
リンク先すべてを画像に頼ってしまうと
画面表示の読み込みスピードが遅くなり
サイト離脱の要因になってしまいます。

お問い合わせフォームやホームページへのリンクは
是非ボタンを使ってみてくださいね！

ちなみに、どうしても多くの画像をアップするときは

画像が重い・・はサイト離脱の原因？！圧縮アプリで読み込みスピードを早める！

の記事も読んでみてくださいね♡
（エンジニアは必ず使っているおすすめのアプリ紹介です！）

それでは〜！
お読みいただきありがとうございました♪

この記事を書いた人

Ambran Create

スキル
HTML,CSS,SCSS
javascript
jQuery
php
wordpress

記事一覧

ウェブサイト