この記事では、アメブロで使える「黒板風の囲み枠」を紹介します。
完成イメージは、👇の通りです。
黒板風の飾り枠のポイント
- チョーク色で中身が目立つ！
- 記事の要点を伝えやすい
- 箇条書きにすると分かりやすい
コピペで簡単に設置できます。
なお、はじめての方はアメブロの囲み枠の作り方・設置方法を確認して下さいね。
（補足：素材の無断転載・再配布は禁止です）
あめっくま
読みやすく・伝わりやすい記事を作りましょう！
この記事を書いた人
黒板風の囲み枠素材
基本的な黒板風のボックスです。文字を白くしているので、かなり目立ちますね。
記事で強調したい部分や、まとめなどに利用して下さい。
<div style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
箇条書き付きの黒板
表題をつけているので、まとめやポイントを伝えやすい飾り枠となります。
表題部分
表題部分付きの黒板風飾り枠です。「まとめ」「メニュー」などに使いやすいですね。
<div style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<p style="margin: 0;">ここに文章</p></div>
<p> </p>
箇条書き入りの黒板
黒板の中身を箇条書きにした飾り枠です。
箇条書きの部分でエンターを押すと、項目数が追加されます。
- 箇条書き1
- 箇条書き2
- 箇条書き3
<div style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
<li style="margin-bottom: 1em;">箇条書き1</li>
<li style="margin-bottom: 1em;">箇条書き2</li>
<li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>
<p> </p>
<ul style="margin-left: 20px; padding-left: 0px;">
<li style="margin-bottom: 1em;">箇条書き1</li>
<li style="margin-bottom: 1em;">箇条書き2</li>
<li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>
<p> </p>
表題＋箇条書き入りの黒板
表題部分と箇条書きを入れた黒板です。
箇条書きの部分でエンターを押すと、項目数が追加されます。
表題部分
- 箇条書き1
- 箇条書き2
- 箇条書き3
<div style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<ul style="margin-left: 20px; padding-left: 0px;">
<li style="margin-bottom: 1em;">箇条書き1</li>
<li style="margin-bottom: 1em;">箇条書き2</li>
<li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>
<p> </p>
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<ul style="margin-left: 20px; padding-left: 0px;">
<li style="margin-bottom: 1em;">箇条書き1</li>
<li style="margin-bottom: 1em;">箇条書き2</li>
<li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>
<p> </p>
あめっくま
どんどん使ってくださいね！