コピペで使えるボックスデザイン(囲み枠)【HTML・CSS】/ブログを見やすく装飾しよう

アイキャッチ/ボックスカスタマイズ

Webサイトを見ているとボックスなどで装飾されていて「見やすいな」「オシャレだな」と感じたことはありませんか?

  • 見やすく記事をまとめたい
  • テーマに依存しない自由なデザインの囲み枠を使ってみたい

今回は当ブログでも実際に採用しているものを含むて、使いやすくてオシャレな囲み枠デザインを厳選してご紹介いたします!

この記事で分かること
  1. デザインを適用させる際のHTMLとCSSコード
  2. 簡単なカスタマイズ(背景色を変更するなど)
  3. 自由なボックスデザインの使い方
ここを解説
ウサギ

囲み枠の使い方

  • Step1
    HTMLを貼り付ける

    コードをコピペして、表示させる内容を編集します

  • Step2
    CSSを貼り付ける

    コードをコピペして、色の変更などデザインを編集します

  • Step3
    完成!

    プレビューで確認します

テーマ独自のボックス以外のデザインで囲み枠を作成する場合、HTMLとCSSのコードは必須となります。

コードをいじるのは難しそう…

すべてコピペ対応なので大丈夫!お好みで色を変えることもできるよ。

まずはコードを貼り付ける場所から説明していきます。

操作方法はCocoonの管理画面で進めていきますが、他のテーマやブログサービスでも応用できます。

HTMLを記述する(貼り付ける)場所

記事作成画面で囲み枠を入れたい部分にHTMLモードで記述します。ブロックエディタとクラシックエディタでは少し操作が違うので自分の使っているエディタの方法を選んでください。

ブロックエディタの場合

ブロック追加の+をクリックして【カスタムHTML】を選択し、HTMLコードを貼り付けます。

囲み枠

クラシックエディタの場合

右上にある【テキストモード】に切り替えて記述します。

「ビジュアルモード」ではHTMLは本文として認識してしまうので必ず切り替えましょう。

囲み枠

CSSを記述する(貼り付ける)場所

2つの方法がありますのでどちらかひとつに記述します。(どちらでもOK)

追加CSS

メニュー画面の「外観」から「カスタマイズ」をクリック。

「追加CSS」をクリックすることで、右側のようなCSSを編集するページになります。

追加CSSの一番上(1行目)から順番に貼り付けていきましょう。

囲み枠

子テーマのスタイルシート(style.css)

メニュー画面の「外観」から「テーマファイルエディター」をクリック。

スタイルシート (style.css)」のページが開くので元から書いているコード(テーマ情報)は消さずに、上からCSSを貼り付けます。

編集するテーマは子テーマ(Cocoon Child)が選択されているかを必ず確認しましょう。

囲み枠

色の変更の仕方について(CSS)

囲み枠はCSSを使うと背景色や文字の色を自由に変更することができます。

デザインはシンプルな色にしているので、色を変更してお気に入りのボックスを作ってください。

よく使う項目
  • 背景色を設定 background-color:#ここに6桁のカラーコード;
  • 文字色を設定 color:#ここに6桁のカラーコード;

カラーコードを調べるにはこちらのサイトが見やすく色が豊富で便利です。

それではここから囲み枠のデザインを紹介します。いってみよう、やってみよう~♪

シンプル系

実線で囲む

シンプルな実線で囲んだボックスです。色はお好みで変更してください。

<div class="box1">
    <p>シンプルな実線で囲んだボックスです。色はお好みで変更してください。</p>
</div>
/*実線*/
.box1 {
margin:2em auto;
padding:2em;/*内側余白*/
border:solid 2px #666;/*線の種類・太さ・色*/
width:95%;
}
.box1 p {
margin: 0; 
padding: 0;
}

二重線で囲む

二重線で囲んだボックスです。色はお好みで変更してください。

<div class="box2">
    <p>二重線で囲んだボックスです。色はお好みで変更してください。</p>
</div>
/*二重線*/
.box2 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:double 5px #666;/*線の種類・太さ・色*/
width:95%;
}
.box2 p {
margin: 0; 
padding: 0;
}

点線(破線)で囲む

破線で囲んだボックスです。色はお好みで変更してください。

<div class="box3">
    <p>破線で囲んだボックスです。色はお好みで変更してください。</p>
</div>
/*破線*/
.box3 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:dashed 2px #666;/*線の種類・太さ・色*/
width:95%;
}
.box3 p {
margin: 0; 
padding: 0;
}

点線(ドット)で囲む

点線(丸いドット)で囲んだボックスです。色はお好みで変更してください。

<div class="box4">
    <p>点線(丸いドット)で囲んだボックスです。色はお好みで変更してください。</p>
</div>
/*斜線(ドット)*/
.box4 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:dotted 3px #666;/*線の種類・太さ・色*/
width:95%;
}
.box4 p {
margin: 0; 
padding: 0;
}

背景色をつける

シンプルに背景色をつけたボックスです。色はお好みで変更してください。

<div class="box5">
    <p>シンプルに背景色をつけたボックスです。色はお好みで変更してください。</p>
</div>
/*背景色をつける*/
.box5 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#dcdcdc;/*背景の色*/
width:95%;
}
.box5 p {
margin: 0; 
padding: 0;
}

オシャレ系

背景色(ストライプ)をつける

背景色(ボーダー)をつけたボックスです。色はお好みで変更してください。

<div class="box21">
    <p>背景色(ストライプ)をつけたボックスです。色はお好みで変更してください。</p>
</div>
/*背景色(ストライプ)をつける*/
.box21 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-image: repeating-linear-gradient(-45deg,#eee 0, #eee 3px,#fafafa 3px,#fafafa 6px);/*背景ストライプ*/
width:95%;
}
.box21 p {
margin: 0; 
padding: 0;
}

めくれた紙風

めくれた紙風のボックスです。色はお好みで変更してください。

<div class="box22">
    <p>めくれたテープ風のボックスです。色はお好みで変更してください。</p>
</div>
/*めくれたテープ風*/
.box22 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#e8ebfe;/*背景色*/
width:95%;
position:relative;
}

.box22:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.box22 p {
margin: 0; 
padding: 0;
}

ふせん風ボックス

ふせん風のボックスに影をつけています。色はお好みで変更してください。

<div class="box23">
    <p>ふせん風のボックスに影をつけています。色はお好みで変更してください。</p>
</div>
/*ふせん風*/
.box23 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-left:solid 5px #909792;/*線の種類・太さ・色*/
background-color:#f4f4f4 ;/*背景色*/
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);
width:95%;
}
.box23 p {
margin: 0; 
padding: 0;
}

上にだけ太線

上にだけ太線をひいて影をつけています。色はお好みで変更してください。

<div class="box24">
    <p>上にだけ太線をひいて影をつけています。色はお好みで変更してください。</p>
</div>
/*上にだけ太線*/
.box24 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-top:solid 5px #909792;/*線の種類・太さ・色*/
background-color:#f4f4f4 ;/*背景色*/
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);/*ボックス影*/
width:95%;
}
.box24 p {
margin: 0; 
padding: 0;
}

上下に太線

上下に太線をひいています。色はお好みで変更してください。

<div class="box25">
    <p>上下に太線をひいています。色はお好みで変更してください。</p>
</div>
/*上下にだけ太線*/
.box25 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-top:solid 5px #909792;/*上の線の種類・太さ・色*/
border-bottom:solid 5px #909792;/*下の線の種類・太さ・色*/
background-color:#f4f4f4 ;/*背景色*/
width:95%;
}
.box25 p {
margin: 0; 
padding: 0;
}

左右に二重線

左右に二重線をひいて影をつけています。色はお好みで変更してください。

<div class="box26">
    <p>左右に二重線をひいています。色はお好みで変更してください。</p>
</div>
/*左右に二重線*/
.box26 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-left:double 5px #909792;/*左の線の種類・太さ・色*/
border-right:double 5px #909792;/*右の線の種類・太さ・色*/
background-color:#f4f4f4 ;/*背景色*/
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);/*ボックス影*/
width:95%;
}
.box26 p {
margin: 0; 
padding: 0;
}

少しずれたボックス

ボックスの上に少しずらしたボックスを配置しています。背景色などはお好みで変更してください。

<div class="box27">
    <p>ボックスの上に少しずらしたボックスを配置しています。背景色などはお好みで変更してください。</p>
</div>
/*少しずらしたボックス*/
.box27{
margin: 2em auto;
padding:2em;/*内側の余白*/
background: none;/*元のボックス背景色なし*/
border:1px solid #ccc ;/*線の太さ・種類・色*/
position: relative;/*配置(基準)*/
width:95%;
}
.box27:after{
background-color:#eee;/*ずらしたボックスの背景色*/
border:none;
content: '';
position: absolute;/*配置(ここを動かす)*/
top: 7px;/*上から7pxずらす*/
left: 7px;/*左から7pxずらす*/
width: 100%;
height: 100%;
z-index: -1;
}

.box27 p {
margin: 0; 
padding: 0;
}

線の一部だけ色を変える

線の色を一部だけ変えたボックスです。線の色などはお好みで変更してください。

<div class="box28">
    <p>線の色を一部だけ変えたボックスです。線の色などはお好みで変更してください。</p>
</div>
/*一部だけ線の色を変える*/
.box28 {
margin: 2em auto;
padding:2em;/*内側余白*/
border: 2px solid #eee;	
position: relative;
z-index: 0;
width:95%;
}
.box28:before {
border-top:2px solid #a3d6cc;
border-left:2px solid #a3d6cc;
content: '';
display: block;
position: absolute;
top: -2px;
left: -2px;
width: 20px;
height: 20px;
z-index: 1;
}

.box28 p {
margin: 0; 
padding: 0;
}

方眼紙風ボックス

方眼紙をイメージしたボックスです。オシャレな雰囲気。

 <div class="box29">
    <p>方眼紙をイメージしたボックスです。オシャレな雰囲気。</p>
</div>
/*方眼紙風*/
.box29{
margin: 2em auto;
padding:2em;/*内側余白*/
 background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
border:1px solid #f0f0f0;
width:95%;
}

可愛い系

実線の囲み枠を丸くする

実線に丸みをつけただけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。

<div class="box51">
    <p>実線に丸みをつけただけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。</p>
</div>
/*実線を丸くする*/
.box51 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:solid 2px #666;/*線の種類・太さ・色*/
border-radius:30px;/*丸みを調整*/
width:95%;
}
.box51 p {
margin: 0; 
padding: 0;
}

白ステッチ風

糸で縫ったように可愛いらしいデザインになります。

<div class="box52">
    <p>糸で縫ったように可愛いらしいデザインになります。</p>
</div>
/* 白ステッチをつける---------------------------------------------- */
.box52{
margin: 2em auto;
padding:2em;/*内側余白*/
position: relative;
padding:1.5em !important;
z-index: 0;
background-color:#e8ebfe;/*背景色*/
width:95%;
}

.box52:before{
position: absolute;
border: 2px dashed #fff;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 3px;
z-index: -1;
border-radius:3px;
}
.box52 p {
margin: 0; 
padding: 0;
}

ワンポイント

ワンポイントに色をつけた可愛いらしいデザインになります。

<div class="box53">
    <p>ワンポイントに色をつけた可愛いらしいデザインになります。</p>
</div>
/*ワンポイント*/
.box53 {
margin: 2em auto;
padding:2em;/*内側余白*/
position: relative;
border: 5px solid #eee;/* 線の太さ・種類・色 */
z-index: 0;
}
.box53:before {
background-color:#f5b2b2;/* ワインポイントの色 */
content: '';
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 5px;
height: 5px;
z-index: 1;
}

.box53 p {
margin: 0; 
padding: 0;
}

ふわふわとした囲み枠

ふわふわと優しい雰囲気の囲み枠です。色はお好みで変更してください。

<div class="box54">
    <p>ふわふわと優しい雰囲気の囲み枠です。色はお好みで変更してください。</p>
</div>
/*ふわふわした囲み枠*/
.box54 {
margin: 2em auto;
padding: 1em 2em;
background-color:#fff ;/*背景色*/
box-shadow: 0 0 6px 1px #b4bbce, 0 0 6px 1px #b4bbce inset;/*ふわりとした影*/
border-radius: 30px;
width:95%;
}
.box54 p {
margin: 0; 
padding: 0;
}

手書き風

手書き風の囲み枠です。色はお好みで変更してください。

<div class="box55">
    <p>手書き風の囲み枠です。色はお好みで変更してください。</p>
</div>
/*手書き風*/
.box55 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-radius: 30px 60px/60px 30px;
border: solid 2px #ccc;
width:95%;
}
.box55 p {
margin: 0; 
padding: 0;
}

タイトル付きボックス

ここからのタイトル付きボックスは、タイトルが長すぎるとレイアウトが崩れるので短めにしよう!

上部にタイトル(見出しボックス)

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

Cocoonの「見出しボックス」のようなタイトル付きのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

<div class="box71">
<div class="box-title">ここにタイトルを入力します</div>
<p>Cocoonの「見出しボックス」のようなタイトル付きのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*タイトル付き(見出しボックス)*/
.box71{
margin: 2em auto; /* ボックスの余白 */
background-color: #fff; /* ボックス背景色 */
padding:5em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
width:95%;
}
.box71 .box-title {
background-color: #666; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff; /* タイトル文字色 */
padding:10px;/*タイトル余白*/
text-align: center;	/* タイトル中央寄せ */
position:absolute;	/* 配置(ここを動かす) */
top:0;	/*上から(0px)に配置 */
left:0; /*左から(0px)に配置 */
width:100%;/*横幅最大幅 */
}
.box71 p {
margin: 0;
padding: 0;
}

上部にタイトル(ラベルボックス)

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

Cocoonの「ラベルボックス」のようなタイトル付きのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

 <div class="box72">
<div class="box-title">ここにタイトルを入力します</div>
<p>Cocoonの「ラベルボックス」のようなタイトル付きのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*タイトル付き(ラベルボックス)*/
.box72{
margin: 2em auto; /* ボックスの余白 */
padding:2em; /* ボックス内側余白 */
background-color: #fff; /* ボックス背景色 */
position:relative; /* 配置(ここを基準に) */
border: 2px solid #666;	/* ボックスの線 (太さ 線の種類 線の色)*/
width:95%;
}
.box72 .box-title {
background-color:#fff; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #666; /* タイトル文字色 */
padding: 0 5px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;	/* 配置(ここを動かす) */
top: -5px; /*上から(-5px)移動*/
left: 20px; /*左から(20px)移動*/
}
.box72 p {
margin: 0;
padding: 0;
}

左上に背景色ありタイトル

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

Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。タイトルはボックスの中に表示されます。ここにコンテンツを入力します。

<div class="box73">
<div class="box-title">ここにタイトルを入力します</div>
<p>Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。タイトルはボックスの中に表示されます。ここにコンテンツを入力します。</p>
</div>
/*左上に背景色ありタイトル*/
.box73{
margin: 2em auto; /*ボックスの余白 */
background-color: #fff; /*ボックス背景色*/
padding:3em 2em 2em; /*ボックス内側余白*/
position:relative; /*配置(ここを基準に)*/
border: 1px solid #666;/*ボックスの線 (太さ 種類 色)*/
width:95%;
}
.box73 .box-title {
background-color:#666; /*タイトル背景色*/
font-size: 1em;/*タイトル文字の大きさ*/
color: #fff ; /*タイトル文字色*/
padding: 5px 10px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/* 配置(ここを動かす)*/
top: 0em; /*上から(0px)移動*/
left: 0px; /*左から(0px)移動*/
}
.box73 p {
margin: 0;
padding: 0;
}

セロテープ風タイトル

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

セロテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

<div class="box74">
<div class="box-title">ここにタイトルを入力します</div>
<p>セロテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*セロテープ風*/
.box74{
margin: 2em auto; /* ボックスの余白 */
background-color: #eee; /* ボックス背景色 */
padding:2.5em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
width:95%;
}
.box74 .box-title {
background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
transform: rotate(-2deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
color: #666; /*タイトル文字色 */
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -10px; /*上から(-10px)移動*/
left: 20px; /*左から(20px)移動*/
}
.box74 p {
margin: 0;
padding: 0;
}

マスキングテープ風タイトル

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

マスキングテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

<div class="box75">
<div class="box-title">ここにタイトルを入力します</div>
<p>マスキングテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*マスキングテープ風*/
.box75{
margin: 2em auto;
background-color: #fafafa;/*ボックス背景色*/
padding:2.5em 2em 2em;/*ボックス内側余白*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
position:relative;/*配置(ここを基準に)*/
width:95%;
}
.box75 .box-title {
background-image: repeating-linear-gradient(-45deg,#eee 0, #eee 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
border-left: 2px dotted rgba(0,0,0,.1);/*テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/*テープのギザギザ右*/
transform: rotate(-2deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -10px; /*上から(-10px)移動*/
left: 20px; /*左から(20px)移動*/
}
.box75 p {
margin: 0;
padding: 0;
}

アイコンを使ったボックス

アイコンは【Font Awesome 5】を使用します。(Cocoonには標準装備されています)

メモのアイコン

MEMO

メモボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

<div class="box81">
<div class="box-title">MEMO</div>
<p>メモボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*メモアイコンをつけた囲み枠*/
.box81 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #F5F7FE; /* 背景色 */
border-radius:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
width:95%;
}

.box81 .box-title {
color: #b4bbce ; /* タイトル文字色 */
font-size: 18px;
font-weight: bold;
}

.box81 .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f304";
font-size: 18px;
margin: 0 3px 0 0;
font-weight: bold;
}

.box81 p {
  margin: 0;
  padding: 0;
}

びっくりマークのアイコン

タイトルを入力

びっくりマークのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

<div class="box82">
<div class="box-title">タイトルを入力</div>
<p>びっくりマークのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*ビックリマークのアイコンをつけた囲み枠 */
.box82 {
margin: 2em auto;
padding:1em 2em 2em;/*内側余白*/
background-color: #fcf2ef; /* 背景色 */
border-radius:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
width:95%;
}

.box82 .box-title {
color: #e9b3a3; /* タイトル文字色 */
font-size: 18px;/*タイトル文字の大きさ*/
font-weight: bold;
}

.box82 .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f06a";
font-size: 18px;/*アイコンの大きさ*/
margin: 0 3px 0 0;
font-weight: bold;
}

.box82 p {
  margin: 0;
  padding: 0;
}

はてなマークのアイコン

タイトルを入力

はてなマークのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。

<div class="box83">
<div class="box-title">タイトルを入力</div>
<p>はてなマークのボックスです。ここにコンテンツを入力します。背景色などはお好みで変更してください。</p>
</div>
/*はてなマークのアイコンをつけた囲み枠 */
.box83 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #e7f1f2; /* 背景色 */
border-radius:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
width:95%;
}

.box83 .box-title {
color: #96a3a3 ; /* タイトル文字色 */
font-size: 18px;/*タイトル文字の大きさ*/
font-weight: bold;
}

.box83 .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f059";
font-size: 18px;/*アイコンの大きさ*/
margin: 0 3px 0 0;
font-weight: bold;
}

.box83 p {
margin: 0;
padding: 0;
}

ボックスの中にリストを入れる

囲み枠の中にリスト(箇条書き)を入れることもできます。

  • リスト1
  • リスト2
  • リスト3
<div class="box91">
 <ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
 </ul>
</div>
/*ボックスにリストを入れる*/
.box91 {
margin: 2em auto;
padding:1em 2em;
border:solid 2px #888;/*線の種類・太さ・色*/
width:95%;
}

.box91 ul{
margin: 0;
padding: 0;
}

箇条書き(リスト)の作り方について

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
 </ul>

この箇条書きをボックスの中に入れることで応用することができます。

同様に番号付きの箇条書き<ol>を入れたり、リストについては色を変えることもできますので詳しいカスタマイズはこちらの記事をご覧ください。

ひとこと

実用性が高いと思うものを中心に厳選して紹介しました。

テーマ独自の囲み枠を使っても良いですが、自分でカスタマイズすることでデザインの幅は大きく広がります。

いろいろなデザインを使えるのは楽しいね!

そうだね、CSSひとつで自分好みの色にできるのも嬉しい。

ブログの装飾する際にボックスデザインを活用してみてください♪

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズ
\Follow/
Turicco

Comment

タイトルとURLをコピーしました