アメブロカスタマイズ♡囲み枠 囲い枠の作り方♡ | 大人可愛いアメブロカスタマイズ|ブログのはじめ方|S W E E T

大人可愛いアメブロカスタマイズ|ブログのはじめ方|S W E E T

アメブロ初心者の方でも簡単にカスタマイズ出来ます♡初心者さんへブログの書き方やコツ、可愛いデザインのご提供♡
アクセスアップして集客出来る、売れるブログ作り♡

こんばんは(^ ^)最近いろんな方のブログ巡りをしています♡

久々にブログを書こうとしてもなかなかうまく書けないので・・・笑

色々と参考になって楽しいですね♡



いろんな方のブログを参考にさせて頂いた際に思ったことは

メニューのご案内や告知の内容がどこにあるのかすぐに分かるブログが

とても見やすいなって思いました音譜



初めてブログに来てくださったお客様にも解りやすいブログ作りのために!

読んでほしい文章、メニューのお知らせ、ご案内などは工夫して目立たせましょう♡



目立たせる方法としては文字の大きさを変えたり色を変えたりするだけでも

変わってきますドキドキ

今回は文字を線で囲む囲み枠を作る方法を紹介しますね♡




検索すれば沢山出てくるのですが、ピンクをメインにした可愛い囲み枠を調べました♡

それぞれの枠の下に表示されているタグをそのままコピペして使って下さいね♡


可愛い囲み枠

*点線囲み枠

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">ここに本文を記入</div>



*2重線の囲み枠

<div style=" padding:10px; border:3px double #ff99cc;"> ここに本文を記入 </div>



*背景色つき囲み枠

<div style="background:#fff8f5; padding:10px; border: 3px solid #ffb6c1;">ここに本文を記入</div>



見出し付き囲み枠

*見出し付きの囲み枠*
見出し付きの囲み枠です全ての囲み枠は改行しても使えます♡


<div style="background:#ff8cc6; border:1px solid #ff8cc6 padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">・ここにタイトルを記入・</font></div><div style="border:1px solid #ff8cc6; padding:10px; font-size:1em;">ここに本文を記入</div>




また可愛い囲み枠を発見したら追記していきますねラブラブ