お手軽な囲み枠の使い方
WordPressの投稿記事にボタン一つで囲み枠を挿入する方法
使いたい囲み枠が見つかったら
- その下のコードボックスのタイトルバーの「<>」をクリックしてグレー背景・黒文字にしてから
- 「」をクリックして、コードを全選択します。
- 「Ctrl」+「C」キーを押してコピーして、ご自身のサイトに貼り付けてください。
※貼り付けるのは「テキスト」（HTML表示）のほうです。
※ボックス内でダブルクリックしてもグレー背景・黒文字になります。
- コピーして使える簡単な囲み枠①│タイトルなし│実践│白背景
- コピーして使える簡単な囲み枠②│タイトルなし│点線│白背景
- コピーして使える簡単な囲み枠③│タイトルなし│実線│カラー背景
- コピーして使える簡単な囲み枠④│タイトルなし│点線│カラー背景
- コピーして使える簡単な囲み枠⑤│タイトルなし│いろいろ
- コピーして使える簡単な囲み枠⑥│タイトルあり│実践│四角、角丸
- コピーして使える簡単な囲み枠⑦│タイトルあり│いろいろ
- コピーして使える簡単な囲み枠⑧│画像背景
二重線│角丸│白背景
◆ここにタイトル◆
ここに本文を入力
|
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:16px 10px 10px 10px;border-width:4px;border-style:double;border-color:#0028a0 ;border-radius:10px;"><div style="position:absolute;line-height:1.0;color:#0028a0 ;font-size:16px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;"> ここにタイトル </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:16px 10px 10px 10px;border-width:4px;border-style:double;border-color:#b70b2e ;border-radius:10px;"><div style="position:absolute;line-height:1.0;color:#b70b2e ;font-size:16px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;"> ◆ここにタイトル◆ </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:16px 10px 10px 10px;border-width:4px;border-style:double;border-color:#f782c9 ;border-radius:10px;"><div style="position:absolute;line-height:1.0;color:#f782c9 ;font-size:16px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;"> ◆ここにタイトル◆ </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:16px 10px 10px 10px;border-width:4px;border-style:double;border-color:#f37620 ;border-radius:10px;"><div style="position:absolute;line-height:1.0;color:#f37620 ;font-size:16px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;"> ◆ここにタイトル◆ </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:16px 10px 10px 10px;border-width:4px;border-style:double;border-color:#248537 ;border-radius:10px;"><div style="position:absolute;line-height:1.0;color:#248537 ;font-size:16px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;"> ◆ここにタイトル◆ </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:16px 10px 10px 10px;border-width:4px;border-style:double;border-color:#8b5d38 ;border-radius:10px;"><div style="position:absolute;line-height:1.0;color:#8b5d38 ;font-size:16px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;"> ◆ここにタイトル◆ </div><div>ここに本文を入力</div></div> |
枠の中にタイトル│塗りつぶし
◆ここにタイトル◆
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#f2f7fe;font-size:16px;font-weight:normal;text-decoration:none;background:#0028a0;margin:5px 5px;padding:40px 10px 10px 10px;border-radius:8px;"><div style="position:absolute;line-height:1.0;color:#0028a0;font-size:16px;font-weight:bold;text-decoration:none;background:#f2f7fe;padding:5px 10px;border-radius:20px;left:10px;top:8px;">◆ここにタイトル◆</div><div>ここに本文を入力<br />ここに本文を入力 <br />ここに本文を入力</div></div> |
◆ここにタイトル◆
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#fef7f9;font-size:16px;font-weight:normal;text-decoration:none;background:#b70b2e;margin:5px 5px;padding:40px 10px 10px 10px;border-radius:8px;"><div style="position:absolute;line-height:1.0;color:#b70b2e;font-size:16px;font-weight:bold;text-decoration:none;background:#fef7f9;padding:5px 10px;border-radius:20px;left:10px;top:8px;">◆ここにタイトル◆</div><div>ここに本文を入力<br />ここに本文を入力 <br />ここに本文を入力</div></div> |
◆ここにタイトル◆
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#fef7fc;font-size:16px;font-weight:normal;text-decoration:none;background:#f782c9;margin:5px 5px;padding:40px 10px 10px 10px;border-radius:8px;"><div style="position:absolute;line-height:1.0;color:#f782c9;font-size:16px;font-weight:bold;text-decoration:none;background:#fef7fc;padding:5px 10px;border-radius:20px;left:10px;top:8px;">◆ここにタイトル◆</div><div>ここに本文を入力<br />ここに本文を入力 <br />ここに本文を入力</div></div> |
◆ここにタイトル◆
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#fefbf7;font-size:16px;font-weight:normal;text-decoration:none;background:#f37620;margin:5px 5px;padding:40px 10px 10px 10px;border-radius:8px;"><div style="position:absolute;line-height:1.0;color:#f37620;font-size:16px;font-weight:bold;text-decoration:none;background:#fefbf7;padding:5px 10px;border-radius:20px;left:10px;top:8px;">◆ここにタイトル◆</div><div>ここに本文を入力<br />ここに本文を入力 <br />ここに本文を入力</div></div> |
◆ここにタイトル◆
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#f9fef7;font-size:16px;font-weight:normal;text-decoration:none;background:#248537;margin:5px 5px;padding:40px 10px 10px 10px;border-radius:8px;"><div style="position:absolute;line-height:1.0;color:#248537;font-size:16px;font-weight:bold;text-decoration:none;background:#f9fef7;padding:5px 10px;border-radius:20px;left:10px;top:8px;">◆ここにタイトル◆</div><div>ここに本文を入力<br />ここに本文を入力 <br />ここに本文を入力</div></div> |
◆ここにタイトル◆
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
|
1 |
<div style="position:relative;word-break:break-all;color:#fbf8f5;font-size:16px;font-weight:normal;text-decoration:none;background:#8b5d38;margin:5px 5px;padding:40px 10px 10px 10px;border-radius:8px;"><div style="position:absolute;line-height:1.0;color:#8b5d38;font-size:16px;font-weight:bold;text-decoration:none;background:#fbf8f5;padding:5px 10px;border-radius:20px;left:10px;top:8px;">◆ここにタイトル◆</div><div>ここに本文を入力<br />ここに本文を入力 <br />ここに本文を入力</div></div> |
ABOUT ME
