（AI美人出典：pixabayより）
●7色キャンディBOX風の囲み枠♡
ごきげんよう、
癒し系Webデザイナー×イラストレーター
Nsレイです。
私が大好きでよく使う（趣味）
可愛いくて優しいソフトカラーの
囲み枠を紹介します。
キャンディBOX風の囲み枠です
ピンク・水色・グレー・ホワイト・
イエロー・グリーン・パープルの7色♪
ブログに使える「囲み枠」は、
プロパティを（背景色×影×角の丸みなど）
＼カスタマイズすることによって ／
色々な色やデザインの囲み枠を
作成することができちゃいます。
ちなみにwebカラー辞典
7色♡キャンディBOX風の囲み枠
①
ピンクさん
改行はShift+エンター
<div style="background: #e198b4; border: 1px solid #e198b4; padding-left: 10px;"><span style="font-size:1em;"><span style="color:#ffffff;"><span style="color: 桃花色 ももはないろ; font-weight: bold;">★ここにタイトルを入力。</span></span></span></div>
<div style="border: 1px solid #e198b4; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
②水色さん
改行はShift+エンター
<div style="background: #bfdfff; border: 1px solid #bfdfff; padding-left: 10px;"><span style="font-size:1em;"><span style="color:#ffffff;"><span style="font-weight: bold;">★ここにタイトルを入力。</span></span></span></div>
<div style="border: 1px solid #bfdfff; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
③グレーさん
改行はShift+エンター
<div style="background: #e5e4e6; border: 1px solid #e5e4e6; padding-left: 10px;"><span style="color:#ffffff;"><span style="color: 白梅鼠 しらうめねず; font-weight: bold;">★ここにタイトルを入力。</span></span></div>
<div style="border: 1px solid #e5e4e6; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
④ホワイトさん
改行はShift+エンター
<div style="background: #f8fbf8; border: 1px solid #f8fbf8; padding-left: 10px;"><span style="color:#bfbfbf;"><b style="font-weight:bold;"><span style="color: 白磁 はくじ; font-weight: bold;">★ここにタイトルを入力。</span></b></span></div>
<div style="border: 1px solid #f8fbf8; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
⑤イエローさん
改行はShift+エンター
<div style="background: #f2f2b0; border: 1px solid #f2f2b0; padding-left: 10px;"><span style="color:#7f7f7f;"><span style="color: 女郎花 おみなえし; font-weight: bold;">★ここにタイトルを入力。</span></span></div>
<div style="border: 1px solid #f2f2b0; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
⑥グリーンさん
改行はShift+エンター
<div style="background: #7ebea5; border: 1px solid #7ebea5; padding-left: 10px;"><span style="color:#ffffff;"><span style="color: 青磁色 せいじいろ; font-weight: bold;">★ここにタイトルを入力。</span></span></div>
<div style="border: 1px solid #7ebea5; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
⑦パープルさん
改行はShift+エンター
<div style="background: #a59aca; border: 1px solid #a59aca; padding-left: 10px;"><span style="color:#ffffff;"><span style="color: 藤紫 ふじむらさき; font-weight: bold;">★ここにタイトルを入力。</span></span></div>
<div style="border: 1px solid #a59aca; padding: 10px;">ここに本文を入力する。<br>
改行はShift+エンター</div>
実際の使い方は
コードをコピペして貼ります♪
貼り方はイラストを見てね
▼ブログの編集画面を「HTML表示」
モードにします。
①HTML表示をクリックして
ソースコードのページを開く。
↓
②ソースコードのページに
「囲み枠」のコードを貼る。
↓
③通常表示にして囲み枠が表示
されているか確認する。
HTMLって何？と疑問い感じる方に簡単説明
綿菓子ふんわり系囲み枠
私のデザインメニューです
しっかりヒアリング×カウンセリング致します
初めてのWebデザインガイドでは
あなたの理想ビジョン×あなただけの
ブランド力を引き出して
あなた自身の発信するメッセージを
視覚的に伝えることで
コンテンツの魅力を最大限に発揮して
フォロワーさまとの絆を深め
集客につながるブランディングを
させて頂きます。
デザインで困っていることは
どうぞお気軽にご相談下さいね
▼直接メール送れます
*⸜クリックするとフォームが出ます⸝*.
あなたの素敵な未来とオンライン
プレゼンスをサポートします。
起業はじめてさんのWebデザインガイド
癒し系webデザイナーNsレイ
（AI美人出典：pixabayより）
★⋆⸜お願い⸝⋆★
当サイトの内容やテキスト（ブログ）
画像や文章の無断転写、無断使用を
固く禁じます。