アメブロ記事で使える可愛い囲み枠を集めました

最近、告知記事などを見やすく編集する

お仕事を時々いただくのですが

（すでにお客様が書かれている文章に

囲み枠をつけたり、文字に強弱をつけたり

画像を入れたりなどの装飾を行います。）

その時によく使っている、お気に入りの

可愛い系の囲み枠をご紹介しますね！

【使い方】

１．ブログを書く画面で「HTML表示」にする

２．下の各枠内にある文字（<div style= 〜 </div>）をコピーして、囲み枠を入れたい位置に貼り付ける

３．「ここに文字を入力」部分にお好きな文字を入力する

枠内で改行したいときは

「Shift」＋「Enter」を押してくださいね。

赤字部分はカラーコードです。

　この部分を変えることで好きな配色にできます。

　カラーコード一覧はこちら

---

<div style="background:#fff4f9; padding:10px; border:2px dashed #ff84c1;">ここに文字を入力</div>

<div style="background:#f7f7f7;padding:10px;width: auto;margin-right:6px;box-shadow: 3px 3px 3px #AAA;border: 2px dotted#e62f8b;">ここに文字を入力</div>

<div style="background:#ffd1e8; padding:20px; border:4px double #ffffff; border-radius:10px;">ここに文字を入力</div>

<div style="border: #ffcce5 solid 1px; border-left: #ffcce5 solid 10px; padding: 10px; background: #fff;width: auto;margin-right:6px;box-shadow: 5px 5px 5px #AAA;">ここに文字を入力</div>

<div style="background:#fff4f9;padding:10px;width: auto;margin-right:6px;border-radius: 10px;box-shadow: 3px 3px 3px #AAA;border: 2px dotted#ff409f;">ここに文字を入力</div>

<div style="background:#fff4f9; padding:10px; border:1px solid #ff409f; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">ここに文字を入力</div>

<div style="border:none; background-color: #ffcce5; padding: 5px; border-radius: 10px; box-shadow: 2px 2px 3px #dedede;  text-align: left;">
<div style="border:2px dashed #ffffff; padding: 5px 15px;border-radius: 10px;">ここに文字を入力</div>

---

ぜひ使ってみてくださいね＾＾

【ご提供中のメニュー】
事務代行サービス
ブログ管理
感想記事作成

セミナー受付（メール対応など）、スケジュール管理など
ご要望に合わせて承ります。
まずはご相談ください。

お問合せはこちらからお願いいたします お問い合わせフォーム