お手軽な囲み枠の使い方
WordPressの投稿記事にボタン一つで囲み枠を挿入する方法
使いたい囲み枠が見つかったら
- その下のコードボックスのタイトルバーの「<>」をクリックしてグレー背景・黒文字にしてから
- 「」をクリックして、コードを全選択します。
- 「Ctrl」+「C」キーを押してコピーして、ご自身のサイトに貼り付けてください。
※貼り付けるのは「テキスト」（HTML表示）のほうです。
※ボックス内でダブルクリックしてもグレー背景・黒文字になります。
- コピーして使える簡単な囲み枠①│タイトルなし│実践│白背景
- コピーして使える簡単な囲み枠②│タイトルなし│点線│白背景
- コピーして使える簡単な囲み枠③│タイトルなし│実線│カラー背景
- コピーして使える簡単な囲み枠④│タイトルなし│点線│カラー背景
- コピーして使える簡単な囲み枠⑤│タイトルなし│いろいろ
- コピーして使える簡単な囲み枠⑥│タイトルあり│実践│四角、角丸
- コピーして使える簡単な囲み枠⑦│タイトルあり│いろいろ
- コピーして使える簡単な囲み枠⑧│画像背景
塗りつぶし
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#0028a0;margin:5px 5px;padding:10px 10px 10px 10px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#0028a0;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#0028a0;font-size:16px;font-weight:bold;text-decoration:none;background:#f2f7fe;margin:5px 5px;padding:10px 10px 10px 10px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#0028a0;font-size:16px;font-weight:bold;text-decoration:none;background:#f2f7fe;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#b70b2e;margin:5px 5px;padding:10px 10px 10px 10px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#b70b2e;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#b70b2e;font-size:16px;font-weight:bold;text-decoration:none;background:#fef7f9;margin:5px 5px;padding:10px 10px 10px 10px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#b70b2e;font-size:16px;font-weight:bold;text-decoration:none;background:#fef7f9;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#f782c9;margin:5px 5px;padding:10px 10px 10px 10px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#f782c9;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#f37620 ;margin:5px 5px;padding:10px 10px 10px 10px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#f37620 ;margin:5px 5px;padding:10px 10px 10px 10px;box-shadow:3px 3px 4px #999999;"><d<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#f37620 ;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div>iv>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#248537 ;margin:5px 5px;padding:10px 10px 10px 10px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#248537 ;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#8b5d38;margin:5px 5px;padding:10px 10px 10px 10px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;background:#8b5d38;margin:5px 5px;padding:10px 10px 10px 10px;border-radius:20px;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#f2f7fe;font-size:16px;font-weight:bold;text-decoration:none;background:#0028a0 ;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#f2f7fe;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
二重線
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#f2f7fe;font-size:16px;font-weight:bold;text-decoration:none;background:#0028a0 ;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#f2f7fe;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#fef7fc;font-size:16px;font-weight:bold;text-decoration:none;background:#e44577;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#fef7fc;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#fef7fc;font-size:16px;font-weight:bold;text-decoration:none;background:#e44577;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#fef7fc;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#333333;font-size:14px;font-weight:normal;text-decoration:none;background:#FFFFFF;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#ffc065;border-radius:5px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#333333;font-size:14px;font-weight:normal;text-decoration:none;background:#FFFFFF;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#86d3dd;border-radius:5px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#333333;font-size:14px;font-weight:normal;text-decoration:none;background:#FFFFFF;margin:5px 5px;padding:10px 10px 10px 10px;border-width:4px;border-style:double;border-color:#d8bcf4;border-radius:5px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
隆起
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#b77c25;font-size:16px;font-weight:bold;text-decoration:none;background:#fef9e5;margin:5px 5px;padding:10px 10px 10px 10px;border-width:5px;border-style:outset;border-color:#d08f48;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#b77c25;font-size:16px;font-weight:bold;text-decoration:none;background:#fef9e5;margin:5px 5px;padding:10px 10px 10px 10px;border-width:5px;border-style:outset;border-color:#d08f48;border-radius:20px;box-shadow:3px 3px 4px #999999;"><div>ここに本文を入力</div></div> |
グラデーション
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(#f7fbfc,#d9edf2,#add9e4); background-color: #eeffff; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 1px solid #add9e4; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力</div> |
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(#fff7fb,#ffedf5,#fcd2e4); background-color: #eeffff; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 1px solid #fcd2e4; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力</div> |
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(#fffcf5,#fcf4d9,#fff0c2); background-color: #eeffff; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 1px solid #fff0c2; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力</div> |
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 2 3 4 |
<div style="background-image: linear-gradient(#f4faf2,#edffe8,#dbfad2); background-color: #eeffff; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 1px solid #dbfad2; box-shadow: 5px 5px 5px #AAA;">ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力<br /> ここに本文を入力</div> |
ここに本文を入力
|
1 |
<div style="padding: 20px; background: #fff; box-shadow: 0 0 50px #9ef4ff inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #9ef4ff inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #9ef4ff inset, 5px 5px 0 #cecece;">ここに本文を入力</div> |
ここに本文を入力
|
1 |
<div style="padding: 20px; background: #fff; box-shadow: 0 0 50px #ffd1e6 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #ffd1e6 inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #ffd1e6 inset, 5px 5px 0 #cecece;">ここに本文を入力</div> |
ここに本文を入力
|
1 |
<div style="padding: 20px; background: #fff; box-shadow: 0 0 50px #fffb87 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #fffb87 inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #fffb87 inset, 5px 5px 0 #cecece;">ここに本文を入力</div> |
ステッチ
ここに本文を入力
|
1 2 |
<div style="color: #fff; background: #db7d96; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #db7d96, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 5px #db7d96, 0 2px 3px 5px rgba(0,0,0,0.5); box-shadow: 0 0 0 5px #db7d96, 0 2px 3px 5px rgba(0,0,0,0.5); font-size: 90%;">ここに本文を入力 </div> |
ここに本文を入力
|
1 2 |
<div style="color: #fff; background: #a18460; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #a18460, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 5px #a18460, 0 2px 3px 5px rgba(0,0,0,0.5); box-shadow: 0 0 0 5px #a18460, 0 2px 3px 5px rgba(0,0,0,0.5); font-size: 90%;">ここに本文を入力 </div> |
ここに本文を入力
|
1 2 |
<div style="color: #fff; background: #6d96b5; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #6d96b5, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 5px #6d96b5, 0 2px 3px 5px rgba(0,0,0,0.5); box-shadow: 0 0 0 5px #6d96b5, 0 2px 3px 5px rgba(0,0,0,0.5); font-size: 90%;">ここに本文を入力 </div> |
ここに本文を入力
|
1 2 3 |
<div style="color: #fff; background: #db7d96; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #db7d96; -moz-box-shadow: 0 0 0 5px #db7d96; -webkit-box-shadow: 0 0 0 5px #db7d96;; font-size: 90%;"> ここに本文を入力 </div> |
ここに本文を入力
|
1 2 3 |
<div style="color: #fff; background: #a18460; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #a18460; -moz-box-shadow: 0 0 0 5px #a18460; -webkit-box-shadow: 0 0 0 5px #a18460;; font-size: 90%;"> ここに本文を入力 </div> |
ここに本文を入力
|
1 2 3 |
<div style="color: #fff; background: #6d96b5; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #6d96b5; -moz-box-shadow: 0 0 0 5px #6d96b5; -webkit-box-shadow: 0 0 0 5px #6d96b5;; font-size: 90%;"> ここに本文を入力 </div> |
ABOUT ME
