イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│可愛いノート風デザイン囲み枠12種類

アメブロ可愛い囲み枠をノート風デザインで１２種類つくりました ◡̈
まるで海外の学習ノートみたいなおしゃれなノートのデザインです。

大人可愛いが大好きな女性起業家さんや女性ブロガーさんのお役に立てれば嬉しいです。
お好きな色が見つかりますように…♡

アメブロおしゃれ囲み枠│可愛いノート風デザイン囲み枠１２色

ノーマルデザイン

MEMO

海外の学習ノートのような、横罫線と左端の赤い縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #fcfcf9;
    background-image: 
      linear-gradient(to right, #f2b8c6 1px, transparent 1px),
      linear-gradient(to bottom, #e1e6eb 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #d5dce8;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3b424d;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.03);
  }
  .ruled-notebook-title {
    font-size: 15px;
    font-weight: 700;
    color: #5c6b80;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box">
  <div class="ruled-notebook-title">MEMO</div>
  <div class="ruled-notebook-text">
    ここに本文を入力してください。
  </div>
</div>

パステルピンク

MEMO

海外の学習ノートのような、横罫線と左端のピンクの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-pastelpink {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #fffafb;
    background-image: 
      linear-gradient(to right, #f8a8be 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #f2e1e6 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #ebd3da;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3b3e;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(220, 150, 170, 0.06);
  }
  .ruled-notebook-title-pastelpink {
    font-size: 15px;
    font-weight: 700;
    color: #d6708b;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-pastelpink {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-pastelpink">
  <div class="ruled-notebook-title-pastelpink">MEMO</div>
  <div class="ruled-notebook-text-pastelpink">
    ここに本文を入力してください。
  </div>
</div>

ガーリーピンク

MEMO

海外の学習ノートのような、横罫線と左端のピンクの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-girlypink {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #fff8fa;
    background-image: 
      linear-gradient(to right, #f06292 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #fce4ec 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #f8bbd0;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3038;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(240, 98, 146, 0.08);
  }
  .ruled-notebook-title-girlypink {
    font-size: 15px;
    font-weight: 700;
    color: #e91e63;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-girlypink {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-girlypink">
  <div class="ruled-notebook-title-girlypink">MEMO</div>
  <div class="ruled-notebook-text-girlypink">
    ここに本文を入力してください。
  </div>
</div>

ブルー

MEMO

海外の学習ノートのような、横罫線と左端のブルーの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-babyblue {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #f7fbfd;
    background-image: 
      linear-gradient(to right, #72c0e8 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #e1f0f7 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #cae3f0;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #35434d;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(114, 192, 232, 0.08);
  }
  .ruled-notebook-title-babyblue {
    font-size: 15px;
    font-weight: 700;
    color: #4396c7;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-babyblue {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-babyblue">
  <div class="ruled-notebook-title-babyblue">MEMO</div>
  <div class="ruled-notebook-text-babyblue">
    ここに本文を入力してください。
  </div>
</div>

ラベンダー

MEMO

海外の学習ノートのような、横罫線と左端のラベンダーの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-lavender {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #faf8fc;
    background-image: 
      linear-gradient(to right, #aa7bc3 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #ede5f5 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #d9cbef;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3f3647;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(170, 123, 195, 0.08);
  }
  .ruled-notebook-title-lavender {
    font-size: 15px;
    font-weight: 700;
    color: #8e57b5;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-lavender {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-lavender">
  <div class="ruled-notebook-title-lavender">MEMO</div>
  <div class="ruled-notebook-text-lavender">
    ここに本文を入力してください。
  </div>
</div>

ピスタチオ

MEMO

海外の学習ノートのような、横罫線と左端のピスタチオグリーンの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-pistachio {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #f7f9f5;
    background-image: 
      linear-gradient(to right, #88ab6e 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #e2ebd8 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #cbdbc1;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #384233;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(136, 171, 110, 0.08);
  }
  .ruled-notebook-title-pistachio {
    font-size: 15px;
    font-weight: 700;
    color: #618247;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-pistachio {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-pistachio">
  <div class="ruled-notebook-title-pistachio">MEMO</div>
  <div class="ruled-notebook-text-pistachio">
    ここに本文を入力してください。
  </div>
</div>

アイスミント

MEMO

海外の学習ノートのような、横罫線と左端のアイスミントの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-icemint {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #f4fbf9;
    background-image: 
      linear-gradient(to right, #43c6ac 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #d8f2ec 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #bee5dc;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #2b423d;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(67, 198, 172, 0.08);
  }
  .ruled-notebook-title-icemint {
    font-size: 15px;
    font-weight: 700;
    color: #20a38b;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-icemint {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-icemint">
  <div class="ruled-notebook-title-icemint">MEMO</div>
  <div class="ruled-notebook-text-icemint">
    ここに本文を入力してください。
  </div>
</div>

ブラウン

MEMO

海外の学習ノートのような、横罫線と左端のチョコレートブラウンの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-chocolate {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #fcf9f7;
    background-image: 
      linear-gradient(to right, #8c5a47 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #ebdcd5 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #d9c5bc;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #3d2f2b;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(140, 90, 71, 0.08);
  }
  .ruled-notebook-title-chocolate {
    font-size: 15px;
    font-weight: 700;
    color: #6b3e2e;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-chocolate {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-chocolate">
  <div class="ruled-notebook-title-chocolate">MEMO</div>
  <div class="ruled-notebook-text-chocolate">
    ここに本文を入力してください。
  </div>
</div>

アプリコット

MEMO

海外の学習ノートのような、横罫線と左端のアプリコットの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-apricot {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #fdfaf7;
    background-image: 
      linear-gradient(to right, #f28e5c 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #f7e4d7 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #ebd3c3;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #4a3a32;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(242, 142, 92, 0.08);
  }
  .ruled-notebook-title-apricot {
    font-size: 15px;
    font-weight: 700;
    color: #d96f38;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-apricot {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-apricot">
  <div class="ruled-notebook-title-apricot">MEMO</div>
  <div class="ruled-notebook-text-apricot">
    ここに本文を入力してください。
  </div>
</div>

ホワイト

MEMO

海外の学習ノートのような、横罫線と左端のバニラブラウンの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-vanilla {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #fdfcf7;
    background-image: 
      linear-gradient(to right, #c7b299 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #eae5d8 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #e3dcd0;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423d38;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(199, 178, 153, 0.08);
  }
  .ruled-notebook-title-vanilla {
    font-size: 15px;
    font-weight: 700;
    color: #8c7863;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-vanilla {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-vanilla">
  <div class="ruled-notebook-title-vanilla">MEMO</div>
  <div class="ruled-notebook-text-vanilla">
    ここに本文を入力してください。
  </div>
</div>

グレージュ

MEMO

海外の学習ノートのような、横罫線と左端のグレージュの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-greige {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #faf9f8;
    background-image: 
      linear-gradient(to right, #9e9389 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #e8e3df 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #ded7d0;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #423e3b;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(158, 147, 137, 0.08);
  }
  .ruled-notebook-title-greige {
    font-size: 15px;
    font-weight: 700;
    color: #7d7268;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-greige {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-greige">
  <div class="ruled-notebook-title-greige">MEMO</div>
  <div class="ruled-notebook-text-greige">
    ここに本文を入力してください。
  </div>
</div>

モーヴピンク

MEMO

海外の学習ノートのような、横罫線と左端のモーヴピンクの縦線が入ったシンプルで可愛いノート風デザインです。

COPY CODE

<style type="text/css">
  .ruled-notebook-box-mauvepink {
    max-width: 580px;
    margin: 30px auto;
    padding: 20px 20px 20px 38px;
    background-color: #faf7f8;
    background-image: 
      linear-gradient(to right, #b8869b 1.5px, transparent 1.5px),
      linear-gradient(to bottom, #eae0e5 1px, transparent 1px);
    background-size: 100% 100%, 100% 26px;
    background-position: 28px 0, 0 10px;
    border: 1.5px solid #ded0d7;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
    color: #42383d;
    box-sizing: border-box;
    box-shadow: 2px 4px 12px rgba(184, 134, 155, 0.08);
  }
  .ruled-notebook-title-mauvepink {
    font-size: 15px;
    font-weight: 700;
    color: #945f75;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .ruled-notebook-text-mauvepink {
    font-size: 14px;
    line-height: 26px;
    margin: 0;
  }
</style>

<div class="ruled-notebook-box-mauvepink">
  <div class="ruled-notebook-title-mauvepink">MEMO</div>
  <div class="ruled-notebook-text-mauvepink">
    ここに本文を入力してください。
  </div>
</div>

使い方の３ステップ

STEP 01

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

STEP 02

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

STEP 03

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

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

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

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

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

まとめ ✦

アメブロおしゃれ囲み枠、海外ノート風デザインで１２種類つくってみました♡
つくりながら、どの色も可愛いとウキウキしていました( ⁎ᵕᴗᵕ⁎ )

ちょこっとメモを残したいときやポイントを説明したいときに、ノート風囲み枠は便利です。

囲み枠だけじゃなく、もっともっと１つの媒体を持って世界観を発信していきたい♡
という女性起業家さんはルルプチのホームページ制作サービスをご覧ください

↓ 女性向けホームページ制作

イラスト素材

アメブロ囲み枠

アメブロカスタマイズ

ホームページ素材

アメブロおしゃれ囲み枠│可愛いノート風デザイン囲み枠12種類

アメブロおしゃれ囲み枠│可愛いノート風デザイン囲み枠１２色

ノーマルデザイン

パステルピンク

ガーリーピンク

ブルー

ラベンダー

ピスタチオ

アイスミント

ブラウン

アプリコット

ホワイト

グレージュ

モーヴピンク

使い方の３ステップ

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

まとめ ✦

CATEGORY