【コピペOK】アメブロの囲み枠19種類！記事内をおしゃれに装飾する方法

アメブロの新機能“記事デザイン”を使うと、HTMLコードを使用せず、囲み枠や吹き出しをアメブロ記事に反映させることができます。（手順は下記参照）

①投稿ページのメニューから赤丸部分をタップ

②テキストをタップ

③好きなデザインを選ぶだけ

吹き出しデザインは、画像部分をタップすると指定の画像に変更することができます。

アメーバキングで効率よく、アメブロ攻略しよう！

アメーバキングの評判は嘘か検証！上がったアクセス数と収益を公開

アメーバキングの評判は嘘か検証！上がったアクセス数と収益を公開 「アメーバキングで本当にアクセス数上がるの？」 「集客するならアメーバキングが必要って本当?」 「アメキン使ったらアカウン...

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

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

<fieldset style=”border:3px double #ff6699;”><legend><span style=”font-weight:bold;”>■ここにタイトルを入力する</span> </legend>ここに本文を入力する。<br />改行はShift+Enter</fieldset>

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

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

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

<div style=”background:#ffa566; color:#ffffff; border:1px solid #ffa566; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;”>ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style=”margin-left:8%; border-top: 12px solid #ffa566; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;”></div>

<div style=”margin:0;background: #ffffff;color: #000000;border:2px solid #ffd1e8;text-align: left;padding: 8px;border-radius: 10px;”>ここに文章</div>
<div style=”margin-left:20%;width: 0;height: 0;border-top: 10px solid #ffd1e8;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;”></div>
<div style=”margin-left:20%;margin-top:-21px;width: 0;height: 0;border-top: 10px solid #ffd1e8;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;”></div>

<div style=”margin-left:10px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;”>★</div></div>

<div style=”margin-left:10px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;”><div style=”width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)”></div>★</div></div>

<div style=”width:400px;”><div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2pxrgba(0,0,0,0.3);background:url(https://stat.ameba.jp/user_images/20141029/18/wazameba/37/f1/p/o0300030013113018948.png);border-radius:10px;”><div style=”background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;”><div style=”border:2px dashed #f9d6e8;border-radius:5px;padding:10px”>★</div></div></div></div>

<div class=”l-border l-p-t l-p-r l-p-b l-p-l” style=”background-size:24px 24px;background-color:#f90;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);”><div style=”color:#333;background:#fff;padding:10px;border-radius:5px;”>★</div></div>

<div style=”padding: 10px 20px; margin: 10px; background: #ffe4e1; box-shadow: #ffe4e1 0 0 10px 10px; -webkit-box-shadow: #ffe4e1 0 0 10px 10px; -moz-box-shadow: #ffe4e1 0 0 10px 10px; font-size: 90%;”></div>

<div style=”padding: 10px 20px; margin: 10px; background: #b0e0e6; box-shadow: #b0e0e6 0 0 10px 10px; -webkit-box-shadow: #b0e0e6 0 0 10px 10px; -moz-box-shadow: #b0e0e6 0 0 10px 10px; font-size: 90%;”></div>

<div style=”padding: 10px 20px; margin: 10px; background: #fffacd; box-shadow: #fffacd 0 0 10px 10px; -webkit-box-shadow: #fffacd 0 0 10px 10px; -moz-box-shadow: #fffacd 0 0 10px 10px; font-size: 90%;”></div>

<div style=”padding: 10px 20px; margin: 10px; background: #66cdaa; box-shadow: #66cdaa 0 0 10px 10px; -webkit-box-shadow: #66cdaa 0 0 10px 10px; -moz-box-shadow: #66cdaa 0 0 10px 10px; font-size: 90%;”></div>

<div style=”padding: 25px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 50px #FFB0D8inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece;”>★★★好きな言葉を入れてくださいね★★★</div>

<div style=”padding: 25px;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 50px #A1D784inset; -moz-box-shadow: 0 0 50px #A1D784 inset; -webkit-box-shadow: 0 0 50px #A1D784 inset;”>★★★好きな言葉を入れてくださいね★★★</div>

当ブログを運営しているさよみみは、アメブのジャンル上位ブロガーさんとの情報交換ができる

オンラインサロン「さよみみ部屋」

を運営しています。

累計450人以上が所属するオンラインサロンで、アメブロでうまくいったコツや収益化する仕組みの共有などを行なっています。

どれかひとつでも当てはまるなら、さよみみ部屋で一緒にブログを始めてみませんか。

※参加者特典

アメトピ でよく使われるキーワードを集（50パターン以上）の閲覧権