● アメブロで使える囲み枠、囲い枠、フレームつきの枠

こんにちは、石川聡です。

囲み枠をつくってみました。陰がついてこんな感じの枠です。

見本と、その下にタグを書いておきました。タグは最新版エディタ向けに書きましたので、どなたでも使いやすいようにしています。

文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #ffc1c1;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #ffc1e0;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #ffc1ff;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #e0c1ff;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #c1c1ff;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #c1e0ff;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #c1ffff;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #c1ffe0;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #c1ffc1;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #e0ffc1;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #ffffc1;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #ffe0c1;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #4169e1;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #2e8b57;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #daa520;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #ff69b4;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>




文章を入れます
文章を入れます


<br><div style="word-break:break-all;background-color:#ffffff;margin:10px 5px;padding:15px;border:8px solid #9370db;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #999 inset;">文章を入れます<br>文章を入れます</div><br><br>

気に入った囲み枠がありましたが、自由に使ってくださいね。^^

お店に未来のお客さまが集まるアメブロの仕組づくり
サロン、エステ、教室、お店、あなたが選ばれるブログづくり講座

定休日:不定休
山梨県甲府市千塚3-8-5
090-9310-1160

未来のお客さまが集まるアメブロ活用講座
3ヶ月で理想のお客さまが集まるブログづくり
あなたのブログの魅力を見つけるブログ診断!
ブログづくりと仕事の悩みがその場で解決
魅力が3倍!ブログのデザインとヘッダー作成
お客さまの声
お問い合わせ
メール satoshi.vw@gmail.com
電話 090-9310-1160

東京、神奈川、埼玉、大阪、愛知、北海道、三重、静岡ほか全国からご相談を受けています。集客やお客さまの心をつかむコツが身につく。

アメブロやブログ、ワードプレスを使い未来のお客さまが集まる仕組づくり。ファンを増やし申し込みが入るブログが完成します!