アメブロ情報

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

アメブロ 可愛い 枠線 10選

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

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

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

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

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

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

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

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

アメブロ 枠線の入れ方
アメブロの記事に枠線を入る方法~枠線の入れ方と注意点を解説!【動画あり】記事の中に枠線を入れるだけで、ぐっとブログは見やすくなります! また、メッセージボードや記事下定型文などは、むしろ枠線がないと、ど...
スマホ アメブロアプリ枠線
スマホのアメブロアプリでも!記事に枠線を入れてみよう!「アメブロの記事に枠線を入れたい!」 というのは多くのお客様からご相談いただきます。 こちらの記事もたくさんご覧いただいてい...

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

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

まずは、タイトルを入れる事ができる枠線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>

まとめ

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

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

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

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

 

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

アメブロ 枠線の入れ方
アメブロの記事に枠線を入る方法~枠線の入れ方と注意点を解説!【動画あり】記事の中に枠線を入れるだけで、ぐっとブログは見やすくなります! また、メッセージボードや記事下定型文などは、むしろ枠線がないと、ど...
スマホ アメブロアプリ枠線
スマホのアメブロアプリでも!記事に枠線を入れてみよう!「アメブロの記事に枠線を入れたい!」 というのは多くのお客様からご相談いただきます。 こちらの記事もたくさんご覧いただいてい...

 

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

気軽にチャレンジしてみてくださいね!

※記事のご紹介はご自由にどうぞ!

ただし転用・パクリ・二次利用などは禁止です。

ご紹介いただく際は、出典元として当ブログのリンクをお願いします

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