【コピペするだけ】WordPressで使える簡単HTML ＊＊可愛い囲い枠・ピンク・オレンジ編＊＊保存版＊

コピペだけで使える、可愛い囲いのHTMLをご紹介します。（WordPressは確認済み）

シンプルな囲いモノは沢山ありますが、可愛い囲いをつけたい時もあります。そのため用にhtmlでコピペするだけで使える囲いをご紹介します！

このページはピンクとオレンジ枠です。見本枠の下にショートコードがありますのでコピペして、htmlか、ショートコードの中に貼り付けて使って下さい。（文字は消して使ってください。）

ピンク色の囲い枠に、白い文字です

<fieldset style="background:#ffc0cb; padding:10px; border:4px double #ffffff; border-radius:10px;"><span style="color:#ffffff;">ピンク色の囲い枠に白い文字です</span></fieldset>

ピンク色の囲い枠に黒い文字です

<fieldset style="background:#ffc0cb; padding:10px; border:4px double #ffffff; border-radius:10px;"><span style="color:#000000;">ピンク色の囲い枠に黒い文字です</span></fieldset>

ピンク色の囲い枠にグレーの文字です

<fieldset style="background:#ffc0cb; padding:10px; border:4px double #ffffff; border-radius:10px;"><span style="color:#696969;">ピンク色の囲い枠にグレーの文字です</span></fieldset>

パステルオレンジの囲い枠に白い文字です

<fieldset style="background:#ffdab9; padding:10px; border:4px double #ffffff; border-radius:10px;"><span style="color:#ffffff;">パステルオレンジの囲い枠に白い文字です</span></fieldset>

パステルオレンジの囲い枠に黒い文字です

<fieldset style="background:#ffdab9; padding:10px; border:4px double #ffffff; border-radius:10px;"><span style="color:000000;">パステルオレンジの囲い枠に黒い文字です</span></fieldset>

パステルオレンジの囲い枠にグレーの文字です

<fieldset style="background:#ffdab9; padding:10px; border:4px double #ffffff; border-radius:10px;"><span style="color:696969;">パステルオレンジの囲い枠にグレーの文字です</span></fieldset>

ピンクに黒い文字です

<fieldset style="background:#fff4f9; padding:10px; border-radius:10px; border:2px dashed #ff409f;">ピンクに黒い文字です</fieldset>

オレンジに黒い文字です

<fieldset style="background:#ffdab9; padding:10px; border-radius:10px; border:2px dashed #ff7f50;">オレンジに黒い文字です</fieldset>

白背景にピンク色の枠です

<fieldset style="border:5px double #ffbcdd;">白背景にピンク色の枠です</fieldset>

白背景にオレンジ色の枠です

<fieldset style="border:5px double #ff7f50;">白背景にオレンジ色の枠です</fieldset>

テーマ

ピンク枠です。

<fieldset style="border:3px dotted #ffdcdd;"><legend>テーマ</legend>
ピンク点線の枠です。</fieldset>

テーマ

オレンジ点線枠です。

<fieldset style="border:3px dotted #ff7f50;"><legend>テーマ</legend>
オレンジ点線枠です。</fieldset>

ピンクです。

<div style="border-left: 10px solid #ffdcdd; border-bottom: 2px solid #ffdcdd; padding-left: 10px; font-size: 100%; color: #000000;">ピンクです。</div>

オレンジです。

<div style="border-left: 10px solid #ff7f50; border-bottom: 2px solid #ff7f50; padding-left: 10px; font-size: 100%; color: #000000;">オレンジです。</div>

ピンク色です

<fieldset style="background:#ffc0cb; padding:10px; border-radius:10px; border:none;"><span style="color:#ffffff;">ピンク色です</span></fieldset>

オレンジ色です

<fieldset style="background:#ff7a7a; padding:10px; border-radius:10px; border:none;"><span style="color:#ffffff;">オレンジ色です</span></fieldset>

使える囲い枠はあったでしょうか？このページではパステルカラーの可愛い囲い枠だけ掲載してみました。他のページではシックなものなども掲載していますので良かったら見ていって下さいね。