【囲み枠 – BOX】CSSコードとHTMLの記述のしかた -基礎 –
記事作成に欠かせない 装飾のひとつが囲み枠 BOX 。
大事なポイントや 注意点を 分かりやすく表示させたい時などに使用します。
Boxには 基本的な枠だけのものや タイトルを付けるタイプの枠などがあり、
その他にも注意喚起といった枠などもあります。
いくつか用途に合わせて使い分けるため 色やデザインなどのCSSの作成と
投稿画面でのHTMLの記述についてまとめていきます。
囲み枠のCSS作成とHTMLコードのイメージ
囲み枠は CSSコードで " BOX “と言います。
作成とBOXの使いかたは
1. 画面左の 外観カスタマイズの追加CSS(スタイルシート)で事前にBOXを作成します。
2. 投稿記事の作成画面で HTMLコードを使って呼び出すことで囲み枠を表示することができます。
BOXの作成 – CSS style –
初めに CSS(スタイルシート)boxのカスタマイズ、 線種・線の幅・色などを 指定したものを作成します。

この .normal-box の後の数字部分を書き換えていくことで 複数の囲み枠をデザインし、使い分けることができます。
コピペ O.K.!囲み枠のCSS作成
では3種類のサンプルBOXの CSS作成コードをご参考に お好みでカスタマイズしてみてください。
隣り合うコンテンツとの余白の調整も必要なので 先ほどのコードに
margin や padding といった 余白の調整のコードも一緒に記述していきます。
基本の囲み枠 ー normal – box ー
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*基本枠-CSS*/ .normal-box1{ border:
4px
solid
#003366; margin:
1em
0.5em; padding:
1em; }
/*基本枠-余白の調整*/ .normal-box1 p{ margin:
0;
line-height:3; } |
/**/ の文章は カスタマイズの内容を 自分自身が把握しておくためのもので
分かりやすいように名前を付けておくといいです。
文字とBoxのサイズ(幅)を変動させるコード
ここで紹介している囲み枠のCSSコードは 幅の指定をしていないもので
サイトページの幅いっぱいに表示させる状態です。
文章の長さに合わせて枠のサイズを変動させたい場合は
display:inline-block;
というコードをコードに追加します。
バランスなどを考え 自由に使い分けてみてください。
BOXを呼び出す – 投稿作成 HTML –
投稿画面で Boxを呼び出すには 囲みたい文字列の部分をコピーする時の要領でマークし HTML コードで囲みます。

<div> と </div> の間に文字列を入れる といった感じです。
コピペ O.K.!囲み枠のHTML
基本の囲み枠 のHTMLコードです。数字部分を変えてお使いください。
1 2 3 4 5 |
/*-
基本枠
-*/ <div class="normal-box1"> <p>ここにテキスト</p> </div> |
このコード入力のしかたについては コードを覚えるのが大変なので
定型文登録(現在、パターン登録に名称変更)しておくことをお勧めします。
余白に関する記事
コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識
定型文登録
HTMLコードの入力を短縮!ルクセリタス【定型文】の登録と使いかた|WordPress