【永久保存版】コピペするだけ!アメブロで使えるかわいい囲み枠 10選

アメブロ 可愛い 枠線 10選

毎日のブログ記事や大切な告知記事・・・。

枠線を入れるだけで、可愛くなったり大切なところを目立たせる事ができたりします!

私のアメブロでは全600種類の枠線をご用意しているのですが、

【全600種類】アメブロ用枠線

その中でも特によく使われている人気の枠線というのがあります。

このページでは人気の10種類の枠をご紹介します♪

使いたい枠線の下に記載しているタグをコピーして、HTML表示にして貼り付ければOK!

 

※枠線の入れ方の操作方法についてははコチラの記事をご覧ください。

アメブロの記事に枠線を入れよう!~枠線の入れ方を解説するよ!

2018.05.28

 

ではでは、お気に入りの枠を見つけてくださいねー!

 

※2018年7月25日現在、こちらの記事からのコピペがうまくできなくなっているようです。

改善まで、こちらの記事の枠線をご使用ください。

【全600種類】アメブロ用枠線

 

タイトルが入れられる囲み枠

まずは、タイトルを入れる事ができる枠線3種類です!

人気ナンバー1! タイトル付き囲み枠

■タイトル
本文
<div style=”background:#4169e1; border:1px solid #4169e1; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div>
<div style=”border:1px solid #4169e1; padding:10px; font-size:1em;”>本文</div>

 

■タイトル
本文
<div style=”background:#ff6699; border:1px solid #ff6699; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div>
<div style=”border:1px solid #ff6699; padding:10px; font-size:1em;”>本文</div>

 

■タイトル
本文
<div style=”background:#66ccff; border:1px solid #66ccff; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div>
<div style=”border:1px solid #66ccff; padding:10px; font-size:1em;”>本文</div>

 

■タイトル
本文
<div style=”background:#3cb37a; border:1px solid #3cb37a; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div>
<div style=”border:1px solid #3cb37a; padding:10px; font-size:1em;”>本文</div>

 

■タイトル
本文
<div style=”background:#ff7f50; border:1px solid #ff7f50; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div>
<div style=”border:1px solid #ff7f50; padding:10px; font-size:1em;”>本文</div>

 

こちらもよく使われてます! 見出し枠

タイトル

 

<div style=”border-left: 10px solid #4169e1; border-bottom: 2px solid #4169e1; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>

 

タイトル

 

<div style=”border-left: 10px solid #ff6699; border-bottom: 2px solid #ff6699; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>

 

タイトル

 

<div style=”border-left: 10px solid #66ccff; border-bottom: 2px solid #66ccff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>

 

タイトル

 

<div style=”border-left: 10px solid #3cb37a; border-bottom: 2px solid #3cb37a; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>

 

タイトル

 

<div style=”border-left: 10px solid #ec6d51; border-bottom: 2px solid #ec6d51; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>

 

タイトル付き!二重線の囲み枠

タイトル

本文

<fieldset style=”border:5px double #4169e1;”><legend>タイトル</legend> 本文</fieldset>

 

タイトル

本文

<fieldset style=”border:5px double #ff6699;”><legend>タイトル</legend> 本文</fieldset>

 

タイトル

本文

<fieldset style=”border:5px double #66ccff;”><legend>タイトル</legend> 本文</fieldset>

 

タイトル

本文

<fieldset style=”border:5px double #3cb37a;”><legend>タイトル</legend> 本文</fieldset>

 

タイトル

本文

<fieldset style=”border:5px double #ec6d51;”><legend>タイトル</legend> 本文</fieldset>

 

背景付囲み枠

ベースに色がついている枠線です。

 

オシャレでかわいい記事になる♪ 背景付囲み枠

本文
<fieldset style=”background:#eaf4ff; padding:10px; border:2px solid #0000ff;”>本文</fieldset>

 

本文
<fieldset style=”background:#fff4f9; padding:10px; border:2px solid #ff409f;”>本文</fieldset>

 

本文
<fieldset style=”background:#efffff; padding:10px; border:2px solid #33ccff;”>本文</fieldset>

 

本文
<fieldset style=”background:#efffef; padding:10px; border:2px solid #3cb37a;”>本文</fieldset>

 

本文
<fieldset style=”background:#ffffc1; padding:10px; border:2px solid #ee7800;”>本文</fieldset>

 

 

女子感ナンバー1! 角が丸くなった囲み枠

本文
<fieldset style=”background:#add6ff; padding:10px; border:4px double #ffffff; border-radius:10px;”>本文</fieldset>

 

本文
<<fieldset style=”background:#f98289; padding:10px; border:4px double #ffffff; border-radius:10px;”><span style=”color:#ffffff;”>本文</span></fieldset>

 

本文
<fieldset style=”background:#a8ffff; padding:10px; border:4px double #ffffff; border-radius:10px;”>本文</fieldset>

 

本文
<fieldset style=”background:#7fffd4; padding:10px; border:4px double #ffffff; border-radius:10px;”>本文</fieldset>

 

本文
<fieldset style=”background:#ffdbb7; padding:10px; border:4px double #ffffff; border-radius:10px;”>本文</fieldset>

 

 

点線が可愛い♪ 点線外枠&背景付きの囲み枠

本文
<fieldset style=”background:#eaf4ff;padding:10px;border:2px dotted #0000ff;”>本文</fieldset>

 

本文
<fieldset style=”background:#fff4f9;padding:10px;border:2px dotted #ff409f;”>本文</fieldset>

 

本文
<fieldset style=”background:#efffff;padding:10px;border:2px dotted #33ccff;”>本文</fieldset>

 

本文
<fieldset style=”background:#efffef;padding:10px;border:2px dotted #3cb37a;”>本文</fieldset>

 

本文
<fieldset style=”background:#ffffc1;padding:10px;border:2px dotted #ee7800;”>本文</fieldset>

 

 

角が丸いと女子っぽさアップ! 背景付 破線の角丸囲み枠

本文
<fieldset style=”background:#eaf4ff; padding:10px; border-radius:10px; border:2px dashed #0000ff;”>本文</fieldset>

 

本文
<fieldset style=”background:#fff4f9; padding:10px; border-radius:10px; border:2px dashed #ff409f;”>本文</fieldset>

 

本文
<fieldset style=”background:#efffff; padding:10px; border-radius:10px; border:2px dashed #33ccff;”>本文</fieldset>

 

本文
<fieldset style=”background:#efffef; padding:10px; border-radius:10px; border:2px dashed #3cb37a;”>本文</fieldset>

 

本文
<fieldset style=”background:#ffffc1; padding:10px; border-radius:10px; border:2px dashed #ee7800;”>本文</fieldset>

 

 

記事内のタイトルとしても使える! 背景付囲み枠

本文
<fieldset style=”background:#add6ff; padding:10px; border:none;”>本文</fieldset>

 

本文
<fieldset style=”background:#f98289; padding:10px; border:none;”><span style=”color:#ffffff;”>本文</span></fieldset>

 

本文
<fieldset style=”background:#a8ffff; padding:10px; border:none;”>本文</fieldset>

 

本文
<fieldset style=”background:#7fffd4; padding:10px; border:none;”>本文</fieldset>

 

本文
<fieldset style=”background:#ffdbb7; padding:10px; border:none;”>本文</fieldset>

 

基本の囲み枠

ベーシックなので、こちらを覚えておくと応用が利きます!

いろんなところで利用可! 二重線の囲み枠

本文
<fieldset style=”border:4px double #4169e1;”>本文</fieldset>

 

本文
<fieldset style=”border:4px double #ff6699;”>本文</fieldset>

 

本文
<fieldset style=”border:4px double #66ccff;”>本文</fieldset>

 

本文
<fieldset style=”border:4px double #3cb37a;”>本文</fieldset>

 

本文
<fieldset style=”border:4px double #ec6d51;”>本文</fieldset>

 

これは押さえておこう! 基本の囲み枠

本文
<fieldset style=”border: 2px solid #4169e1;”>文章</fieldset>

 

本文
<fieldset style=”border: 2px solid #ff6699;”>文章</fieldset>

 

本文
<fieldset style=”border: 2px solid #66ccff;”>文章</fieldset>

 

本文
<fieldset style=”border: 2px solid #3cb37a;”>文章</fieldset>

 

本文
<fieldset style=”border: 2px solid #ec6d51;”>文章</fieldset>

 

まとめ

お気に入りの枠線は見つかりましたか?

メッセージボードや記事下定型文は、枠線がないとわかりづらいです。

記事の中でも、詳細など大切なところを囲むと、メリハリがついてわかりやすい記事になります!

枠線の使い方をマスターして、見やすいアメブロを目指しましょう♪

 

囲み枠の入れ方はこちらをご参考にどうぞ!

アメブロの記事に枠線を入れよう!~枠線の入れ方を解説するよ!

2018.05.28

枠線を好きな色に変える、線の種類を変える、太さを変える、などのカスタマイズも、コツをつかめば簡単です♪

ABOUTこの記事をかいた人

櫻井 法恵

ビジネスのための魅せるアメブロ・Facebook作りのアドバイザー。 2014年に事務管理・ブログ管理として起業。 2016年より、講師&アメブロコンサルタントとして活動を開始。 アメブロとFacebookのみを使い、約2年間でのべ500人を集客する。