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

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

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

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

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

【ご注意】最新版エディタをお使いの場合は、コピーしたものを直接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>

最後に

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

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

関連記事

 

気に入って頂けたらフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です