お手軽な囲み枠の使い方
WordPressの投稿記事にボタン一つで囲み枠を挿入する方法
使いたい囲み枠が見つかったら
- その下のコードボックスのタイトルバーの「<>」をクリックしてグレー背景・黒文字にしてから
- 「」をクリックして、コードを全選択します。
- 「Ctrl」+「C」キーを押してコピーして、ご自身のサイトに貼り付けてください。
※貼り付けるのは「テキスト」（HTML表示）のほうです。
※ボックス内でダブルクリックしてもグレー背景・黒文字になります。
- コピーして使える簡単な囲み枠①│タイトルなし│実践│白背景
- コピーして使える簡単な囲み枠②│タイトルなし│点線│白背景
- コピーして使える簡単な囲み枠③│タイトルなし│実線│カラー背景
- コピーして使える簡単な囲み枠④│タイトルなし│点線│カラー背景
- コピーして使える簡単な囲み枠⑤│タイトルなし│いろいろ
- コピーして使える簡単な囲み枠⑥│タイトルあり│実践│四角、角丸
- コピーして使える簡単な囲み枠⑦│タイトルあり│いろいろ
- コピーして使える簡単な囲み枠⑧│画像背景
四角│影無し
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 |
<div style="background: #0028a0; border: 1px solid #0028a0; padding: 5px 10px; font-size: 16px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #0028a0; padding: 10px; font-size: 1em;"><span style="color: #666666;">ここに本文を入力</span><br /> <span style="color: #666666;">ここに本文を入力</span></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 |
<div style="background: #b70b2e; border: 1px solid #b70b2e; padding: 5px 10px; font-size: 16px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #b70b2e; padding: 10px; font-size: 16px;"><span style="color: #666666;">ここに本文を入力</span><br /> <span style="color: #666666;">ここに本文を入力</span></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 |
<div style="background: #f782c9 ; border: 1px solid #f782c9 ; padding: 5px 10px; font-size: 16px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #f782c9 ; padding: 10px; font-size: 16px;"><span style="color: #666666;">ここに本文を入力</span><br /> <span style="color: #666666;">ここに本文を入力</span></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 |
<div style="background: #f37620 ; border: 1px solid #f37620 ; padding: 5px 10px; font-size: 16px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #f37620 ; padding: 10px; font-size: 16px;"><span style="color: #666666;">ここに本文を入力</span><br /> <span style="color: #666666;">ここに本文を入力</span></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 |
<div style="background: #248537 ; border: 1px solid #248537 ; padding: 5px 10px; font-size: 16px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #248537 ; padding: 10px; font-size: 16px;"><span style="color: #666666;">ここに本文を入力</span><br /> <span style="color: #666666;">ここに本文を入力</span></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 |
<div style="background: #8b5d38 ; border: 1px solid #8b5d38 ; padding: 5px 10px; font-size: 16px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #8b5d38 ; padding: 10px; font-size: 16px;"><span style="color: #666666;">ここに本文を入力</span><br /> <span style="color: #666666;">ここに本文を入力</span></div> |
四角│影有り
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border: 1px solid #0028a0;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; background: #0028a0; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border: 1px solid #b21428;"><div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; background: #b21428; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div><div>ここに本文を入力。</div><div>ここに本文を入力</div></div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border: 1px solid #f782c9;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; background: #f782c9; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border: 1px solid #f37620;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; background: #f37620; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border: 1px solid #248537;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; background: #248537; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border: 1px solid #8b5d38;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; background: #8b5d38; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
角丸│影無し
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; border-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #0028a0;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #0028a0; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; border-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #b21428;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #b21428; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; border-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #f782c9 ;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #f782c9 ; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; border-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #f37620 ;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #f37620 ; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; border-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #248537 ;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #248537 ; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; border-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #8b5d38 ;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #8b5d38 ; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
角丸│影有り
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border-bottom-left-radius: 6px; border-radius: 6px; border: 1px solid #0028a0;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #0028a0; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999;border-bottom-left-radius:6px;border-radius:6px;border: 1px solid #b21428;"><div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none;border-top-left-radius:6px;border-top-right-radius:6px; background: #b21428; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div><div>ここに本文を入力。</div><div>ここに本文を入力</div></div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border-bottom-left-radius: 6px; border-radius: 6px; border: 1px solid #f782c9;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #f782c9; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border-bottom-left-radius: 6px; border-radius: 6px; border: 1px solid #f37620;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #f37620; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border-bottom-left-radius: 6px; border-radius: 6px; border: 1px solid #8b5d38;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #8b5d38; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
ここにタイトル
ここに本文を入力。
ここに本文を入力
|
1 2 3 4 5 |
<div style="position: relative; word-break: break-all; color: #333333; font-size: 16px; font-weight: normal; text-decoration: none; background: #FFFFFF; margin: 5px 5px; padding: 30px 10px 10px 10px; box-shadow: 3px 3px 4px #999999; border-bottom-left-radius: 6px; border-radius: 6px; border: 1px solid #248537 ;"> <div style="position: absolute; line-height: 1.0; color: #ffffff; font-size: 16px; font-weight: bold; text-decoration: none; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #248537 ; padding: 5px 5px; left: 0px; top: 0px; right: 0;">ここにタイトル</div> <div>ここに本文を入力。</div> <div>ここに本文を入力</div> </div> |
角丸│影有り│グラデーション
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="background-image:linear-gradient(to right,#0028a0,#0028a0,white);background-color:#0028a0; border:1px solid #0028a0; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><font style="color:#ffffff; font-weight:bold;">ここにタイトル</font></div><div style="border:1px solid #0028a0; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br>ここに本文を入力<br>ここに本文を入力</div><br> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(to right,#b70b2e ,#b70b2e ,white); background-color: #b70b2e ; border: 1px solid #b70b2e ; padding: 5px 10px; font-size: 16px; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #b70b2e ; padding: 10px; font-size: 1em; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(to right,#f782c9 ,#f782c9 ,white); background-color: #f782c9 ; border: 1px solid #f782c9 ; padding: 5px 10px; font-size: 16px; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #f782c9 ; padding: 10px; font-size: 1em; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(to right,#f37620 ,#f37620 ,white); background-color: #f37620 ; border: 1px solid #f37620 ; padding: 5px 10px; font-size: 16px; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #f37620 ; padding: 10px; font-size: 1em; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(to right,#248537 ,#248537 ,white); background-color: #248537 ; border: 1px solid #248537 ; padding: 5px 10px; font-size: 16px; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #248537 ; padding: 10px; font-size: 1em; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /></div> |
ここにタイトル
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(to right,#8b5d38 ,#8b5d38 ,white); background-color: #8b5d38 ; border: 1px solid #8b5d38 ; padding: 5px 10px; font-size: 16px; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #8b5d38 ; padding: 10px; font-size: 1em; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /></div> |
ABOUT ME
