Boxデザインくん

今回はBoxデザインの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/box/

## 基本

Boxデザインは文字通りBoxブロックを作るためのものです。仕様的には中央寄せくんとほぼ同じですが中央寄せ以外でブロックを作りたいときに使えます。デフォルトでは以下のコードが出力されます。

<div style="color:#555555;background-color:#ffffff;font-size:14px;padding:10px;line-height:1.7;text-align:left;border:1px solid #000000;">ここに本文を入力</div>

それぞれの意味は以下の通り。

・color: 文字色

・background:背景色

・border：枠線

・font-size: 文字サイズ

・padding：内余白

・line-height：行間

・text-align: 位置ぞろえ

中央寄せくんから中央寄せに関する設定がなくなっただけです。

詳細設定を開くと、余白、枠線、位置ぞろえの変更が可能になります。

## テンプレート

デフォルトの設定としていくつか用意しています。上部にあるテンプレから選択すると開発者が適当に設定したものが選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定しているものがブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレの選択肢に表示されます。

## コード説明

padding:で内側の余白を変更することが可能です。ゆったりとしたブロックにしたい場合は余白を大きめにするといいでしょう。

text-align:で文字の位置を指定することができます。

text-align:left; 左揃えですがわざわざ設定しなくても左揃えになります。

text-align:center;中央寄せにしたい場合に設定します。

text-align:right;右寄せにしたい場合に設定します。

それ以外の項目は中央寄せくんと同様です。

中央寄せ以外のブロックを作りたいときにご利用してみてください。

-　-　- ✂切り取り✂ -　-　-

ということでBoxデザインくんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。