コピペだけで使える囲み枠デザインをご紹介します。
装飾は全体の記事の構成やその記事のターゲットに届ける内容で囲み枠のデザインを選ぶといいですね。
また、コードはAddQuicktag(アドクイックタグ)に設置しておけば簡単に繰り返し使えます！
▶WordPressプラグインAddQuicktagの使い方！おすすめ設定も！
関連記事
点線囲み枠
■ここにテキストを入力■
|
1 |
<div style="border-radius: 1px; border: 4px dotted #ffb6c1; font-size: 100%; padding: 20px;">■ここにテキストを入力■</div> |
■ここにテキストを入力■
|
1 |
<div style="border-radius: 1px; border: 4px dotted #00fa9a; font-size: 100%; padding: 20px;">■ここにテキストを入力■</div> |
■ここにテキストを入力■
|
1 |
<div style="border-radius: 1px; border: 4px dotted #800080; font-size: 100%; padding: 20px;">■ここにテキストを入力■</div> |
付箋的な囲み枠
■ここにテキストを入力■
|
1 2 |
<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ■ここにテキストを入力■</div> |
■ここにテキストを入力■
|
1 2 |
<div style="border: #ff8c00 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #f5deb3; font-size: 100%;"> ■ここにテキストを入力■</div> |
■ここにテキストを入力■
|
1 2 |
<div style="border: #0000cd solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #e6e6fa; font-size: 100%;"> ■ここにテキストを入力■</div> |
タイトル付きの囲み枠
|
1 2 |
<fieldset style="border: 1px solid #ff6699; font-size: 100%;padding: 20px;"> <legend>タイトル</legend>■ここにテキストを入力■</fieldset> |
1pxの数字を 5pxに変えると、このように枠線を太くすることができます。
|
1 2 |
<fieldset style="border: 5px solid #ff6699; font-size: 100%;padding: 20px;"> <legend>タイトル</legend>■ここにテキストを入力■</fieldset> |
縫製的な囲み枠
■ここにテキストを入力■
|
1 2 |
<div style=" background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 100%; "> ■ここにテキストを入力■ |
かわいいドットの囲み枠
■ここにテキストを入力■
|
1 2 3 |
<div style="background: #fceff2; background-image: radial-gradient(#ffc0cb 10%, transparent 20%), radial-gradient(#ffc0cb 10%, transparent 20%);background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
■ここにテキストを入力■
|
1 2 3 |
<div style="background: #fceff2; background-image: radial-gradient(#fce3e9 10%, transparent 20%), radial-gradient(#fce3e9 10%, transparent 20%);background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
■ここにテキストを入力■
|
1 2 3 |
<div style="background: #ffff00; background-image: radial-gradient(#fce3e9 10%, transparent 20%), radial-gradient(#fce3e9 10%, transparent 20%);background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
■ここにテキストを入力■
|
1 2 3 |
<div style="background: #ffe6ea; background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
■ここにテキストを入力■
|
1 2 3 |
<div style="background: #fceff2; background-image: radial-gradient(#fff 10%, transparent 30%), radial-gradient(#fff 10%, transparent 30%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
ストライプの囲み枠
■ここにテキストを入力■
|
1 2 3 4 |
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 20px 20px;font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
■ここにテキストを入力■
|
1 2 3 4 |
<div style="background-image: linear-gradient( -45deg, #fff 25%, #ffe5f2 25%,#ffe5f2 50%, #fff 50%, #fff 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 5px 5px;font-size: 100%; padding: 20px;"> ■ここにテキストを入力■ </div> |
グラデーション囲み枠
■ここにテキストを入力■
|
1 2 3 |
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;"> ■ここにテキストを入力■ </div> |
■ここにテキストを入力■
|
1 2 3 |
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #87ceeb inset, 5px 5px 0 #cecece; font-size: 100%;"> ■ここにテキストを入力■ </div> |
囲み枠の色を変える方法
色を変えたいときは、「#」以降の英数字（カラーコード）を変更します。カラーコードはこちらで調べられます。
囲み枠の大きさを変える方法
「font-size: 100%;」の数字を変えると文字の大きさが変わります。
少し小さめにしたい場合は95％とか、85%にするといいですね♬
