お手軽な囲み枠の使い方
WordPressの投稿記事にボタン一つで囲み枠を挿入する方法
使いたい囲み枠が見つかったら
- その下のコードボックスのタイトルバーの「<>」をクリックしてグレー背景・黒文字にしてから
- 「」をクリックして、コードを全選択します。
- 「Ctrl」+「C」キーを押してコピーして、ご自身のサイトに貼り付けてください。
※貼り付けるのは「テキスト」（HTML表示）のほうです。
※ボックス内でダブルクリックしてもグレー背景・黒文字になります。
- コピーして使える簡単な囲み枠①│タイトルなし│実践│白背景
- コピーして使える簡単な囲み枠②│タイトルなし│点線│白背景
- コピーして使える簡単な囲み枠③│タイトルなし│実線│カラー背景
- コピーして使える簡単な囲み枠④│タイトルなし│点線│カラー背景
- コピーして使える簡単な囲み枠⑤│タイトルなし│いろいろ
- コピーして使える簡単な囲み枠⑥│タイトルあり│実践│四角、角丸
- コピーして使える簡単な囲み枠⑦│タイトルあり│いろいろ
- コピーして使える簡単な囲み枠⑧│画像背景
実線│白背景│四角
ここに本文を入力
|
1 2 3 |
<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: 10px 10px 10px 10px; border: 1px solid #0028a0;"> <div>ここに本文を入力</div> </div> |
ここに本文を入力
|
1 2 3 |
<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: 10px 10px 10px 10px; border: 1px solid #b70b2e;"> <div>ここに本文を入力</div> </div> |
ここに本文を入力
|
1 2 3 |
<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: 10px 10px 10px 10px; border: 1px solid #f782c9;"> <div>ここに本文を入力</div> </div> |
ここに本文を入力
|
1 2 3 |
<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: 10px 10px 10px 10px; border: 1px solid #f37620;"> <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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#248537;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#8b5d38;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#0028a0;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#b70b2e;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f782c9;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f37620;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#248537;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#8b5d38;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#0028a0;border-radius:5px;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#b70b2e;border-radius:5px;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f782c9;border-radius:5px;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f37620;border-radius:5px;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#248537;border-radius:5px;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#8b5d38;border-radius:5px;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#0028a0;border-radius:20px;"><div>ここに本文を入力<br /> <br />ここに本文を入力<br /></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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#b70b2e;border-radius:20px;"><div>ここに本文を入力<br /> <br />ここに本文を入力<br /></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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f782c9;border-radius:20px;"><div>ここに本文を入力<br /> <br />ここに本文を入力<br /></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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f37620;border-radius:20px;"><div>ここに本文を入力<br /> <br />ここに本文を入力<br /></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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#248537;border-radius:20px;"><div>ここに本文を入力<br /> <br />ここに本文を入力</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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#8b5d38;border-radius:20px;"><div>ここに本文を入力<br /> <br />ここに本文を入力<br /> </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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#0028a0;border-radius:8px;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#b70b2e;border-radius:8px;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f782c9;border-radius:8px;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#f37620;border-radius:8px;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#248537;border-radius:8px;box-shadow:3px 3px 4px #999999;"><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:10px 10px 10px 10px;border-width:1px;border-style:solid;border-color:#8b5d38;border-radius:8px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ABOUT ME
