【2019版】 アメブロで一生使える上品な囲み枠サンプルまとめ

いつもお読み頂きありがとうございます。

ひとめボレ起業プロデューサー清水よふ子です。

今回は2019年版、アメブロで一生使える上品な囲み枠や見出し枠などの枠線サンプルをまとめました！ぜひコピペ・アレンジなどして、アメブロの見やすい記事の編集に活用してくださいね＾＾

今回は起業女性がよく使うパターンを考慮して、アメブロ記事に貼り付ける版とアメケアに設定する版のタグを入れてみました。見やすい記事の編集に大活躍いただけたら嬉しいです！

「アメケア」って何？
初めて聞いた方はこちらからどうぞ。

https://ameblo.jp/beauty-shizuku/entry-12247139884.html

分かりやすい枠線の編集方法

アメブロで囲み枠を貼り付けるには？

囲み枠のタグをコピーして、記事編集エディタの「HTML表示」に切り替えて貼り付けるだけでOKです。

アメブロで囲み枠を編集するには？

先に囲み枠の中の文章を作成した上で、囲み枠のタグを貼り付けると編集がスムーズにできます。

囲み枠のカラーを変えたい場合は…

#db7093 の英数字（６文字）を貼り替えるだけで、色を変えることができます。

カラー見本はこちら

https://www.colordic.org/

（定番のカラー見本！ブックマークしておくと便利です）

囲み枠の線スタイルを変えたい場合は…

solidのところを、点線dotted、二乗線double、などに変えると線のスタイルを変更できます。

【線のスタイルまとめ】

知っておくと便利なので、ぜひ覚えて下さいね。

囲み枠タグの分かりやすい解説

「囲み枠のタグが読めない」「何のタグなのかさっぱり分からない」とウェブ苦手な起業女性からよく聞きます。そんな起業女性のために囲み枠タグの解説も加えました。

この機会に、今後囲み枠を自分でアレンジできるようにそれぞれのタグを理解しておきましょう！

囲み枠のあるある編集ポイント！

①アメケアに囲み枠を登録する時は、必ず文章を「%TEXT%」に置き換えてください。

そうしないと「あれ？登録できていない」ってなっちゃいます・・・

②囲み枠の内で改行したいときは「Shift+Enter」キーを押してみて下さい。

囲み枠が２連被る、タブるようなエラーが出なくなります。

③囲み枠の内に写真を入れる場合、写真サイズを260〜270サイズに必ずおさめるように調整してみてください。

写真のサイズを囲み枠からはみ出すことなく綺麗におさめることができます。
※スマホから記事を見る場合、幅が300〜350サイズ前後であることが多い為

それでは一度コピペしたりアレンジしたりなどチャレンジされてみてください。

うまく表示されなかったらまたお知らせ下さいね！

それではどうぞ＾＾

上品な囲み枠サンプルのまとめ

【１】シンプル

ベビーピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border:1px solid #FCB2A9; padding: 15px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="border:1px solid #FCB2A9; padding: 15px;">%TEXT%</div>

※アメケアに登録する方は、文字になっているところを全部「%TEXT%」に置き換えること！

---

ミントグリーン囲み枠

【アメブロ記事に貼り付ける】

1. <div style=“border:1px solid #B0D5C0; padding: 15px;”>◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="border:1px solid #B0D5C0; padding: 15px;">%TEXT%</div>

---

パープル囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border:1px solid #C19AC7; padding: 15px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="border:1px solid #C19AC7; padding: 15px;">%TEXT%</div>

---

ゴールド囲み枠

　【アメブロ記事に貼り付ける】

1. <div style="background:#ffffff; padding:15px; border:1px solid #e9bc00;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#ffffff; padding:15px; border:1px solid #e9bc00;">%TEXT%</div>

---

ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#ffffff; padding:15px; border:1px solid #ff1493;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#ffffff; padding:15px; border:1px solid #ff1493;">%TEXT%</div>

【２】太線

【太線】ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#ffffff; padding:10px; border:2px solid #ff1493;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#ffffff; padding:10px; border:2px solid #ff1493;">%TEXT%</div>

---

【太線】ベビーピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border:2px solid #FCB2A9; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="border:2px solid #FCB2A9; padding: 10px;">%TEXT%</div>

---

【太線】ティファニーブルー囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#ffffff; padding:10px; border:2px solid #76CDC2;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#ffffff; padding:10px; border:2px solid #76CDC2;">%TEXT%</div>

---

【太線】ゴールド囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#ffffff; padding:10px; border:2px solid #e9bc00;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#ffffff; padding:10px; border:2px solid #e9bc00;">%TEXT%</div>

---

【太線】パープル囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border:2px solid #C19AC7; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="border:2px solid #C19AC7; padding: 10px;">%TEXT%</div>

【３】点線

【点線】ゴールド囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#fff; padding:15px; border:2px dotted #e9bc00;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#fff; padding:15px; border:2px dotted #e9bc00;">%TEXT%</div>

---

【点線】ティファニーブルー囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#ffffff; padding:10px; border:2px dotted #76CDC2;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#ffffff; padding:10px; border:2px dotted #76CDC2;">%TEXT%</div>

---

【点線】ベビーピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="backpround:#ffffff; border:2px dotted #FCB2A9; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="backpround:#ffffff; border:2px dotted #FCB2A9; padding: 10px;">%TEXT%</div>

---

【点線】パープル囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#fff; padding:15px; border:2px dotted #C19AC7;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#fff; padding:15px; border:2px dotted #C19AC7;">%TEXT%</div>

---

【点線】ミントグリーン囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background:#fff; padding:15px; border:2px dotted #B0D5C0;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background:#fff; padding:15px; border:2px dotted #B0D5C0;">%TEXT%</div>

【４】破線

【破線】ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border: 1px dashed #fd5dac; padding: 15px;">◆ここに文字を入れます<br>改行はShift+Enter</div>

【アメケア版】

1. <div style="border: 1px dashed #fd5dac; padding: 15px;">%TEXT%<br>改行はShift+Enter</div>

---

【破線・背景色付き】ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background: #FFFFF8; border: 1px dashed #fd5dac; padding: 15px;">◆ここに文字を入れます<br>改行はShift+Enter</div>

【アメケア版】

1. <div style="background: #FFFFF8; border: 1px dashed #fd5dac; padding: 15px;">%TEXT%</div>

---

【５】見出し付き囲み枠

【見出し付き】ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;color: #ffffff; font-weight: bold;">タイトルはここ</div><div style="border: 1px solid #ff1493; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;color: #ffffff; font-weight: bold;">%TEXT%</div><div style="border: 1px solid #ff1493; padding: 10px;">%TEXT%</div>

---

【見出し付き】ベビーピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background: #FCB2A9; border: 1px solid #FCB2A9; padding-left: 10px; color: #383838; font-weight: bold;">タイトルはここ</div><div style="border: 1px solid #FCB2A9; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background: #FCB2A9; border: 1px solid #FCB2A9; padding-left: 10px; color: #383838; font-weight: bold;">%TEXT%</div><div style="border: 1px solid #FCB2A9; padding: 10px;">%TEXT%</div>

---

【見出し付き】ゴールド囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background: #e9bc00; border: 1px solid #e9bc00; padding-left: 10px;color: #ffffff; font-weight: bold;">タイトルはここ</div><div style="border: 1px solid #e9bc00; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background: #e9bc00; border: 1px solid #e9bc00; padding-left: 10px;color: #ffffff; font-weight: bold;">%TEXT%</div><div style="border: 1px solid #e9bc00; padding: 10px;">%TEXT%</div>

---

【見出し付き】ティファニーブルー囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background: #76CDC2; border: 1px solid #76CDC2; padding-left: 10px;color: #ffffff; font-weight: bold;">タイトルはここ</div><div style="border: 1px solid #76CDC2; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background: #76CDC2; border: 1px solid #76CDC2; padding-left: 10px;color: #ffffff; font-weight: bold;">%TEXT%</div><div style="border: 1px solid #76CDC2; padding: 10px;">%TEXT%</div>

---

【見出し付き】パープル囲み枠

【アメブロ記事に貼り付ける】

1. <div style="background: #C19AC7; border: 1px solid #C19AC7; padding-left: 10px;color: #ffffff; font-weight: bold;">タイトルはここ</div><div style="border: 1px solid #C19AC7; padding: 10px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style="background: #C19AC7; border: 1px solid #C19AC7; padding-left: 10px;color: #ffffff; font-weight: bold;">%TEXT%</div><div style="border: 1px solid #C19AC7; padding: 10px;">%TEXT%</div>

【６】背景色つぶし

【背景色つぶし】ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style=" background:#ff1493; border:none; padding: 15px; color:#ffffff;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style=" background:#ff1493; border:none; padding: 15px; color:#ffffff;">%TEXT%</div>

---

【背景色つぶし】ベビーピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style=" background:#ffc0cb; border:none; padding: 15px;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style=" background:#ffc0cb; border:none; padding: 15px;">%TEXT%</div>

---

【背景色つぶし】ゴールド囲み枠（暗め）

【アメブロ記事に貼り付ける】

1. <div style=" background:#D8AD83; border:none; padding: 15px; color:#ffffff;">◆ここに文字を入れます<br>改行はShift+Enter</div>

【アメケア版】

1. <div style=" background:#D8AD83; border:none; padding: 15px; color:#ffffff;">%TEXT%</div>

---

【背景色つぶし】パープル囲み枠

【アメブロ記事に貼り付ける】

1. <div style=" background:#C19AC7; border:none; padding: 15px; color:#ffffff;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style=" background:#C19AC7; border:none; padding: 15px; color:#ffffff;">%TEXT%</div>

---

【背景色つぶし】ティファニーブルー囲み枠

【アメブロ記事に貼り付ける】

1. <div style=" background:#76CDC2; border:none; padding: 15px; color:#ffffff;">◆ここに文字を入れます
2. 改行はShift+Enter</div>

【アメケア版】

1. <div style=" background:#76CDC2; border:none; padding: 15px; color:#ffffff;">%TEXT%</div>

【７】影付き

【影付き】グレー囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border: 1px #ccc solid; padding: 20px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">
2. ◆ここに文字を入れます
3. 改行はShift+Enter
4. </div>

【アメケア版】

1. <div style="border: 1px #ccc solid; padding: 20px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">
2. %TEXT%
3. </div>

---

【影付き】ゴールド囲み枠

アメブロ記事に貼り付ける

1. <div style="border: 1px #e9bc00 solid; padding: 20px; box-shadow: 0 2px 3px 0 #e9bc00; background: #fff;">
2. ◆ここに文字を入れます<br>改行はShift+Enter
3. </div>

【アメケア版】

1. <div style="border: 1px #e9bc00 solid; padding: 20px; box-shadow: 0 2px 3px 0 #e9bc00; background: #fff;">
2. %TEXT%
3. </div>

---

【影付き】ピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border: 1px #ff1493 solid; padding: 20px; box-shadow: 0 2px 3px 0 #ff1493; background: #fff;">
2. ◆ここに文字を入れます<br>改行はShift+Enter
3. </div>

【アメケア版】

1. <div style="border: 1px #ff1493 solid; padding: 20px; box-shadow: 0 2px 3px 0 #ff1493; background: #fff;">
2. %TEXT%
3. </div>

【８】大人気！付箋風

【付箋風】ベビーピンク囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 90%;">
2. ◆ここに文字を入れます
3. 改行はShift+Enter
4. </div>

【アメケア版】

1. <div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 90%;">%TEXT%</div>

---

【付箋風】パープル囲み枠

アメブロ記事に貼り付ける

1. <div style="border: #C19AC7 solid 1px; border-left: #C19AC7 solid 10px; padding: 20px; background: #fff; font-size: 90%;">
2. ◆ここに文字を入れます
3. 改行はShift+Enter
4. </div>

【アメケア版】

1. <div style="border: #C19AC7 solid 1px; border-left: #C19AC7 solid 10px; padding: 20px; background: #fff; font-size: 90%;">%TEXT%</div>

---

【付箋風】ゴールド囲み枠

【アメブロ記事に貼り付ける】

1. <div style="border: #e9bc00 solid 1px; border-left: #e9bc00 solid 10px; padding: 20px; background: #fff; font-size: 90%;">
2. ◆ここに文字を入れます
3. 改行はShift+Enter
4. </div>

【アメケア版】

1. <div style="border: #e9bc00 solid 1px; border-left: #e9bc00 solid 10px; padding: 20px; background: #fff; font-size: 90%;">%TEXT%</div>

※参照：今回囲み枠に使用したカラーコード

起業女性がよく使うと思われる上品なカラーコードをまとめました。

ベビーピンク#FCB2A9
ミントグリーン#B0D5C0
パープル#C19AC7
ゴールド#e9bc00
暗めのゴールド#D8AD83
ピンク#ff1493
ティファニーブルー#76CDC2

（その他）
グレー#ccc

ぜひ囲み枠のカラー編集に参考されてくださいね。

最後に

今回は起業女性が「よく使う」上品な囲み枠のサンプルを中心に、アメケアにもサッと登録できるように配慮してみました！
いかがでしたでしょうか？

ご紹介した囲み枠の中にお好みの色や線がないな〜と思った方は、こちらにリクエストいただくか自分でアレンジする事にチャレンジされてみてください＾＾

特に色使いは、起業女性の表現したい世界観ごとに色のイメージが決まっていると思われます。
できるだけ似た色を揃えるなどイメージの統一感をもたせたり、逆にインパクトのある色を一つにするなど、意識されてみてください。

囲み枠は一つのブログや記事につき、３つまで絞っておいた方がベターです。

あまり多すぎると、逆にまとまりがない印象になりかねません。

気をつけてくださいね。

ご紹介した上品な囲み枠のサンプルが、見やすい記事の編集にお役に立てられたら光栄です！

ひとめボレ起業プロデューサー

清水よふ子

「アメブロを集客できるブログに変えたい」

「アメブロ集客だけでは不安…」

「ホームページを持ちたい」

そんなウェブ苦手な起業女性の

「好きなことで輝く」想いを叶える、

ブログカスタムやホームページ作りを心を込めてサポートしています。

分からないことや不安な点がある方は何なりと

お気軽にご相談されてください。