こんにちは、Yotsu（@Yotsublog）です。
ブログ記事におしゃれな囲み枠を作りたい！
難しいのはいやだからとにかく簡単がいいな…
そんな方にぴったりの記事です。
本記事では、コピペするだけでWordPressにおしゃれな囲み枠を作成できるサンプルコードを紹介します。
WordPressの記事編集画面にコピペするだけなので、CSSファイルの編集なども必要ありません。
WordPress記事への貼り付け方法・囲み枠のカスタマイズ方法は以下で解説しています。
>> WordPress記事に囲み枠を作成する方法【コピペで記事に貼るだけ】
コピペでうまく表示されない時の対処法も記載しているので、チェックしてみてください。
それでは、さっそくみていきましょう。
シンプルな囲み枠【コピペOK！】
シンプルな囲み枠をみていきましょう。
各系統の色で作成しているので、あなたのブログに合う色を選んでみてください。
シンプル囲み枠（モノトーン系）
・モノトーンシンプル
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F7F7F7; border: 1px solid #A1A1A1; padding: 10px; ">ここに文章を入力します</div>
・モノトーン背景のみ
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F7F7F7; padding: 10px; ">ここに文章を入力します</div>
・モノトーン二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F7F7F7; border: 7px double #A1A1A1; padding: 10px;">ここに文章を入力します</div>
・モノトーン影付き
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F7F7F7; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;">ここに文章を入力します</div>
・モノトーン浮き出し
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F7F7F7; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;">ここに文章を入力します</div>
・モノトーン枠付二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div>
・モノトーン枠付二重線（白枠）
ここに文章を入力します
記事に貼るだけ！
<div style="background: #DCDCDC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #DCDCDC; padding: 10px;">ここに文章を入力します</div>
シンプル囲み枠（青系）
・青系シンプル
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F0F8FF; border: 1px solid #6091D3; padding: 10px;">ここに文章を入力します</div>
・青系二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F0F8FF; border: 7px double #6091D3; padding: 10px;">ここに文章を入力します</div>
・青系影付き
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F0F8FF; border: 1px solid transparent; border-radius: 5px; box-shadow: 3px 3px 5px 1px #778899; padding: 10px;">ここに文章を入力します</div>
・青系浮き出し
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F0F8FF; border: 1px solid #6091D3; box-shadow: 5px 5px 0 0 #778899; padding: 10px;">ここに文章を入力します</div>
・青系枠付二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #F0F8FF; border: 4px double #6091D3; box-shadow: 0 0 0 10px #F0F8FF; padding: 10px;">ここに文章を入力します</div>
・青系枠付二重線（白枠）
ここに文章を入力します
記事に貼るだけ！
<div style="background: #A1D8E6; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #A1D8E6; padding: 10px;">ここに文章を入力します</div>
シンプル囲み枠（赤系）
・赤系シンプル
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF4F4; border: 1px solid #EA5532; padding: 10px;">ここに文章を入力します</div>
・赤系背景のみ
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF4F4; padding: 10px;">ここに文章を入力します</div>
・赤系二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF4F4; border: 7px double #EA5532; padding: 10px;">ここに文章を入力します</div>
・赤系影付き
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF4F4; border-radius: 5px; box-shadow: 3px 3px 3px 1px #8B0000; padding: 10px;">ここに文章を入力します</div>
・赤系浮き出し
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF4F4; border: 1px solid #EA5532; box-shadow: 5px 5px 0 0 #8B0000; padding: 10px;">ここに文章を入力します</div>
・赤系枠付二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF4F4; border: 4px double #EA5532; box-shadow: 0 0 0 10px #FFF4F4; padding: 10px;">ここに文章を入力します</div>
・赤系枠付二重線（白枠）
ここに文章を入力します
記事に貼るだけ！
<div style="background: #CD5C5C; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #CD5C5C; padding: 10px;"><span style="color: #FFFFFF;">ここに文章を入力します</span></div>
シンプル囲み枠（緑系）
・緑系シンプル
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAFFEA; border: 1px solid #43A047; padding: 10px;">ここに文章を入力します</div>
・緑系背景のみ
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAFFEA; padding: 10px;">ここに文章を入力します</div>
・緑系二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAFFEA; border: 7px double #43A047; padding: 10px;">ここに文章を入力します</div>
・緑系影付き
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAFFEA; border-radius: 5px; box-shadow: 3px 3px 3px 1px #556B2F; padding: 10px;">ここに文章を入力します</div>
・緑系浮き出し
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAFFEA; border: 1px solid #43A047; box-shadow: 5px 5px 0 0 #556B2F; padding: 10px;">ここに文章を入力します</div>
・緑系枠付二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAFFEA; border: 4px double #43A047; box-shadow: 0 0 0 10px #EAFFEA; padding: 10px;">ここに文章を入力します</div>
・緑系枠付二重線（白枠）黒板風
ここに文章を入力します
記事に貼るだけ！
<div style="background: #2E8B57; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #2E8B57; padding: 10px;"><span style="color: #FFFFFF;">ここに文章を入力します</span>
シンプル囲み枠（ピンク系）
・ピンク系シンプル
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF9FF; border: 1px solid #F5B1AA; padding: 10px;">ここに文章を入力します</div>
・ピンク系背景のみ
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF9FF; padding: 10px;">ここに文章を入力します</div>
・ピンク系二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF9FF; border: 7px double #F5B1AA; padding: 10px;">ここに文章を入力します</div>
・ピンク系影付き
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF9FF; border-radius: 5px; box-shadow: 3px 3px 3px 1px #CC3366; padding: 10px;">ここに文章を入力します</div>
・ピンク系浮き出し
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF9FF; border: 1px solid #F5B1AA; box-shadow: 5px 5px 0 0 #CC3366; padding: 10px;">ここに文章を入力します</divFFF9FF
・ピンク系枠付二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFF9FF; border: 4px double #F5B1AA; box-shadow: 0 0 0 10px #FFF9FF; padding: 10px;">ここに文章を入力します</div>
・ピンク系枠付二重線（白枠）黒板風
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FF99CC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #FF99CC; padding: 10px;"><span style="color: #ffffff;">ここに文章を入力します</span></div>
シンプル囲み枠（黄色系）
・黄色系シンプル
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFAF0; border: 1px solid #E69A00; padding: 10px;">ここに文章を入力します</div>
・黄色系背景のみ
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFAF0; padding: 10px;">ここに文章を入力します</div>
・黄色系二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFAF0; border: 7px double #E69A00; padding: 10px;">ここに文章を入力します</div>
・黄色系影付き
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFAF0; border-radius: 5px; box-shadow: 3px 3px 3px 1px #CC9900; padding: 10px;">ここに文章を入力します</div>
・黄色系浮き出し
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFAF0; border: 1px solid #E69A00; box-shadow: 5px 5px 0 0 #CC9900; padding: 10px;">ここに文章を入力します</div>
・黄色系枠付二重線
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFAF0; border: 4px double #E69A00; box-shadow: 0 0 0 10px #FFFAF0; padding: 10px;">ここに文章を入力します</div>
・黄色系枠付二重線（白枠）
ここに文章を入力します
記事に貼るだけ！
<div style="background: #E69A00; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #E69A00; padding: 10px;"><span style="color: #ffffff;">ここに文章を入力します</span></div>
ステッチ風の囲み枠【コピペOK！】
ステッチ風はかわいいイメージのデザインです。
・ステッチ風①
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFFEA; border: 2px dashed #FFBF7F; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;">ここに文章を入力します</div>
・ステッチ風①角丸
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFFFEA; border: 2px dashed #FFBF7F; border-radius: 5px; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;">ここに文章を入力します</div>
・ステッチ風②
ここに文章を入力します
記事に貼るだけ！
<div style="background: #E0EFFF; border: 2px dashed #6495ED; box-shadow: 0 0 0 10px #E0EFFF; padding: 10px;">ここに文章を入力します</div>
・ステッチ風②角丸
ここに文章を入力します
記事に貼るだけ！
<div style="background: #E0EFFF; border: 2px dashed #6495ED; border-radius: 5px; box-shadow: 0 0 0 10px #E0EFFF; padding: 10px;">ここに文章を入力します</div>
・ステッチ風③
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFEAFF; border: 2px dashed #FFFFFF; box-shadow: 0 0 0 10px #FFEAFF; padding: 10px;">ここに文章を入力します</div>
・ステッチ風③角丸
ここに文章を入力します
記事に貼るだけ！
<div style="background: #FFEAFF; border: 2px dashed #FFFFFF; border-radius: 5px; box-shadow: 0 0 0 10px #FFEAFF; padding: 10px;">ここに文章を入力します</div>
・ステッチ風④
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAEAFF; border: 2px dashed #FFFFFF; box-shadow: 0 0 0 10px #EAEAFF; padding: 10px;">ここに文章を入力します</div>
・ステッチ風④角丸
ここに文章を入力します
記事に貼るだけ！
<div style="background: #EAEAFF; border: 2px dashed #FFFFFF; border-radius: 5px; box-shadow: 0 0 0 10px #EAEAFF; padding: 10px;">ここに文章を入力します</div>
メモ帳風の囲み枠【コピペOK！】
メモ帳風デザインもかなり使いやすいのではないでしょうか。一押しです！
・モノトーンメモ帳
ここに文章を入力します
ここに文章を入力します
ここに文章を入力します
上と下は同じコードです。
一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行
記事に貼るだけ！
<div style="display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;">
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 1px #A1A1A1;">文字が少ない行</div>
</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 1px #A1A1A1;">文字が少ない行</div>
</div>
・わら半紙風アンダーライン実線
一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行
記事に貼るだけ！
<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: solid 1px #ECE1B9;">文字が少ない行</div>
</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: solid 1px #ECE1B9;">文字が少ない行</div>
</div>
・わら半紙風アンダーライン破線（太）
一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行
記事に貼るだけ！
<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 2px #ECE1B9;">文字が少ない行</div>
</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 2px #ECE1B9;">文字が少ない行</div>
</div>
・わら半紙風アンダーライン破線（細）
一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行
記事に貼るだけ！
<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 1px #ECE1B9;">文字が少ない行</div>
</div>
<div style="border-bottom: dashed 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 1px #ECE1B9;">文字が少ない行</div>
</div>
・わら半紙風枠付き二重線
一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行文字の
記事に貼るだけ！
<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #FFF8DC; border: double 3px #ECE1B9;">
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: solid 1px #ECE1B9;">文字が少ない行文字の</div>
</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: solid 1px #ECE1B9;">文字が少ない行文字の</div>
</div>
まとめ：コピペしてどんどん使ってください
いかがでしたでしょうか。
今回は、WordPressにコピペだけで使えるおしゃれな囲み枠を紹介しました。
このまま使うもよし、アレンジして使うもよしです！
ブログのポイントで囲み枠を使って、良いアクセントにしてみてください！
今回は、以上です。
コメント