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

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

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

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

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

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

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

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

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

アメブロの記事に枠線を入る方法～枠線の入れ方と注意点を解説！【動画あり】記事の中に枠線を入れるだけで、ぐっとブログは見やすくなります！また、メッセージボードや記事下定型文などは、むしろ枠線がないと、ど...

スマホのアメブロアプリでも！記事に枠線を入れてみよう！「アメブロの記事に枠線を入れたい！」というのは多くのお客様からご相談いただきます。こちらの記事もたくさんご覧いただいてい...

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

タイトルが入れられる囲み枠
背景付囲み枠
基本の囲み枠
- いろんなところで利用可！　二重線の囲み枠
- これは押さえておこう！　基本の囲み枠
まとめ

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

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

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

タイトル

<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>

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

本文

<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>

まとめ

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

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

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

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

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

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

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

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

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

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

おすすめ記事枠線囲み枠アメブロ枠線アメブロ　線アメブロ囲み枠囲い枠可愛い枠線

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

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