【コピペで出来る】おしゃれなWordPress囲み枠サンプル集(影付き囲み枠)

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

 

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

 

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

 

 

目次

影付きの囲み枠

 

✔ この記事で紹介する囲み枠は、影付きの囲み枠です。

 

☆影を付けることで立体感が出ます!☆

 

影を付けることによって、立体感が生まれます。ブログの背景が白いほうがより立体感が生まれてよい感じになります。

 

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

 

※囲み枠内に記入されている6桁の英数字はカラーコードです。

 

グレー系

 

808080

 

<div style="background: #808080; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp;

</div>

 

 

#696969

 

<div style="background: #696969; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp;

</div>

 

a9a9a9

 

<div style="background: #a9a9a9; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp;

</div>

 

 

c0c0c0

 

<div style="background: #c0c0c0; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

ブルー系

 

000080

 

<div style="background: #000080; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

0000ff

 

<div style="background: #0000ff; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

00ffff

 

<div style="background: #00ffff; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

グリーン系

 

008000

 

<div style="background: #008000; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

00ff00

 

<div style="background: #00ff00; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

adff2f

 

<div style="background: #adff2f; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

レッド・オレンジ系

 

ff0000

 

<div style="background: #ff0000; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

ffd700

 

<div style="background: #ffd700; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

f0e68c

 

<div style="background: #f0e68c; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

ffa500

 

<div style="background: #ffa500; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

ff4500

 

<div style="background: #ff4500; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

ff6347

 

<div style="background: #ff6347; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

ピンク・パープル系

 

ff69b4

 

<div style="background: #ff69b4; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

ffc0cb

 

<div style="background: #ffc0cb; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

ff00ff

 

<div style="background: #ff00ff; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

800080

 

<div style="background: #800080; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

 

8a2be2

 

<div style="background: #8asbe2; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;">

&nbsp; 

</div>

 

囲み枠をアレンジ

 

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

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

 

✔ HTMLタグ

 

<div style=”background: #c0c0c0; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;”>

&nbsp;

</div>

 

枠内の色を変える

 

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

 

<div style=”background: #c0c0c0; padding: 10px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.30); word-break: break-all;”>

 

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

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

 

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

この記事を書いた人

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

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

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

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

コメント

コメント一覧 (1件)

コメントする

目次
閉じる