アメブロの記事で使える囲み枠(飾り枠) 付箋紙風

先日の、黒板風囲み枠(飾り枠)に続き、今度は付箋紙風の囲み枠を作ってみました。

付箋紙風の枠のみのシンプルなタイプと、テープで貼り付けたような効果を追加したタイプの2種類あります。

テープ無しはもちろん、テープ付きも全て画像を使わずにCSSのみで作ってありますので、色や大きさなどは自由に変えることが可能です。

黒板風の時と同様、タグも一緒に書いておきますので、よかったらコピペでご利用下さい♪

【ご注意】最新版エディタをお使いの場合は、コピーしたものを直接HTMLとして貼り付けると文字化けしておかしくなるようです。一度メモ帳などを経由するか、Google Chromeの「プレーンテキストとして貼り付ける」機能などをご利用下さい。

囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・黄色)

囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・黄色)

↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;">★</div></div>

囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・ピンク)

囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・ピンク)

↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;">★</div></div>

囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・青)

囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・青)

↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;">★</div></div>

囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・黄色)

囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・黄色)

↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>

囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・ピンク)

囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・ピンク)

↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>

囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・青)

囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・青)

↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>

好みの付箋紙風の囲み枠(飾り枠)にカスタマイズしてみる

なお、もし、もっと好みの付箋紙風にしたいという場合は、上記タグ内の色付き文字で書いてある部分を変更すると、囲み枠を様々カスタマイズできます。

紫文字(例:10px)・・・付箋紙の左端の位置調整
橙文字(例:300px)・・・付箋紙の横幅調整
緑文字(例:2deg)・・・付箋紙の傾き(2degは2度のことです)
赤文字(例:#ffdddd)・・・付箋紙の色

◆例えば・・・

 こんな感じです!

ちなみに↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:50px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:200px;transform:rotate(-15deg);background:#bbf0dd;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>

さぁ、次は何にしましょう?^^

関連記事

スッキリ見やすいシンプルな見出し付き囲み枠
斜めストライプ模様の囲み枠
ワッペン風(リネン調)の囲み枠
ワッペン風(デニム調)の囲み枠
黒板風の囲み枠

最終更新日:2017/09/05