簡単♪今すぐ使えるアメブロ囲み枠☆

プライオリティサロン主宰

一番身近なSNSサポート

星沢ひろみです☆

  アメブロ記事を見ていると

色んな囲み枠を見かけますね！

今日は使える囲み枠の

ご紹介をします♪

(※囲み枠って何？の方へ

こういうのです↓↓↓)

これからご紹介するものは

全てコピーして使えますので

気に入ったものがあったら

どうぞお使いください

直線囲み枠

ここに本文を入力する。
改行はShift+Enter

<div style="background:#fff; padding:10px; border:2px solid #ffdbff;">ここに本文を入力する。<br />改行はShift+Enter</div>

↑<から>までコピーして

HTML編集をクリックで

貼り付けてくださいね♪

角丸の囲み枠

ここに本文を入力する。
改行はShift+Enter

<div style="padding: 10px; border: 2px solid #eddbff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力する。<br />改行はShift+Enter</div>

水玉の囲み枠

ここに本文を入力する。
改行はShift+Enter

<div style="background:#fff; padding:10px; border:3px dotted #ff0000;">ここに本文を入力する。<br />改行はShift+Enter</div>

ほんわか系

ここに本文を入力する

<div style="padding: 10px 10px; margin: 10px; background: #c8e7e9; box-shadow: #c8e7e9 0 0 10px 10px; -webkit-box-shadow: #c8e7e9 0 0 10px 10px; -moz-box-shadow: #c8e7e9 0 0 10px 10px;">ここに本文を入力する
</div>

背景色付き囲み枠

ここに本文を入力

<div style="background:#fffbe3; padding:10px; border-radius: 10px; border: 1px dotted #eb6ea5;">ここに本文を入力
</div>

2重線囲み枠

ここに本文を入力

<div style="padding:10px;border-radius: 10px; border: 5px double #deb887;">ここに本文を入力</div>

タイトル付き囲み枠

ここにタイトルを入力

ここに本文を入力
改行はShift+Enter

<div style="background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトルを入力</span></div>

<div style="border: 1px solid #ff7fbf; padding: 10px;">ここに本文を入力<br>

改行はShift+Enter</div>

太線囲み枠

ココに本文を入れる

<div style="border: 5px solid #fdd35c; padding: 10px;">ココに本文を入れる<br></div><br><br>

タイトルを囲む風枠

タイトル

ココに本文

<div style="height:12px;">

<span style="margin-left:8px; padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">タイトル</span>

</div>

<div style="border:2px solid #ff9933; padding:25px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">

ココに本文

</div>

ドット背景付き囲み枠

本文

<fieldset style="background:#ffffdb; padding:10px; border:2px dashed #7fffbf;">本文</fieldset>

角丸背景付き囲み枠

本文

<fieldset style="background:#ff7a7a; padding:10px; border-radius:10px; border:none;"><span style="color:#ffffff;">本文</span></fieldset>

見出し枠

タイトル

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

やり方がわからない方は

お気軽にこちらからお問合せ

くださいね♪

↓↓↓

　ご提供中メニュー　

　♡アメブロ初心者向け楽々レッスン♡

詳細はコチラ

♡アメブロテーマ整理♡

♡告知記事作成代行♡

詳細はコチラ

♡お客様の感想記事作成代行♡

♡ｗｅｂ全般　困ったときにレスキューサポート♡

ＬＩＮＥ＠だけのお得なキャンペーンを

お届けしています♡

↓↓↓