【コピペで出来る】おしゃれなWordPress囲み枠サンプル集(四角・二重線)

この記事では、Wordpressなどでコピペして使える囲み枠のHTMLを紹介しています。

 

WordPressで使用する場合は、テキスト表示・もしくはHTMLタグにした状態でペーストするだけで、簡単に囲み枠を作成することが出来ます。

 

✅囲み枠の作成方法については、以下の記事で詳しく紹介していますのでご覧ください。

 

 

目次

二重線の囲み枠

 

✔ この記事で紹介する囲み枠は、二重線の囲み枠です。

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #0099ff;">

<p>二重線囲み枠</p>

</div>

 

 

線が1本よりも2本のほうがより目立っていい感じです。

これから紹介するHTMLタグを自由にコピペしてお使い下さい。

 

 

グレー系

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #808080;">
 
<p>二重線囲み枠</p>
 
</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #696969;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #a9a9a9;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #c0c0c0;">

<p>二重線囲み枠</p>

</div>

 

 

ブルー系

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #000080;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #0000ff;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #00ffff;">

<p>二重線囲み枠</p>

</div>

 

グリーン系

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #008000;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #00ff00;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #adff2f;">

<p>二重線囲み枠</p>

</div>

 

レッド・オレンジ系

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ff0000;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ffd700;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #f0e68c;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ffa500;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ff4500;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ff6347;">

<p>二重線囲み枠</p>

</div>

 

ピンク・パープル系

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ff69b4;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ffc0cb;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #ff00ff;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #800080;">

<p>二重線囲み枠</p>

</div>

 

 

二重線囲み枠

 

<div style="background: #ffffff; padding: 10px; border: double 10px #8a2be2;">

<p>二重線囲み枠</p>

</div>

 

囲み枠をアレンジ

 

紹介した囲み枠の中に、お気に入りの色がない…という場合は、少しだけHTMLタグをいじるだけで簡単に設定できます。

今回紹介した見出し付き囲み枠のHTMLタグを簡単に説明します。

 

✔ HTMLタグ

 

<div style=”background: #ffffff; padding: 10px; border: double 10px #a9a9a9;”>

<p>二重線囲み枠</p>

</div>

 

枠内の色を変える

 

✅見出しの色を変えるには、以下のHTMLタグの1行目、赤太部分をアレンジします。

 

<div style=”background: #ffffff; padding: 10px; border: double 10px #a9a9a9;”>

<p>二重線囲み枠</p>

</div>

 

このカラーコードを編集してあげると、任意の文字色に変更することが出来ます。

カラーコードは以下のサイトで簡単に調べることが出来ます。

 

よかったらシェアしてね!

この記事を書いた人

『道に迷うことこそ、道を知ることだ』

道に迷いまくってブログを始めてしまいブログ歴1年、のんびり副業系ブロガーです。ブログの中身とは裏腹に、ドライブ好きのアウトドア派です。

現在『へそくり屋』と『暇つぶしドットコム』の2つのブログを運営中です。ブログについてはまだまだ未熟者です。

この『へそくり屋』では、WordPressに関する情報や、ブログアフィリエイトで役立つ情報を発信しています。

コメント

コメントする

目次
閉じる