【公開中】アメブロ開始4ヶ月・わずか20記事でも毎月5万PVで安定する「資産記事」手法はこちら ⇒
囲み枠・ボックス・罫線

【コピペで即使える】アメブロ向け付箋の飾り枠(HTML・CSS不要)

アメブロ向けの付箋の飾り枠

この記事の特徴

重要度 3.0
難易度 2.0
備考 アメブロ記事で使える付箋風の飾り枠です。見やすいので読者に伝わりやすく、オリジナル感もあります。

この記事では、以下のようなアメブロで使える付箋風の飾り枠を紹介します。

 
付箋風飾り枠のメリット
  • 記事が読みやすくなる(離脱防止)
  • 目立つので、読者の印象に残りやすい(収益UP)
  • サイトの素人感が減る(信頼感UP)

  

くますけ
くますけ

アメブロで付箋のボックスを使うと、分かりやすくていいよね。

あめっくま
あめっくま

印象に残りやすいから、記事のポイントを伝えるのに便利だよ。

  

使い方はHTMLやCSSを知らなくてもOK・コピペして貼り付けるだけ

しかもスマホアプリで記事を見る読者にも対応

アメブロで付箋の飾り枠の作り方

デザインと色を選ぶとコードが自動で表示されます。コピーしてアメブロ記事内のHTML表示に貼りつけて下さい。

記事後半では「設置方法」も解説しているので、必要に応じて確認して下さいね。

  

あめっくま
あめっくま

「うまくいかない」など困った方は、遠慮なく記事下コメント欄から質問して下さいね。

 

この記事を書いた人
  • アメブロで毎月収益7桁を達成
  • アメブロ集客・売上UPの指導多数
  • アメブロで資産記事を作り安定した集客を実現

 

アメブロたった20記事で5万PVの手法

アメブロで資産記事を作る方法はこちら ⇒

 

アメブロ用の付箋デザイン一覧

人気のふせん風ボックスを画像を使わずに、コピペで簡単に作れます。

透明のテープ付き

ふせんをテープで貼り付けしています。テープを半透明で斜めに配置し、付箋の紙には影をつけてリアル感を出しています。

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

ふせんをテープで貼り付けしています。テープを半透明で斜めに配置し、付箋の紙には影をつけてリアル感を出しています。

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

ふせんをテープで貼り付けしています。テープを半透明で斜めに配置し、付箋の紙には影をつけてリアル感を出しています。

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

ふせんをテープで貼り付けしています。テープを半透明で斜めに配置し、付箋の紙には影をつけてリアル感を出しています。

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「ここに文章」が付箋の中身

  

マスキングテープつき

テープをピンク色のマスキングテープ風にアレンジしました。女性向けブログに使いやすいデザインとなっています。

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

テープをピンク色のマスキングテープ風にアレンジしました。女性向けブログに使いやすいデザインとなっています。

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

テープをピンク色のマスキングテープ風にアレンジしました。女性向けブログに使いやすいデザインとなっています。

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

テープをピンク色のマスキングテープ風にアレンジしました。女性向けブログに使いやすいデザインとなっています。

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「ここに文章」が付箋の中身

  

左側で貼り付けたふせん

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(60, 100%, 90%, 1), hsla(60, 100%, 90%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(0, 100%, 97%, 1), hsla(0, 100%, 97%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(211, 100%, 95%, 1), hsla(211, 100%, 95%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(120, 100%, 93%, 1), hsla(120, 100%, 93%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「ここに文章」が付箋の中身

  

  

付箋の中に箇条書きを入れる

付箋の中に箇条書きを入れることも可能です

アメブロの箇条書きは行間がつまって見づらいので、見やすく調整もしています。

  

箇条書き+透明テープ付き付箋

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

  

数字箇条書き+透明テープ付き付箋

  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

  

箇条書き+マスキングテープの付箋

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

  

数字箇条書き+マスキングテープの付箋

  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

  

箇条書き+左側で貼り付けたふせん

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(60, 100%, 90%, 1), hsla(60, 100%, 90%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(0, 100%, 97%, 1), hsla(0, 100%, 97%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(211, 100%, 95%, 1), hsla(211, 100%, 95%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(120, 100%, 93%, 1), hsla(120, 100%, 93%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

  

箇条書き+左側で貼り付けたふせん

  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(60, 100%, 90%, 1), hsla(60, 100%, 90%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(0, 100%, 97%, 1), hsla(0, 100%, 97%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(211, 100%, 95%, 1), hsla(211, 100%, 95%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(120, 100%, 93%, 1), hsla(120, 100%, 93%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

  

  

使い方の手順

アメブロに付箋風の飾り枠を貼り付ける手順を解説します。

  

デザインを選んで、HTMLコードをコピー

使いたい付箋のデザインと色を、この記事から選んで下さい。

付箋のHTMLコードをコピーする

色を選ぶと、付箋の下(グレーのボックス部分)にコードが表示されるのでコピーします。

  

あめっくま
あめっくま

HTMLコードの意味は分からなくても大丈夫ですよ。

  

  

アメブロに貼り付けて中身を書く

アメブロ記事作成画面で「HTML表示」に切り替えて、コードを貼り付けます。

HTML表示に切り替え

  

貼り付けたら、記事作成画面を「通常表示」に戻しましょう。

貼り付けたら通常表示に戻す

  

最後に付箋の中身を書きます。

アメブロの付箋の中身を書く

  

「ここに文章」の部分をお好みに変えて下さい。これでアメブロにも付箋ができましたね。

ちなみに当サイトの付箋飾り枠の中身は「ENTER」「SHIFT+ENTER」のどちらでも改行できます

  

あめっくま
あめっくま

コピーしたら貼り付けて、付箋の中身を書くだけですね。

  

  

付箋を簡単に使う方法

AmeCare(アメケア)」という「Google Chrome」のプラグインを使うと、付箋の飾り枠を記事にすぐ貼り付けできます。(アメケアは無料版で十分です)

AmeCare(アメケア)のダウンロードはこちら

  

以下のように付箋のコードをアメケアの「定型タグ」に登録して下さい

アメケアに登録する

  

記事を書く時にアメケアに登録したコードを選びます。

アメケアから付箋を挿入"

  

すると、下記のようにサクッと記事に付箋が入ります。(HTML表示に貼り付けも不要)

付箋をアメケアから挿入

  

よく使う付箋風ボックスなどをアメケアに登録しておけば、中身を書くだけなので簡単ですね。

毎回の記事作成で、カスタマイズがサクッとできるので便利です。

  

あめっくま
あめっくま

よく使うコードをアメケアに登録すると、すぐに使えるんだね。

  

  

コメント