【コピペするだけ】WordPressで使える簡単HTML ＊＊背景一色のシンプルな枠・保存版＊

「コピペで即使える！色別・デザイン別の囲い枠HTML集」

ブログやサイトの中で、重要なポイントを目立たせたいときに便利なのが“囲い枠”です。でも、毎回CSSを書くのはちょっと面倒…。そこで今回は、初心者でもそのまま使える「コピペ用HTMLコード」を種類別・色別にまとめてご紹介します！

点線・二重線・背景付き・角丸など、すぐに使える囲いデザインを揃えました。HTMLを直接貼り付けて使えるので、WordPressのクラシックブロックでも対応OK。記事装飾の幅が広がりますよ！

シンプルな枠・点線枠のhtml

↓これをコピー＆ペーストして使って下さい
<div style="padding: 10px; margin-bottom: 10px; 
border: 1px dashed #696969;">本文はここ
</div>

---

↓これをコピー＆ペーストして使って下さい 
<div style="padding: 10px;  margin-bottom: 10px; 
border: 1px dashed #008b8b;"> 本文はここ
</div>

---

↓これをコピー＆ペーストして使って下さい 
<div style="padding: 10px;  margin-bottom: 10px; 
border: 1px dashed #oooocd;"> 本文はここ
</div>

---

↓これをコピー＆ペーストして使って下さい  
<div style="padding: 10px;  margin-bottom: 10px; 
border: 1px dashed #800000;"> 本文はここ
</div>

---

2重線の枠のhtml

↓これをコピー＆ペーストして使って下さい   
<div style="padding: 10px; margin-bottom: 10px; 
border: 5px double #008b8b">本文はここ
</div>

↓これをコピー＆ペーストして使って下さい   
<div style="padding: 10px; margin-bottom: 10px; 
border: 5px double #0000cd">本文はここ
</div>

---

↓これをコピー＆ペーストして使って下さい   
<div style="padding: 10px; margin-bottom: 10px; 
border: 5px double #800000">本文はここ
</div>

---

↓これをコピー＆ペーストして使って下さい   
<div style="padding: 10px; margin-bottom: 10px; 
border: 5px double #696969">本文はここ
</div>

---

背景塗りつぶし枠のhtml

<div style="padding: 10px; margin-bottom: 
10px; border: 1px dotted #696969; background-color: #696969; 
color: #ffffff;"> 本文はここ
</div>

---

<div style="padding: 10px; margin-bottom: 
10px; border: 1px dotted #008b8b; background-color: #008b8b; 
color: #ffffff;"> 本文はここ
</div>

---

<div style="padding: 10px; margin-bottom: 
10px; border: 1px dotted #800000; background-color: #800000; 
color: #ffffff;"> 本文はここ
</div>

---

<div style="padding: 10px; margin-bottom: 
10px; border: 1px dotted #87ceeb; background-color: #87ceeb; 
color: #ffffff;"> 本文はここ
</div>

黒い枠の中を塗りつぶし枠のhtml

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #696969;
 border-radius: 10px; background-color: #696969; color: #ffffff;">本文はここ
</div>

---

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #696969;
 border-radius: 10px; background-color: #800000; color: #ffffff;">本文はここ
</div>

---

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #696969;
 border-radius: 10px; background-color: #800000; color: #ffffff;">本文はここ
</div>

---

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #696969;
 border-radius: 10px; background-color: #87ceeb;">本文はここ
</div>

---

法則がわかれば、字の色や枠の色なども簡単に変えることが出来ますが「簡単にコピペで変えたい」という人用にhtmlをアップしてみました。（CSSより簡単にできるかな？）

次は、ちょっと複雑でおしゃれな囲い枠のhtmlを紹介したいと思います。

Windowsのトラブル解決法やエラーコード対策については、きみよやにまとめています。パソコンが苦手な方にもおすすめです！