当サイトの記事にはプロモーションが含まれますPRについて

WordPressおしゃれな点線ドット囲み枠をCSSコードをコピペで作る

AD
WordPressのオシャレな囲み枠デザインブログWordPress

WordPressの文章を彩るブロック、囲み枠・装飾枠はどうやって作るの?

wordpressをオシャレにしたいのに出来ない方の必殺技!かわいい囲み枠をコピペで作ろうです。

CSSのコードをコピペするだけなので、初心者さんにも簡単にできます。

オシャレなブロックや印象に残るブロックを、作りたい!を叶えるCSSコードとHTMLコードです。

ワードプレスのページを見やすくオシャレに

    1. ワードプレス初心者で専門的なこと分からない
    2. ワードプレスの飾り枠の作り方が知りたい
    3. ブログの囲み枠の作り方
    4. 囲み枠を作りたいけど簡単にコピペで出来る方法知りたい
    5. WordPressのブログをデフォルトでなく他の方と違ったところ作りたい

ドットの囲み枠や、点線の囲み枠にポイントになる囲み枠デザインになってます。

ブログ初心者の方にも、すぐ使えるようになっていますので、ぜひ挑戦してみて下さいね。

私自身初心者ながら、ブログの装飾に興味を持ちコピペから始まり、今は色々と作れるようになっています。

\可愛い印象のデザイン枠はコチラ!/

AD

おしゃれな点線(ドット)ブロックの作成方法!手順

デザイン囲み枠、ブロックを作るには、はじめは作るために登録が必要です。

  • STEP1
    CSSコードをコピー
    このページの好きな囲み枠のCSSをコピー
  • STEP2
    スタイルに貼り付け
    ワードプレスの外観➤テーマファイルエディタ➤style sheetにペースト貼り付け
  • STEP3
    HTMLコード貼る
    記事編集でHTMLコードを貼り付ける。またはブロックの高度な設定にて、囲み枠を記事に作成する
  • STEP4
    次から貼り付けやすく
    再利用ブロックを作成しておく、またはクラシックエディタでQuicktag登録しておく

一度作れば、次からは簡単に貼り付けられるようになります。

簡単CSSコピペで囲み枠を作る詳しい作成方法は、こちらへ

点線ドット囲み枠デザインとオシャレにするデザイン装飾枠

点線の囲み枠デザイン7選と、おしゃれな囲み枠デザインを集めました。

好みの色や形にカスタマイズしてみて、オリジナリティのあるサイトにしてみて下さいね。

点線で囲んだボックス
ここに本文を記入します

ここに文章を入力する

ここに文字を入力する

茶系の糸で縫ったようなデザインです

ここに

文章を入力する

ここに文字を入力

ここにタイトルを入力します

左上にずらしたタイトルボックス

三角形のアクセントをつけたボックス
 

ここに文章

ここに文章を入力する!目立たせるポイント

タイトル
ここに本文を入力します。

\オシャレにするタイトル付きタブ付き囲み枠やラベル囲み枠。かわいい囲み枠/⇩紹介

初心者もコピペで簡単!かわいい点線囲み枠のCSSコードとHTMLコード

ドットブロックのCSSコードと、記事に貼るHTMLコードです。

かわいい感じにするなら、淡い色のドット枠を使うことで優しい印象になります。

コピペで簡単にできるために、ブログ初心者やWebライター初心者にもオススメです。

カスタマイズしやすいように、色や線の太さなどの変更箇所を記載していますので、ぜひサイトに合った囲み枠を作ってみて下さい。

点線ドット囲み枠<ピンク>

ここに文章を入力する

点線の丸いドットで囲んだボックスです。

少し広めの余白を取っているので、中にある文章が見やすくなっています。

お好みの色に変更して使ってください。

点線ドット囲み枠<ピンク>HTML
<div class="dot_box1">ここに文章を入力する。</div>
⇩のCSSコードタブをクリックして開く

/**点線(ドット)ピンク**/
.dot_box1 {
margin: 2em auto;
padding:2em;/**内側余白**/
border:dotted 3px #e2c2b3;/**線の種類 太さ 色**/
}

点線ドット囲み枠の背景色あり<ピンク>

ここに本文を入力します。

ドットの囲み枠に背景も付けて、少し影を付けて立体感を出したデザインになっています。

影を消してシンプル囲み枠にも、背景の色を薄くしてと、色々と変更可能なデザインコードです。

色違いやデザイン変更と揃えておきたい、シンプル囲み枠から、こだわりまで楽しめるデザインなっています。

点線ドット背景色あり<ピンク>HTML
<div class="dot_box2">ここに本文を入力します。</div>
⇩のCSSコードタブをクリックして開く

/**外枠が点線の囲み枠**/
.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;
}

かわいいドット囲み枠・ミシン目のようなデザイン枠『くすみピンク』

ここに文章

オシャレでかわいい、くすみカラーの囲み枠です。

優しい印象になる色で、囲み枠も丸みを付けて、より一層かわいいデザインにしてます。

かわいいドットの丸みのある囲み枠<ピンク>HTML
<div class="dot_box3">ここに文章</div>
⇩のCSSコードタブをクリックして開く

/点線囲みピンク/

.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;
}

丸みのある点線囲み枠。可愛いドット『オレンジ』

ここに文字を入力

上のくすみピンクの色違いです。

ピンクより明るめで、目立たせたい時に使いやすいデザイン。

丸みのある点線囲み枠<オレンジ>CSS
<div class="dot_box4">ここに文字を入力</div>
⇩のCSSコードタブをクリックして開く

/**点線囲みオレンジ**/

.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;
}

茶色の点線ドットの囲み枠でふんわり印象

茶色の点線ステッチの囲み枠デザイン。

ふんわりとした印象になる、茶色のステッチ風の囲み枠デザインです。

赤では派手だけど、協調しすぎない程度で少し印象付けたい時に、特に利用しやすい枠になります。

茶色のステッチ囲み枠のHTMLコード
<div class="dot_box5">茶色の点線ステッチの囲み枠デザイン。</div>
⇩のCSSコードタブをクリックして開く

/** 茶ステッチ点線囲み枠**/
.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コード

普通の囲み枠やタブブロックとは少し変化をつけて、デフォルトのものよりもオシャレな感じになる、デザインブロックをご紹介します。

他の方が使ってない感じで、ブログを書きたい方にオススメです。

落ち着いた感じにしたい時には、カラー変更で楽しんでみて下さい。

タイトル付きタブ囲み枠を少しずらした囲みデザイン枠

ここにタイトルを入力します

ここに文章を入力する

通常のタブボックスでは少し物足りない。

少しバランス良いタブボックスを作りたい!そんな時に使ってみて下さい。

シンプルなのに、少しタブをずらしているだけで、文章メリハリが付いてオシャレな感じになります。

タブを少しずらした囲み枠HTMLコード
<div class="tab_box1">
<div class="box-title">ここにタイトルを入力します</div>
ここに文章を入力する</div>
⇩のCSSコードタブをクリックして開く

/**左上にずらしたタブボックス背景色あり**/
.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)移動**/
}

両端に三角のアクセントを付けたデザイン枠『くすみグリーン』

ここに文章を入力する。

囲み枠にポイントとなる両端に三角があることで、細い枠でもオシャレで目につくボックスになります。

好きな色にして楽しんでみて下さい。

両端に三角のポイントを置いた囲み枠HTMLコード
<div class="point_box">ここに文章を入力する。</div>
⇩のCSSコードタブをクリックして開く

/**両端に三角形をつける**/
.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に使う事も出来きます。

たとえば、読者・閲覧者の疑問を書き込み、その下に解決する内容を書いていく使い方もできるのです。

考え事の吹き出しデザイン枠HTMLコード
<div class="speech_box">
ここに文章
</div>
⇩のCSSコードタブをクリックして開く

/**考え事黄色**/
.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;
}

吹き出しデザイン枠<青色>文字幅囲み枠

ここに文章を入力する

吹き出しデザイン枠ですが、通常のブロック幅でなく、入力の文字幅となっています。

記事の途中にあると、見出しのようにも使えて便利です。

吹き出しデザイン枠<青色>HTMLコード
<div class="speech_box1">
ここに文章
</div>
⇩のCSSコードタブをクリックして開く

/**吹き出し青**/

.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;
}

ホワイトボード風の飾り枠

タイトル

ここに本文を入力します。

ホワイトボード白板風のデザインで、リストを中に書いたり、まとめを書いたりとポイントとして使うこともできます。

また、背景色を変更すれば、黒板風にアレンジ可能です。

ホワイトボードのデザイン枠のHTMLコード
<div class="board_box"><span class="board_box-title">タイトル</span> <br />ここに本文を入力します。
</div>
⇩のCSSコードタブをクリックして開く

/**ボード風の囲み枠**/
.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; /**影の色**/
}

大きめ点ドット囲み枠<黄色>

ここに文字を入力する

少し大きめの点、ドットの囲み枠です。

大きく目立たせたい時に利用したり、目次や箇条書きリストに使ったりできますね。

大きめドットの囲み枠<黄色>HTMLコード
<div class="dot_box6">ここに文字を入力する</div>
⇩のCSSコードタブをクリックして開く

/**黄色ドット囲み**/

.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;
}

カッコ点線ドットの囲み枠デザイン<かっこ青色>

ここに

文章を入力する

ドットで作ったカッコの形を、両端に置いた囲み枠です。

ドットの大きさを変えたり、色を変えてみると、ブロックの印象が変わります。

点線カッコの囲み枠HTMLコード
<div class="dot_box7"> ここに
<p>文章を入力する</p> </div>
⇩のCSSコードタブをクリックして開く

/**[点線]青**/

.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番の囲み枠のアレンジで、背景色を追加している形です。

ドット囲み枠のHTMLコード
<div class="dot_box8">
ここに文章を入力する
</div>
⇩のCSSコードタブをクリックして開く

/**点(ドット)**/
.dot_box8 {
margin: 2em auto;
padding:2em;/**内側余白**/
border:dotted 3px #e2c2b3;/**線の種類 太さ 色**/
background: #c49d9d;/**背景色**/
}

表示がうまくいかない対処方法!飾り枠コードはどこに貼る?

Q
初心者が間違えやすいのは?チェックする箇所
A

全角スペースを使ってる。半角英数字を使いましょう

:と;を間違って使っている。種類ごとのコード終わりは、;を使う。

{と}で、囲って閉じること。消えて抜けてしまってないかチェックする。

Q
カスタマイズ効かない時、表示されない対処方法は?
A

キャッシュの削除をしてみる。

文法間違えがないか、チェックしましょう。

Q
CSSやHTMLコードをチェックする便利なサイト?
A

CSSコードやHTMLコードが半角英数字になっているか、チェックしてください。

CSSコード編集チェックもあります。W3C CSS 検証サービスがおすすめ

HTMLコードチェックには、W3C マークアップ検証サービスがおすすめです。

\コードの貼り付け方は、ここで詳しく/

オシャレ可愛い飾り枠を簡単コピペで出来る作り方のまとめ

はじめての方には、コードは何か分からない難しそうですが、簡単コピペするだけで作れてキレイな枠ができると嬉しくなります。

閲覧者・読者も見やすくて、ポイントを目立たせていることで、読みやすいです。

あれもこれもと使いたくなりますが、色をやパターンを決めて統一感を出すことが、記事作成の見やすくなるポイントになります。

点線の囲み枠や、ドットの囲み枠を使ってみてください。

こちらもオススメ、タイトル付きボックスやポイントアイコン付きボックスです。

こちらもコピペで、完成しますので、ぜひ参考にしてみてくださいね。

ここにテキスト

ここにテキスト

ここにタイトルを入力

ここに文字を入力

ここにタイトルを入力

ここに文字を入力

ここにタイトル

ここに文章

タイトル

ここにテキスト

タイトル

ここに文字を入力

memo

ここにテキスト

MEMO
メモボックスです。
ここにタイトル

ここに文章

タイトルテキスト
タイトルテキスト

ここにテキスト

こちらの囲み枠は、次のページでコピペで出来るコードを紹介していますので、ゲットしましょう。

食品に日用品から電化製品までお得に購入!すぐ届くAmazon・音楽やクラウド・Amazonプライムビデオまで便利でお得
\お得なAmazonセール中/
タイトルとURLをコピーしました