WordPressの文章を彩るブロック、囲み枠・装飾枠はどうやって作るの?
wordpressをオシャレにしたいのに出来ない方の必殺技!かわいい囲み枠をコピペで作ろうです。
CSSのコードをコピペするだけなので、初心者さんにも簡単にできます。
オシャレなブロックや印象に残るブロックを、作りたい!を叶えるCSSコードとHTMLコードです。
- ワードプレス初心者で専門的なこと分からない
- ワードプレスの飾り枠の作り方が知りたい
- ブログの囲み枠の作り方
- 囲み枠を作りたいけど簡単にコピペで出来る方法知りたい
- WordPressのブログをデフォルトでなく他の方と違ったところ作りたい
ドットの囲み枠や、点線の囲み枠にポイントになる囲み枠デザインになってます。
ブログ初心者の方にも、すぐ使えるようになっていますので、ぜひ挑戦してみて下さいね。

私自身初心者ながら、ブログの装飾に興味を持ちコピペから始まり、今は色々と作れるようになっています。
\可愛い印象のデザイン枠はコチラ!/
おしゃれな点線(ドット)ブロックの作成方法!手順
デザイン囲み枠、ブロックを作るには、はじめは作るために登録が必要です。
- STEP1CSSコードをコピーこのページの好きな囲み枠のCSSをコピー
- STEP2スタイルに貼り付けワードプレスの外観➤テーマファイルエディタ➤style sheetにペースト貼り付け
- STEP3HTMLコード貼る記事編集でHTMLコードを貼り付ける。またはブロックの高度な設定にて、囲み枠を記事に作成する
- STEP4次から貼り付けやすく再利用ブロックを作成しておく、またはクラシックエディタでQuicktag登録しておく
一度作れば、次からは簡単に貼り付けられるようになります。
簡単CSSコピペで囲み枠を作る詳しい作成方法は、こちらへ
点線ドット囲み枠デザインとオシャレにするデザイン装飾枠
点線の囲み枠デザイン7選と、おしゃれな囲み枠デザインを集めました。
好みの色や形にカスタマイズしてみて、オリジナリティのあるサイトにしてみて下さいね。
ここに文章を入力する
ここに文字を入力する
ここに
文章を入力する
ここに文字を入力
左上にずらしたタイトルボックス
ここに文章
ここに文章を入力する!目立たせるポイント
ここに本文を入力します。
\オシャレにする、タイトル付き・タブ付き囲み枠やラベル囲み枠。かわいい囲み枠/⇩紹介
初心者もコピペで簡単!かわいい点線囲み枠のCSSコードとHTMLコード
ドットブロックのCSSコードと、記事に貼るHTMLコードです。
かわいい感じにするなら、淡い色のドット枠を使うことで優しい印象になります。
コピペで簡単にできるために、ブログ初心者やWebライター初心者にもオススメです。
カスタマイズしやすいように、色や線の太さなどの変更箇所を記載していますので、ぜひサイトに合った囲み枠を作ってみて下さい。
点線ドット囲み枠<ピンク>
点線の丸いドットで囲んだボックスです。
少し広めの余白を取っているので、中にある文章が見やすくなっています。
お好みの色に変更して使ってください。
<div class="dot_box1">ここに文章を入力する。</div>
/**点線(ドット)ピンク**/
.dot_box1 {
margin: 2em auto;
padding:2em;/**内側余白**/
border:dotted 3px #e2c2b3;/**線の種類 太さ 色**/
}
点線ドット囲み枠の背景色あり<ピンク>
ドットの囲み枠に背景も付けて、少し影を付けて立体感を出したデザインになっています。
影を消してシンプル囲み枠にも、背景の色を薄くしてと、色々と変更可能なデザインコードです。
色違いやデザイン変更と揃えておきたい、シンプル囲み枠から、こだわりまで楽しめるデザインなっています。
<div class="dot_box2">ここに本文を入力します。</div>
/**外枠が点線の囲み枠**/
.dot_box2 {
padding: 1em 1.5em;
margin: 2em 0;
margin: 1.5em auto;
background: #fff7f9; /* 背景色 /
border: 2px dashed #f79eb6; / **線の色** /
width: 95%; box-shadow: 2px 5px 5px #fff7f9; /**影の色**/
}
.dot_box2 p {
margin: 0;
padding: 1em;
}
かわいいドット囲み枠・ミシン目のようなデザイン枠『くすみピンク』
オシャレでかわいい、くすみカラーの囲み枠です。
優しい印象になる色で、囲み枠も丸みを付けて、より一層かわいいデザインにしてます。
<div class="dot_box3">ここに文章</div>
/点線囲みピンク/
.dot_box3 {
padding: 1em 1.5em;
margin: 2em 0;
color: #565656;/**文字の色**/
background: #f7efeb;/**背景色**/
box-shadow: 0px 0px 0px 7px #f7efeb;/**ボックス影の色**/
border: dashed 2px #c4ada1;/**点線種類 *太さ *点線の色**/
border-radius: 9px;
}
.dot_box3 p {
margin: 0;
padding: 0;
}
丸みのある点線囲み枠。可愛いドット『オレンジ』
上のくすみピンクの色違いです。
ピンクより明るめで、目立たせたい時に使いやすいデザイン。
<div class="dot_box4">ここに文字を入力</div>
/**点線囲みオレンジ**/
.dot_box4 {
padding: 1em 1.5em;
margin: 2em 0;
background-color: #fff4ea;/**背景色**/
box-shadow: 0 0 0 7px #fff4ea;/**背景色外側**/
border: 2px dashed #ffbf7f;/**線太さ 形 **/
border-radius: 9px;/**角の丸み**/
color: #000000;/**文字色**/
}
.dot_box4 p {
margin: 0;
padding: 0;
}
茶色の点線ドットの囲み枠でふんわり印象
ふんわりとした印象になる、茶色のステッチ風の囲み枠デザインです。
赤では派手だけど、協調しすぎない程度で少し印象付けたい時に、特に利用しやすい枠になります。
<div class="dot_box5">茶色の点線ステッチの囲み枠デザイン。</div>
/** 茶ステッチ点線囲み枠**/
.dot_box5{
margin: 2em auto;
padding:2em;/**内側余白**/
position: relative; padding:1.5em !important;
z-index: 0;
background-color:#F5F1E8;/**背景色**/
}
.dot_box5:before{
position: absolute;
border: 2px dashed #A7A297;/**破線の太さ 色**/
content: ”;
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:4px;
z-index: -1;
border-radius:10px;
}
おしゃれなポイント囲み枠!初心者もコピペで簡単CSSとHTMLコード
普通の囲み枠やタブブロックとは少し変化をつけて、デフォルトのものよりもオシャレな感じになる、デザインブロックをご紹介します。
他の方が使ってない感じで、ブログを書きたい方にオススメです。
落ち着いた感じにしたい時には、カラー変更で楽しんでみて下さい。
タイトル付きタブ囲み枠を少しずらした囲みデザイン枠
ここに文章を入力する
通常のタブボックスでは少し物足りない。
少しバランス良いタブボックスを作りたい!そんな時に使ってみて下さい。
シンプルなのに、少しタブをずらしているだけで、文章メリハリが付いてオシャレな感じになります。
<div class="tab_box1">
<div class="box-title">ここにタイトルを入力します</div>
ここに文章を入力する</div>
/**左上にずらしたタブボックス背景色あり**/
.tab_box1{
margin: 2em auto; /**ボックスの余白**/
background-color: #fafafa; /**ボックス背景色**/
padding:3em 2em 2em; /**ボックス内側余白**/
position:relative; /**配置(ここを基準に)**/
border: 1px solid #5a728b; /**ボックスの線 (太さ 種類 色)**/
}
.tab_box1 .box-title {
background-color:#5a728b; /**タイトル背景色**/
font-size: 1em;/**タイトル文字の大きさ**/
color: #fff ; /**タイトル文字色**/
padding: 7px 10px;/**タイトルの余白**/
line-height: 1;/**タイトルの行の高さ**/
position:absolute; /**配置(ここを動かす)**/
top: -10px; /**上から(0px)移動**/
left: 20px; /**左から(0px)移動**/
}
両端に三角のアクセントを付けたデザイン枠『くすみグリーン』
囲み枠にポイントとなる両端に三角があることで、細い枠でもオシャレで目につくボックスになります。
好きな色にして楽しんでみて下さい。
<div class="point_box">ここに文章を入力する。</div>
/**両端に三角形をつける**/
.point_box{
margin: 2em auto;
padding:2em;
position: relative;
border:1px solid #c6d4c6;
}
.point_box:before{
border-bottom:30px solid transparent;
border-left:30px solid #c6d4c6;
content: ”;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.point_box:after{
border-left:30px solid transparent;
border-bottom:30px solid #c6d4c6;
content: ”;
display: block;
position: absolute;
bottom: 0px;
right: 0px;
}
考え事の吹き出しのデザイン囲み枠<黄色>
ここに文章
Q&Aに使う事も出来きます。
たとえば、読者・閲覧者の疑問を書き込み、その下に解決する内容を書いていく使い方もできるのです。
<div class="speech_box">
ここに文章
</div>
/**考え事黄色**/
.speech_box {
position: relative;
margin: 2em 0 2em 40px;
padding: 8px 15px;
background: #fff0c6;/**背景色**/
border-radius: 30px;
}
.speech_box:before{
font-family: “Font Awesome 5 Free”;
content: “\f111”;/**アイコン**/
font-weight: 900;
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #fff0c6;/**アイコンカラー**/
}
.speech_box:after{
font-family: “Font Awesome 5 Free”;
content: “\f111”;/**アイコン種類**/
font-weight: 900;
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #fff0c6;
}
.speech_box p {
margin: 0;
padding: 0;
}
吹き出しデザイン枠<青色>文字幅囲み枠
吹き出しデザイン枠ですが、通常のブロック幅でなく、入力の文字幅となっています。
記事の途中にあると、見出しのようにも使えて便利です。
<div class="speech_box1">
ここに文章
</div>
/**吹き出し青**/
.speech_box1 {
position: relative;
display: inline-block;/**おまじない**/
padding: 0.5em 0.7em;
margin: 2em 0;
background: #e6f4ff;/**背景色**/
color: #5c98d4;/**文字カラー**/
font-weight: bold;
}
.speech_box1:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e6f4ff;
width: 0;
height: 0;
}
.speech_box1 p {
margin: 0;
padding: 0;
}
ホワイトボード風の飾り枠
ここに本文を入力します。
ホワイトボード白板風のデザインで、リストを中に書いたり、まとめを書いたりとポイントとして使うこともできます。
また、背景色を変更すれば、黒板風にアレンジ可能です。
<div class="board_box"><span class="board_box-title">タイトル</span> <br />ここに本文を入力します。
</div>
/**ボード風の囲み枠**/
.board_box {
position: relative;
margin: 2em auto;
padding: 2em 1em 1em;
width: 90%;
background: #fffff9; /**ボックス背景色**/
border: 5px solid #f7cc88; /**枠の色**/
border-radius: 3px;
box-shadow: 0 0 8px #333, 0 0 2px #555 inset; /**影の色**/
}
.board_box::before,
.box13::after {
position: absolute;
content: ”;
width: 25px;
bottom: 3px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666; /** 影の色 **/
}
.board_box::before {
right: 55px;
border: solid 3px #8c8c8c; /**飾ペン黒 **/
}
.board_box::after {
right: 20px;
border: solid 3px #ffa3ce; /**飾ペンピンク **/
transform: rotate(8deg); /**飾ペン角度 **/
}
.board_box-title {
position: absolute;
padding: .1em .5em;
left: 1em;
top: .5em;
font-weight: bold;
font-size: 1.1em;
color: #ff9e9e; /**タイトル文字色**/
background: #fffff9; /**ボックス背景色**/
box-shadow: 1px 1px 3px #a0a0a0; /**影の色**/
}
大きめ点ドット囲み枠<黄色>
少し大きめの点、ドットの囲み枠です。
大きく目立たせたい時に利用したり、目次や箇条書きリストに使ったりできますね。
<div class="dot_box6">ここに文字を入力する</div>
/**黄色ドット囲み**/
.dot_box6 {
padding: 1em 1.5em;
margin: 2em 0;
background-color:#ffffe0;/**背景色**/
border: dotted 6px #e3e3b8;/**線**/
color:#000000;/**文字色**/
}
.dot_box6 p {
margin: 0;
padding: 0;
}
カッコ点線ドットの囲み枠デザイン<かっこ青色>
ここに
文章を入力する
ドットで作ったカッコの形を、両端に置いた囲み枠です。
ドットの大きさを変えたり、色を変えてみると、ブロックの印象が変わります。
<div class="dot_box7"> ここに
<p>文章を入力する</p> </div>
/**[点線]青**/
.dot_box7 {
position: relative;
padding: 0.25em 1em;
margin: 2em 0;
top: 0;
background: #edf6fa;
}
.dot_box7:before, .box20:after{
position: absolute;
top: 0;
content:”;
width: 10px;
height: 100%;
display: inline-block;
box-sizing: border-box;
}
.dot_box7:before{
border-left: dotted 4px #15adc1;
border-top: dotted 4px #15adc1;
border-bottom: dotted 4px #15adc1;
left: 0;
}
.dot_box7:after{
border-top: dotted 4px #15adc1;
border-right: dotted 4px #15adc1;
border-bottom: dotted 4px #15adc1;
right: 0;
}
.dot_box7 p {
margin: 0;
padding: 0;
}
点の囲み枠「くすみピンク」かわいいドット
1番の囲み枠のアレンジで、背景色を追加している形です。
<div class="dot_box8">
ここに文章を入力する
</div>
/**点(ドット)**/
.dot_box8 {
margin: 2em auto;
padding:2em;/**内側余白**/
border:dotted 3px #e2c2b3;/**線の種類 太さ 色**/
background: #c49d9d;/**背景色**/
}
表示がうまくいかない対処方法!飾り枠コードはどこに貼る?
- Q初心者が間違えやすいのは?チェックする箇所
- A
全角スペースを使ってる。半角英数字を使いましょう
:と;を間違って使っている。種類ごとのコード終わりは、;を使う。
{と}で、囲って閉じること。消えて抜けてしまってないかチェックする。
- Qカスタマイズ効かない時、表示されない対処方法は?
- A
キャッシュの削除をしてみる。
文法間違えがないか、チェックしましょう。
- QCSSやHTMLコードをチェックする便利なサイト?
- A
CSSコードやHTMLコードが半角英数字になっているか、チェックしてください。
CSSコード編集チェックもあります。W3C CSS 検証サービスがおすすめ
HTMLコードチェックには、W3C マークアップ検証サービスがおすすめです。
\コードの貼り付け方は、ここで詳しく/
オシャレ可愛い飾り枠を簡単コピペで出来る作り方のまとめ
はじめての方には、コードは何か分からない難しそうですが、簡単コピペするだけで作れてキレイな枠ができると嬉しくなります。
閲覧者・読者も見やすくて、ポイントを目立たせていることで、読みやすいです。
あれもこれもと使いたくなりますが、色をやパターンを決めて統一感を出すことが、記事作成の見やすくなるポイントになります。
点線の囲み枠や、ドットの囲み枠を使ってみてください。
こちらもオススメ、タイトル付きボックスやポイントアイコン付きボックスです。
こちらもコピペで、完成しますので、ぜひ参考にしてみてくださいね。
ここにテキスト
ここにテキスト
ここに文字を入力
ここに文字を入力
ここに文章
ここにテキスト
ここにテキスト
ここに文章
ここにテキスト
こちらの囲み枠は、次のページでコピペで出来るコードを紹介していますので、ゲットしましょう。