こんにちは、パソコンインストラクターの川上雄大です。
いつもこちらの囲み枠を使っていただきまして、ありがとうございます↓
『アメブロ 記事内に枠で囲む方法（囲い枠・囲み枠・枠囲い・枠囲み）』
今回は、茶色系・ベージュ系に絞った囲み枠例をお伝えします。
茶系・ベージュ系囲み枠１
背景色を、burlywood（#deb887）
周りの点線を、saddlebrown（#8b4513）
にした囲み枠
<div style="background:#deb887; padding:10px; border-radius: 10px; border: 2px dotted #8b4513;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠２
背景色を、wheat（#f5deb3）
周りの点線を、saddlebrown（#8b4513）
にした囲み枠
<div style="background:#f5deb3; padding:10px; border-radius: 10px; border: 2px dotted #8b4513;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠３
背景色を、wheat（#f5deb3）
周りの線を、saddlebrown（#8b4513）
にした囲み枠
<div style="background:#f5deb3; padding:10px; border-radius: 10px; border: 2px solid #8b4513;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠４
背景色を、wheat（#f5deb3）
周りの点線を、brown（#a52a2a）
にした囲み枠
<div style="background:#f5deb3; padding:10px; border-radius: 10px; border: 2px dotted #a52a2a;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠５
背景色を、lemonchiffon（#fffacd）、wheat（#f5deb3）、burlywood（#deb887）
周りの点線を、saddlebrown（#8b4513）
にした囲み枠
○○○
○○○
○○○
○○○
<div style="background-image:linear-gradient(#deb887,#f5deb3,#fffacd,#f5deb3,#deb887);background-color:#f5deb3; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #8b4513; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
茶系・ベージュ系囲み枠６
背景色を、darksalmon（#e9967a）
周りの点線を、brown（#a52a2a）
にした囲み枠
<div style="background:#e9967a; padding:10px; border-radius: 10px; border: 2px dotted #a52a2a;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠７
背景色を、#955629
周りの点線を、#5D310C
文字色を、白（#ffffff）
にした囲み枠
<div style="background:#955629; padding:10px; border-radius: 10px; border: 2px dotted #5D310C;color:#ffffff;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠８
背景色を、beige（#eedcb3）
周りの点線を、saddlebrown（#8b4513）
にした囲み枠
<div style="background:#eedcb3; padding:10px; border-radius: 10px; border: 2px dotted #8b4513;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠９
背景色を、#C78D4B
周りの点線を、#5D310C
文字色を、白（#ffffff）
にした囲み枠
<div style="background:#C78D4B; padding:10px; border-radius: 10px; border: 2px dotted #5D310C;color:#ffffff;">枠内の記事本文</div><br>
茶系・ベージュ系囲み枠１０
背景色を、#C78D4B
周りの点線を、#5D310C
にした囲み枠
<div style="background:#C78D4B; padding:10px; border-radius: 10px; border: 2px dotted #5D310C;">枠内の記事本文</div><br>
１０パターンを例としてあげましたが、
基本パターンである
茶系・ベージュ系囲み枠１
<div style="background:#deb887; padding:10px; border-radius: 10px; border: 2px dotted #8b4513;">枠内の記事本文</div><br>
を例にしますが、
背景色は、赤文字の#deb887を変更するとできます。
<div style="background:#deb887; padding:10px; border-radius: 10px; border: 2px dotted #8b4513;">枠内の記事本文</div><br>
そして、線の色は、緑色の#8b4513を変更するとできます。
<div style="background:#deb887; padding:10px; border-radius: 10px; border: 2px dotted #8b4513;">枠内の記事本文</div><br>
カラーコードはこちらをご参考に↓
以上、アメブロ便利技でした。
LIDS札幌・ライフデザインスクール
川上 雄大