イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

【コピペで簡単】アメブロ可愛い囲み枠│ドット方眼デザイン12色

コピペで簡単にできるアメブロ可愛い囲み枠をドット方眼デザインでつくりました♪
１２色あって、どの色も大人可愛い色になっています。

女性起業家さんのブログやホームページの、お役に立てますように…♡

アメブロ可愛い囲み枠│ドット方眼デザイン１２色

パステルピンク

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、優しく可憐なパステルピンクの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-pastelpink {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#f7b8c8 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #f2cad3;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a3e;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(247, 184, 200, 0.08);
  }
  .dot-grid-header-pastelpink {
    font-size: 14px;
    font-weight: 700;
    color: #d66b85;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #d66b85;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-pastelpink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-pastelpink">
  <div class="dot-grid-header-pastelpink">DAILY LOG</div>
  <div class="dot-grid-text-pastelpink">
    ここに本文を入力してください。
  </div>
</div>

くすみピンク

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、上品で落ち着いたくすみピンクの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-smokypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#d1a7b1 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #d9bdc5;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423639;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(209, 167, 177, 0.08);
  }
  .dot-grid-header-smokypink {
    font-size: 14px;
    font-weight: 700;
    color: #a86b79;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #a86b79;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-smokypink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-smokypink">
  <div class="dot-grid-header-smokypink">DAILY LOG</div>
  <div class="dot-grid-text-smokypink">
    ここに本文を入力してください。
  </div>
</div>

ガーリーピンク

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、華やかで甘いガーリーピンクの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-girlypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#f78cae 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #fcaec5;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #422d35;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(247, 140, 174, 0.12);
  }
  .dot-grid-header-girlypink {
    font-size: 14px;
    font-weight: 700;
    color: #e84d7a;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #e84d7a;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-girlypink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-girlypink">
  <div class="dot-grid-header-girlypink">DAILY LOG</div>
  <div class="dot-grid-text-girlypink">
    ここに本文を入力してください。
  </div>
</div>

コーラルピンク

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、温かみのあるコーラルピンクの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-coralpink {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#f79e8d 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #f2beba;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423230;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(247, 158, 141, 0.1);
  }
  .dot-grid-header-coralpink {
    font-size: 14px;
    font-weight: 700;
    color: #e06253;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #e06253;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-coralpink {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-coralpink">
  <div class="dot-grid-header-coralpink">DAILY LOG</div>
  <div class="dot-grid-text-coralpink">
    ここに本文を入力してください。
  </div>
</div>

ブルー

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、透明感あふれるソフトブルーの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-softblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#96c2e8 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #b8d7f2;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #313d47;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(150, 194, 232, 0.1);
  }
  .dot-grid-header-softblue {
    font-size: 14px;
    font-weight: 700;
    color: #4880b3;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #4880b3;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-softblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-softblue">
  <div class="dot-grid-header-softblue">DAILY LOG</div>
  <div class="dot-grid-text-softblue">
    ここに本文を入力してください。
  </div>
</div>

くすみブルー

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、シックで知的なくすみブルーの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-smokyblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#9caebf 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #c2cfdc;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #363d45;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(156, 174, 191, 0.08);
  }
  .dot-grid-header-smokyblue {
    font-size: 14px;
    font-weight: 700;
    color: #556a7d;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #556a7d;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-smokyblue {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-smokyblue">
  <div class="dot-grid-header-smokyblue">DAILY LOG</div>
  <div class="dot-grid-text-smokyblue">
    ここに本文を入力してください。
  </div>
</div>

ラベンダー

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、可憐で上品なラベンダーの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-lavender {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#c2a5d4 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #dcc9e8;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3f3645;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(194, 165, 212, 0.1);
  }
  .dot-grid-header-lavender {
    font-size: 14px;
    font-weight: 700;
    color: #835a9e;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #835a9e;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-lavender {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-lavender">
  <div class="dot-grid-header-lavender">DAILY LOG</div>
  <div class="dot-grid-text-lavender">
    ここに本文を入力してください。
  </div>
</div>

ピスタチオ

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、爽やかで優しいピスタチオグリーンの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-pistachio {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#9db89a 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #c2d6c0;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #333d32;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(157, 184, 154, 0.08);
  }
  .dot-grid-header-pistachio {
    font-size: 14px;
    font-weight: 700;
    color: #5b7858;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #5b7858;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-pistachio {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-pistachio">
  <div class="dot-grid-header-pistachio">DAILY LOG</div>
  <div class="dot-grid-text-pistachio">
    ここに本文を入力してください。
  </div>
</div>

アプリコット

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、温かみあふれるアプリコットカラーの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-apricot {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#f0a385 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #f5cfc0;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423632;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(240, 163, 133, 0.1);
  }
  .dot-grid-header-apricot {
    font-size: 14px;
    font-weight: 700;
    color: #cc6d49;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #cc6d49;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-apricot {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-apricot">
  <div class="dot-grid-header-apricot">DAILY LOG</div>
  <div class="dot-grid-text-apricot">
    ここに本文を入力してください。
  </div>
</div>

テラコッタ

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、トレンド感あふれるテラコッタカラーの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-terracotta {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#d68a70 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #e8c2b5;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423530;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(214, 138, 112, 0.1);
  }
  .dot-grid-header-terracotta {
    font-size: 14px;
    font-weight: 700;
    color: #b55d40;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #b55d40;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-terracotta {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-terracotta">
  <div class="dot-grid-header-terracotta">DAILY LOG</div>
  <div class="dot-grid-text-terracotta">
    ここに本文を入力してください。
  </div>
</div>

チョコレートブラウン

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、シックで温かみのあるチョコレートブラウンの手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box-chocolate {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#9e7a68 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #d4c2b8;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b2c24;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(158, 122, 104, 0.08);
  }
  .dot-grid-header-chocolate {
    font-size: 14px;
    font-weight: 700;
    color: #6e4c3a;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #6e4c3a;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text-chocolate {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box-chocolate">
  <div class="dot-grid-header-chocolate">DAILY LOG</div>
  <div class="dot-grid-text-chocolate">
    ここに本文を入力してください。
  </div>
</div>

グレージュ

DAILY LOG

手帳やバレットジャーナルで人気の「ドット方眼」を背景にした、スタイリッシュな手帳風デザインです。

COPY CODE

<style type="text/css">
  .dot-grid-box {
    max-width: 580px;
    margin: 30px auto;
    padding: 22px;
    background-color: #ffffff;
    background-image: radial-gradient(#d0d5dc 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border: 1.5px solid #bcc3cc;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3a3f47;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  }
  .dot-grid-header {
    font-size: 14px;
    font-weight: 700;
    color: #576270;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #576270;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .dot-grid-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 10px 12px;
    border-radius: 8px;
  }
</style>

<div class="dot-grid-box">
  <div class="dot-grid-header">DAILY LOG</div>
  <div class="dot-grid-text">
    ここに本文を入力してください。
  </div>
</div>

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

ブログやホームページにコピペして使っていただいてOKです
商用利用可能です
無断転載・再配布は禁止です

デザインの著作権は捨てていません
（LINE公式などで自作と偽り配布することは禁止です）

ご使用時の報告は不要です

まとめ ✦

アメブロ可愛い囲み枠ドット方眼デザインで１２色つくってみましたが、気に入っていただけましたか…？♡
女性起業家さんの定番ピンクカラーだけではなく、ピスタチオやブルーなどいろんな色を取り入れてつくってみました。

囲み枠はコピペで簡単にできて世界観を表現できるツールですが、ブログではなく「ホームページ」を持つことで女性起業家さんの世界観をもっともっと表現することができます。

ルルプチではホームページに訪れた人が世界観を体験できるようなホームページ作りが得意です。
大人可愛いホームページが気になる♡という方はこちらのページをご覧ください◎

↓ 画像タップで移動します

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

【コピペで簡単】アメブロ可愛い囲み枠│ドット方眼デザイン12色

アメブロ可愛い囲み枠│ドット方眼デザイン１２色

パステルピンク

くすみピンク

ガーリーピンク

コーラルピンク

ブルー

くすみブルー

ラベンダー

ピスタチオ

アプリコット

テラコッタ

チョコレートブラウン

グレージュ

使い方の３ステップ

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

まとめ ✦

CATEGORY