【コピペするだけ】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のトラブル解決法やエラーコード対策については、きみよやにまとめています。パソコンが苦手な方にもおすすめです!

タイトルとURLをコピーしました