【囲み枠 – 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作成

では３種類のサンプルBOXの CSS作成コードをご参考に お好みでカスタマイズしてみてください。

隣り合うコンテンツとの余白の調整も必要なので 先ほどのコードに
margin や padding といった 余白の調整のコードも一緒に記述していきます。

基本の囲み枠 ー normal – box ー

/**/ の文章は カスタマイズの内容を 自分自身が把握しておくためのもので
分かりやすいように名前を付けておくといいです。

文字とBoxのサイズ(幅)を変動させるコード

ここで紹介している囲み枠のCSSコードは 幅の指定をしていないもので
サイトページの幅いっぱいに表示させる状態です。

文章の長さに合わせて枠のサイズを変動させたい場合は
display:inline-block; というコードをコードに追加します。

バランスなどを考え 自由に使い分けてみてください。

BOXを呼び出す – 投稿作成  HTML –

投稿画面で Boxを呼び出すには 囲みたい文字列の部分をコピーする時の要領でマークし HTML コードで囲みます。

<div> と </div> の間に文字列を入れる といった感じです。

コピペ O.K.！囲み枠のHTML

基本の囲み枠  のHTMLコードです。数字部分を変えてお使いください。

このコード入力のしかたについては コードを覚えるのが大変なので
定型文登録（現在、パターン登録に名称変更）しておくことをお勧めします。