あめつくのブログ

【アメブロ】囲み枠(シンプル – 四角)

広告

ここでは、アメブロで利用可能な囲み枠のタグを載せておきます。

使い方は、以下の記事を参考にしてください。
アメブロの記事内で囲み枠を使う方法(パソコン編)

広告

シンプルな囲み枠(四角)

<div style="border: #aaa 1px solid; background: #fefefe; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #aaa 1px solid; background: #f9f9f9; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #aaa 1px solid; background: #e6e6e6; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #fc7 1px solid; background: #ffe; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff9900 1px solid; background: #fff0c2; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff9900 1px solid; background: #ffe38f; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #FF4800 1px solid; background: #ffefe9; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff4800 1px solid; background: #ffd3c2; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff4800 1px solid; background: #feae8f; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff0073 1px solid; background: #fee; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff0073 1px solid; background: #ffccde; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff0000 1px solid; background: #ffdbdb; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #ff0000 1px solid; background: #fea4a4; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #009900 1px solid; background: #c2ffc2; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #009900 1px solid; background: #8ffe8f; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #002aff 1px solid; background: #c2ccff; padding: 10px; margin: 2em 0;">内容</div>
<div style="border: #002aff 1px solid; background: #8fa1fe; padding: 10px; margin: 2em 0;">内容</div>

以上、アメブロ用の囲み枠(四角)でした!

広告

カテゴリー