MENU

【無料】アメブロ可愛い囲み枠12色|上品ハートデザインコピペで簡単!

アメブロ可愛い囲み枠を女性向けにゴールドのハートをひとつ付けたハートデザインの囲み枠をつくりました。
全部で１２色の配色を用意しています。

お好きな色を見つけてアメブロやホームページにご使用ください。

アメブロ可愛い囲み枠│上品ハートデザイン12色

くすみピンク

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-dusky-pink {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #fcf6f6;
    border: 1px solid #f3e2e2;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3e3e;
    box-shadow: 0 4px 15px rgba(194, 133, 133, 0.08);
  }
  .kr-box-dusky-pink .kr-title-dusky-pink {
    font-size: 1.05em;
    font-weight: 700;
    color: #c28585;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-dusky-pink .kr-title-dusky-pink::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-dusky-pink p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-dusky-pink p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-dusky-pink">
  <div class="kr-title-dusky-pink">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

モーブピンク

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-mauve-pink {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #fbf6f8;
    border: 1px solid #f1e2e8;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3c42;
    box-shadow: 0 4px 15px rgba(179, 122, 148, 0.08);
  }
  .kr-box-mauve-pink .kr-title-mauve-pink {
    font-size: 1.05em;
    font-weight: 700;
    color: #b37a94;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-mauve-pink .kr-title-mauve-pink::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-mauve-pink p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-mauve-pink p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-mauve-pink">
  <div class="kr-title-mauve-pink">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

パステルピンク

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-pastel-pink {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #fff6f8;
    border: 1px solid #fde2e8;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3e41;
    box-shadow: 0 4px 15px rgba(235, 160, 180, 0.08);
  }
  .kr-box-pastel-pink .kr-title-pastel-pink {
    font-size: 1.05em;
    font-weight: 700;
    color: #e598ab;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-pastel-pink .kr-title-pastel-pink::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-pastel-pink p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-pastel-pink p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-pastel-pink">
  <div class="kr-title-pastel-pink">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

ブルー

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-blue {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #f4f8fc;
    border: 1px solid #dbe7f5;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #38424d;
    box-shadow: 0 4px 15px rgba(100, 145, 190, 0.08);
  }
  .kr-box-blue .kr-title-blue {
    font-size: 1.05em;
    font-weight: 700;
    color: #618bb5;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-blue .kr-title-blue::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-blue p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-blue p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-blue">
  <div class="kr-title-blue">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

くすみブルー

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-dusky-blue {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #f2f6f8;
    border: 1px solid #d7e2e8;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3c444a;
    box-shadow: 0 4px 15px rgba(115, 138, 153, 0.08);
  }
  .kr-box-dusky-blue .kr-title-dusky-blue {
    font-size: 1.05em;
    font-weight: 700;
    color: #718899;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-dusky-blue .kr-title-dusky-blue::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-dusky-blue p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-dusky-blue p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-dusky-blue">
  <div class="kr-title-dusky-blue">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

ベージュ

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-beige {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #fcf9f5;
    border: 1px solid #f2e9de;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a443d;
    box-shadow: 0 4px 15px rgba(185, 156, 120, 0.08);
  }
  .kr-box-beige .kr-title-beige {
    font-size: 1.05em;
    font-weight: 700;
    color: #b89774;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-beige .kr-title-beige::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-beige p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-beige p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-beige">
  <div class="kr-title-beige">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

グレージュ

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-greige {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #f9f8f6;
    border: 1px solid #e8e5e1;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #44413e;
    box-shadow: 0 4px 15px rgba(150, 142, 133, 0.08);
  }
  .kr-box-greige .kr-title-greige {
    font-size: 1.05em;
    font-weight: 700;
    color: #968e85;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-greige .kr-title-greige::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-greige p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-greige p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-greige">
  <div class="kr-title-greige">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

テラコッタ

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-terracotta {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #fcf6f4;
    border: 1px solid #f2e2dc;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3f3c;
    box-shadow: 0 4px 15px rgba(194, 114, 91, 0.08);
  }
  .kr-box-terracotta .kr-title-terracotta {
    font-size: 1.05em;
    font-weight: 700;
    color: #c2725b;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-terracotta .kr-title-terracotta::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-terracotta p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-terracotta p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-terracotta">
  <div class="kr-title-terracotta">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

セージ

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-sage {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #f4f7f4;
    border: 1px solid #dce5dc;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b423b;
    box-shadow: 0 4px 15px rgba(118, 148, 118, 0.08);
  }
  .kr-box-sage .kr-title-sage {
    font-size: 1.05em;
    font-weight: 700;
    color: #769476;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-sage .kr-title-sage::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-sage p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-sage p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-sage">
  <div class="kr-title-sage">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

ミント

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-mint {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #f2f9f6;
    border: 1px solid #d4ebe1;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384540;
    box-shadow: 0 4px 15px rgba(92, 171, 138, 0.08);
  }
  .kr-box-mint .kr-title-mint {
    font-size: 1.05em;
    font-weight: 700;
    color: #5cab8a;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-mint .kr-title-mint::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-mint p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-mint p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-mint">
  <div class="kr-title-mint">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

ブラウン

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-brown {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #fbf8f5;
    border: 1px solid #ebdcd0;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #453b35;
    box-shadow: 0 4px 15px rgba(143, 101, 74, 0.08);
  }
  .kr-box-brown .kr-title-brown {
    font-size: 1.05em;
    font-weight: 700;
    color: #8f654a;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-brown .kr-title-brown::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-brown p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-brown p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-brown">
  <div class="kr-title-brown">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

ラベンダー

CHECK / 今月の大人プチ贅沢３つ

高いお金をかけなくてもプチ贅沢をしよう

＊お家喫茶店・お家カフェ

＊傘をさして自家製サウナ風呂

＊デジタルデトックス


COPY CODE 
<style type="text/css">
  .kr-box-lavender {
    max-width: 580px;
    margin: 30px auto;
    padding: 28px 24px;
    background-color: #f8f6fc;
    border: 1px solid #e8e2f3;
    border-radius: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423d4a;
    box-shadow: 0 4px 15px rgba(147, 126, 179, 0.08);
  }
  .kr-box-lavender .kr-title-lavender {
    font-size: 1.05em;
    font-weight: 700;
    color: #937eb3;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
  }
  .kr-box-lavender .kr-title-lavender::before {
    content: "♥";
    font-size: 0.85em;
    color: #d4af37;
  }
  .kr-box-lavender p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  .kr-box-lavender p:last-child {
    margin-bottom: 0 !important;
  }
</style>

<div class="kr-box-lavender">
  <div class="kr-title-lavender">CHECK / ここにタイトルが入ります</div>
  <p>ここに本文テキストを入力します。</p>
  <p>＊リスト1</p>
  <p>＊リスト2</p>
</div>

使い方の３ステップ

STEP 01

使いたい素材のコード（英語の枠内）をすべてコピーします。

STEP 02

アメブロの投稿画面を「HTML表示」に切り替えて、好きな場所に貼り付けます。

STEP 03

「通常表示」に戻し、枠内の文字を書き換えたら完成です♡

アメブロ囲み枠ご使用時のお願い

  • ブログやホームページにコピペして使っていただいてOKです
  • 商用利用可能です
  • 無断転載・再配布は禁止です
    • デザインの著作権は捨てていません
    （LINE公式などで自作と偽り配布することは禁止です）
  • ご使用時の報告は不要です

必要な人が周りにいたら教えてあげてください♡

まとめ ✦

アメブロ可愛い囲み枠を上品に作りたいと思って、ゴールドのハートを付けたデザインにしました。
大人可愛いデザインなので、ブログに馴染みやすく発信に使いやすいかな？と感じています。

１２色ありましたが、お気に入りの色は見つかりましたか？
どの色を選ぶか、来てほしいお客様や自分のビジネスの世界観によっても変わってきますよね。

アメブロ囲み枠を１つ設置するのでもブログにカラーが生まれますが、それだけでは世界観のほんの一部にすぎません。

ホームページという１つの媒体を持ってもっともっと世界観をお客様に体験してもらいたいという方は女性向けホームページ制作もぜひ考えてみてください。

↓　画像をタップするとサービスページに移動します。