webbuilding

ボックスデザイン（囲み枠）でページを飾ろう！

【ホームページの育て方78】

サイトのページがなんだかさっぱりしすぎていて
ちょっと華やかにしたいときにオススメする今回の『枠』

ページの中で重要なところを枠で囲んでみると
ピンクや黄色などで枠を作ると華やかに
黒やブルーの枠で囲うときちっとした雰囲気にもなる便利なものなのです♪

この枠のことを「ボックスデザイン」「囲み枠」と言います。

囲み枠はHTMLとCSSで設定します。

ん？なに？
と思ったあなたにざっくり簡単に説明すると
HTMLとはホームページを表示するための言語で
CSSとはページをデザインするための言語です。

HTMLはふだんブログを入力するところにある
テキスト欄を利用してください。

CSSを入れる場所

WordPressの場合
ダッシュボード＞外観＞テーマの編集 右側にある「スタイルシート（style.css）」

テンプレートによっては
ダッシュボード＞外観＞CSSの編集　で追加CSSを入れられるようになっています。

必ず子テーマのstyle.cssに入れてください！
テーマを更新したらなくなってしまいますので注意ですよ！

アメブロの場合
ブログ管理＞デザインの設定＞CSSの編集

 

1. シンプルな枠

基本の形。
太さと色を変えれば雰囲気が変わりますよ。

HTML
<div class=”box1″ >
<p>ここに文章 </p >
</div >
CSS
.box1 {
padding: 1% 2%;
margin: 5% 10%;
font-weight: bold;
border: solid 3px #000000;
}
.box1 p {
margin: 0;
padding: 0;
}

2. 角が丸い枠

女性向けのサイトに使うと可愛いかも
また、太く赤い線にすると注意点にも使えます

HTML
<div class=”box2″ >
<p>ここに文章 </p >
</div >
CSS
.box2 {
padding: 1% 2%;
margin: 5% 10%;
font-weight: bold;
color: #666666;/*文字色*/
background: #FFF;
border: solid 3px #eb6876;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

3. 二重枠

大事なところを強調したり
少し華やかにしたいときに


HTML
<div class=”box3″ >
<p>ここに文章 </p >
</div >
CSS
.box3 {
padding: 1% 2%;
margin: 5% 10%;
border: double 10px #efcc00;
}
.box3 p {
margin: 0;
padding: 0;
}

4. 破線枠

実線より軽くなります
色や太さを変えると雰囲気が変わります
dashedをdottedに変えると丸い線で囲むこともできますよ


HTML
<div class=”box4″ >
<p>ここに文章 </p >
</div >
CSS
.box4 {
padding: 1% 2%;
margin: 5% 10%;
background: #fef7e9;
border: dashed 3px #f1cc82;/*点線*/
}
.box4 p {
margin: 0;
padding: 0;
}

5. 左だけ太線

タイトルや重要なポイントなどに
色や太さを変えると印象が変わります


HTML
<div class=”box5″ >
<p>ここに文章 </p >
</div >
CSS
.box5 {
padding: 1% 2%;
margin: 5% 10%;
color: #000000;
background: #dfe6d2;
border-left: solid 10px #a2c388;
}
.box5 p {
margin: 0;
padding: 0;
}

6. 影をつける

背景は薄いけど目立たせたいときや
ちょっとしたお知らせやポイント紹介
話の中でテーマがそれるときなどに


HTML
<div class=”box6″ >
<p>ここに文章 </p >
</div >
CSS
.box6 {
padding: 1% 2%;
margin: 5% 10%;
color: #00BCD4;
background: #ffffff;/*背景色*/
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box6 p {
margin: 0;
padding: 0;
}

7. 吹き出し風

タイトルやコメント、ワンポイントなどを
まさに吹き出しで紹介するときに


HTML
<div class=”box7″ >
<p>ここに文章 </p >
</div >
CSS
.box7 {
position: relative;
padding: 1% 2%;
margin: 5% 10%;
background: #f1ecf5;
color: #b28bbe;
font-weight: bold;
}
.box7:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #f1ecf5;
width: 0;
height: 0;
}
.box7 p {
margin: 0;
padding: 0;
}

8. ステッチ風

布にステッチした感じになって
写真を入れたり日記風にも使えますよ
角を丸くするとガーリーなイメージに


HTML
<div class=”box8″ >
<p>ここに文章 </p >
</div >
CSS
.box8{
padding: 1% 2%;
margin: 5% 10%;
background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
}
.box8 p {
margin: 0;
padding: 0;
}

9. 枠の途中にタイトルを入れる

POINTポイント紹介に便利です
短めのタイトル向け。お客様の声にもいいかも

HTML
<div class=”box9″ >
<span class=”box-title”>ここにタイトル</span>
<p>ここに文章 </p >
</div >
CSS
.box9 {
position: relative;
padding: 2%;
margin: 5% 10%;
border: solid 5px #95ccff;
border-radius: 8px;
}
.box9 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box9 p {
margin: 0;
padding: 0;
}gin: 0;
}

10. 枠の上にタイトルを入れる

ここに注意してください！

お知らせや注意、ポイント紹介などにいいかも
色を変えるとまた雰囲気が変わります


HTML
<div class=”box10″ >
<span class=”box-title”>ここにタイトル</span>
<p>ここに文章 </p >
</div >
CSS
.box10 {
.box10 {
margin: 5% 10%;
background: #efe6e7;
}
.box10 .box-title {
font-size: 1.2em;
background: #bd7ea1;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box10 p {
padding: 15px 20px;
margin: 0;
}

いかがでしたか？
囲み枠であなたのサイトをグレードアップしてみてくださいね♪

 

コードは【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 を参考にさせていただきました。