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

今回は一色だけの囲い枠のhtmlです。単純にコピペで使えます。

シンプル点線枠の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を紹介したいと思います。