ブログ記事で簡単に使える囲み・枠線（ボックス）一覧

「枠線」を使って大事なことを強調しましょう。

ブログご訪問ありがとうございます。
起業・個人事業・副業の営業・集客・経営をサポートする事で夢を叶える　個人ビジネス専門　ビジネス心理コンサルタントSophia’s Colorです。

基本的な枠線の作り方

ブログ記事で大事なところを目立つようにできる囲み・枠線（ボックス）。

タグ編集エディタ、最新エディタで記事を書く場合に便利な枠線の簡単作成方法をまとめてみました。

ブログ記事を書く際にお役立ちいただければ幸いです。

注：注：最新エディタでは、「HTML表示」に変更して、コピーしたコードを張り付けて作成してください。

下記のようなタグで文章を囲みます。

ブログ記事で大事なところを目立つようにできる囲み・枠線

<div style="padding: 10px;border: 1px solid #ff9750; box-shadow: 5px 5px 5px #99FFFF;">ブログ記事で大事なところを目立つようにできる囲み・枠線
</div>

<div style="border:1px dotted #CCCCCC; padding:5px;">

3px(線の太さ)
dotted(線の種類)　点線
#ff0000(線の色)　赤
padding:10px;(文字と線との間隔)

</div>

線の太さ、線の種類、文字色、文字と線との間隔を
自由に選べます

以下にご参考例として色々な枠線を作成してみました

<div style="border:3px solid #00ff0; padding:10px;">

3px(線の太さ)
solid(線の種類) 直線
#00ff00(線の色)　緑
padding:10px;(文字と線との間隔)

</div>

<div style="border:3px double #0000ff; padding:10px;">

3px(線の太さ)
double(線の種類)　二重線
#0000ff(線の色)　青
padding:10px;(文字と線との間隔)

</div>

<div style="border:3px dashed #ffa500; padding:5px;">

3px(線の太さ)
dashed(線の種類)　破線
#ffa500(線の色)　オレンジ
padding:10px;(文字と線との間隔)

</div>

<div style="border:5px groove #ffff00; padding:5px;">

5px(線の太さ)
groove(線の種類)　溝線
#ffff00(線の色)　黄色
padding:10px;(文字と線との間隔)

</div>

<div style="border:5px ridge #808080; padding:5px;">

5px(線の太さ)
ridge(線の種類)　稜線
#808080(線の色)　グレイ
padding:10px;(文字と線との間隔)

</div>

<div style="border:5px inset #ffc0cb; padding:5px;">

5px(線の太さ)
inset(線の種類)　窪んだ感じの線
#ffc0cb(線の色)　ピンク
padding:10px;(文字と線との間隔)

</div>

<div style="border:5px outset #ffd700; padding:5px;">

5px(線の太さ)
outset(線の種類)　隆起した感じの線
#ffd700(線の色)　ゴールド
padding:10px;(文字と線との間隔)

</div>

角丸枠

ブログ記事の中で、「お知らせ」や「イベント」など、目立たせたい文章を囲むと効果的です。

角丸枠はやさしい印象になります。

■下記のようなタグで記事を囲みます

<div style="border:2px dotted #ff0000;color:#333;background-color:#FFFCDB;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:10px;">

枠線の作り方
</div>

<div style="border:2px dotted #0000ff;color:#333;background-color:#FFFCDB;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:10px;">

2px(線の太さ)
dotted(線の種類)　点線
#0000ff(線の色)　赤
color:#333(文字の色）
background-color:#FFFCDB(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:10px;(文字と線との間隔)

</div>

線の太さ⇒数字が大きくなるほど線が太くなります
線の種類⇒実線・破線・点線・二重線など・・・
文字色⇒枠内の文字の色

背景色⇒枠内の背景色
角丸の大きさ⇒数字が大きくなるほど角が丸くなります
文字と線との間隔⇒数字が大きくなるほど間隔が広くなります

以下にご参考例として色々な枠線を作成してみました。

タグの部分をコピーしてブログに貼ってお使いいただけます。

<div style="border:3px solid #ff0000;color:#333;background-color:#FFFCDB;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

3px(線の太さ)
solid(線の種類) 実線
#00ff00(線の色)　緑
color:#333(文字の色）
background-color:#FFFCDB;(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:10px;(文字と線との間隔)

</div>

<div style="border:5px double #00FFFF;color:#ffffff;background-color:#808000; border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:10px">

5px(線の太さ)
double(線の種類)　二重線
#0000ff(線の色)　青
color:#ffffff(文字の色）
background-color:#808000;(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:10px;(文字と線との間隔)

</div>

<div style="border:3px dashed #ffa500;color:#fff;background-color:#000;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:10px;">

3px(線の太さ)
dashed(線の種類)　破線
#ffa500(線の色)　オレンジ
color:#fff(文字の色）
background-color:#000;(背景の色)　黒border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:10px;(文字と線との間隔)

</div>

<div style="border:7px groove #E4007F;color:#000;background-color:#D2CCE6;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

7px(線の太さ)
groove(線の種類)　溝線
#E4007F(線の色)　
color:#000(文字の色）
background-color:#D2CCE6;(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:5px;(文字と線との間隔)

</div>

<div style="border:7px ridge #F39800;color:#333;background-color:#D5EAD8;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

7px(線の太さ)
ridge(線の種類)　稜線
#F39800(線の色)　
background-color:#D5EAD8;(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:5px;(文字と線との間隔)

</div>

<div style="border:7px inset #8FC31F;color:#333;background-color:#D4ECEA;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

7px(線の太さ)
inset(線の種類)　窪んだ感じの線
#8FC31F(線の色)　
background-color:#D4ECEA;(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:5px;(文字と線との間隔)

</div>

<div style="border:7px outset #00A0E9;color:#333;background-color:#FADBDA;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

7px(線の太さ)
outset(線の種類)　隆起した感じの線
#00A0E9(線の色)　
background-color:#FADBDA;(背景の色)
border-radius:10px;-moz-border-radius:10px(角丸の大きさ）
box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）
padding:5px;(文字と線との間隔)

</div>