“好きを仕事に”を叶える♡
人柄と想いを伝えるWebデザイン
&PC苦手な講師さん向けITサポート
玉田こずえ
（プロフィールはこちら）
デザイン制作と事務サポートで
理想のお教室作りをお手伝いしていますꕤ
アメブロで使える可愛い囲み枠♡
コピペで簡単に作れます！
ぜひお使いください＾＾
＜囲み枠の作り方＞
①【★囲み枠デザイン】の中から使いたい囲み枠を選び、枠の中の文字をコピー
↓
②ご自分のアメブロ記事作成画面でHTML編集にして、囲み枠を入れたい場所に貼り付け
↓
③通常表示画面で「ここに本文」のところに、書きたい文章を入力
*改行しても枠が増えないようになっています！
これで完成です♡
★囲み枠デザイン
◆シンプル
<div style="background-color: #fff; padding: 10px; border: 2px solid #eeadb8;"><p>ここに本文</p></div><p> </p>
◆シンプル（角丸）
<div style="background-color: #fff; padding: 10px; border: 2px solid #eeadb8; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;"><p>ここに本文</p></div><p> </p>
◆付箋風
<div style="background-color: #fff; border: #eeadb8 solid 2px; border-left: #eeadb8 solid 10px; padding: 15px;"><p>本文</p><p> </p></div><p> </p>
◆タイトル付き
ここにタイトル
<div style="margin:0em ;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#ffffff;background:#eeadb8;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">
<p>ここにタイトル</p></div>
<div>
<div style="background-color: #fff; border: #eeadb8 solid 2px; border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 15px;">
<p>ここに本文</p><p> </p></div><p> </p>
＊色を変えたい時
枠の色：#eeadb8を好きな色コードに変更
背景色：#fffを好きな色コードに変更
色コードはこちら♡
＊Googleで「カラーピッカー」と検索して好きな色を探すこともできます！
○を動かすと左側に色がでます。HEX欄にある#から始まる英数字が色コードです
テーマカラーの囲み枠を使うことで
見やすく統一感のあるブログになりますよ♡
やり方でご質問があれば公式LINEでご連絡ください！
◆ ホームページ
◆ お問合せフォーム
＼公式LINEご登録プレゼント／
Instagramサンクスページテンプレート
Canvaで編集するコツ解説動画付き！
お問合せやご相談もLINEからお気軽にどうぞ♡