アメブロの記事で使える囲み枠(飾り枠) 黒板風




アメブロの記事内で利用できる囲み枠(飾り枠)を作ってみました。

「他の人があまり作ってなさそうなのを」と思って、とりあえず今回は黒板風にしてみました。

暗色系は需要が少ないかもしれないとも思ったのですが。

タグも一緒に書いておきますので、よかったらコピペしてご利用下さい。

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

囲み枠(飾り枠)テンプレート:黒板風(木枠・緑)


囲み枠(飾り枠)テンプレート:黒板風(木枠・緑)





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

<div style="word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #020 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(木枠・黒)


囲み枠(飾り枠)テンプレート:黒板風(木枠・黒)





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

<div style="word-break:break-all;color:#fff;background-color:#191919;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #000 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(木枠・青)


囲み枠(飾り枠)テンプレート:黒板風(木枠・青)





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

<div style="word-break:break-all;color:#fff;background-color:#246;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #124 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・緑)


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・緑)





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

<div style="word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #020 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・黒)


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・黒)





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

<div style="word-break:break-all;color:#fff;background-color:#191919;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #000 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・青)


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・青)





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

<div style="word-break:break-all;color:#fff;background-color:#246;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #124 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠を作るのって楽しい


なんか、囲み枠を作ってると楽しいので、また作ります。

今度は何風にしましょうか。

関連記事


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

最終更新日:2017/09/05

AD