【全27種】アメブロ向け黒板風の飾り枠デザイン（HTML・CSS不要）

この記事の特徴

重要度	3.0
難易度	2.0
備考	アメブロ記事で使える黒板風の飾り枠です。オシャレで読者に伝わりやすく改善できますね。

この記事では、アメブロに下記のような黒板風の飾り枠を導入する方法を解説します。

黒板風ボックスのメリット

記事が読みやすくなる（離脱防止）
読者の印象に残りやすい（収益UP）
メニュー表などに使える

⇒ 実際にアメブロで黒板を使った記事はこちら

くますけ

アメブロで黒板風のボックスを使うと、読者が目を留めてくれそうだね。

あめっくま

流し読みする読者も多いから、目立たせることも大事だよ。

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

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

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

記事後半には「黒板の活用法」や「設置の手順」も解説しているので、必要に応じて確認して下さい。

あめっくま

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

黒板風の飾り枠・ボックス

人気の黒板風ボックスも画像を使わずに作れます。コピペして貼り付けるだけです。

基本の色うすい色濃い色

よく見るベーシックな黒板風の飾り枠です。文字色を白にしてチョークで書いた雰囲気も出しています。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" 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>&nbsp;</p>

黒板の色と枠の部分が明るくなったタイプです。明るい雰囲気のブログにも使いやすい人気職となっています。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 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="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-m-b" style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 15px;">
<div class="l-m-b" style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-m-b" style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-m-b l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<p style="padding: 0; margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

タイトル部分

タイトル部分付き（中央寄せ）のベーシックな黒板風飾り枠です。「まとめ」「メニュー」などに使えますね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 15px;">
<div class="l-m-b l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<p style="padding: 0; margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

タイトル部分

タイトル部分付き（中央寄せ）のベーシックな黒板風飾り枠です。「まとめ」「メニュー」などに使えますね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-m-b l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<p style="padding: 0; margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

赤の「タイトル部分」「ここに文章」が黒板の中身

箇条書きを入れた黒板

今度は黒板の中に箇条書き入りの飾り枠です。

アメブロの見づらい箇条書きも改良しています。

箇条書き入り

基本の色うすい色濃い色

箇条書き1
箇条書き2
箇条書き3

<div class="l-border l-p-t l-p-r l-p-b l-p-l" 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 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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 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="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-text-center" 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 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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 15px;">
<div class="l-text-center" 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 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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-text-center" 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 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="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #b2771f; background: #247150; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #004200 inset; padding: 15px;">
<div class="l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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="border: 8px solid #aa6600; background: #01161b; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div class="l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<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>