装飾ボックスの特徴
このボックスの特徴は、簡単な罫線、背景が設定できるほかに、「2カラム」「回り込み」「吹き出し」「カスタム」を設定できる点です、
それぞれの特徴をご紹介していきます。
![画像: 装飾ボックスの特徴](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/27/e1c45ae14077e76ecc1fef8c542512d4a77ddc86.png)
ボックス
この要素が、デフォルトのタイプ「ボックス」で作成された要素です。標準的な罫線で囲われた要素を作成することが可能です。
今表示しているこの要素のように、背景色や罫線を設定することが可能です。
2カラム
「2カラム」では、左右それぞれにテキスト要素、画像を要素を設置することが可能です。
両方に画像を設置することで、2カラム構成で画像を設置することもできます。
![画像1: 装飾ボックス](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/26/30b894005525ba8d7172ce1200777605d00750cd.png)
回り込み
![画像2: 装飾ボックス](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/26/cc5e0dd9aa97bbcb9066611d12e2d5e268796e47.png)
回り込みは、左右の要素でボリュームに差があるときに有効なタイプです。
2カラム構成で画像の高さよりテキストのボリュームが多い場合、そのままだと画像の下に大きな余白が生じ、見た目のバランスがよくありません。このような場合に「回り込み」を選択することで、画像の下にテキストが回り込み、余分な余白が生じずにすみます。
特に小さいサムネイルや、人物の写真を小さく扱いたいときなどに有効です。
吹き出し
![画像3: 装飾ボックス](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/26/2416d2b6381ba86a12d63b6d04226ee6d1b40758.jpg)
このような吹き出しを設置することが可能です。
![画像4: 装飾ボックス](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/26/c283b2d1a74af50a7773a25ad71cb7e26b75469f.jpg)
もちろん左右に振り分けることもできるので、対談形式のコンテンツに最適です。
吹き出しは背景色や罫線の色を選択することが可能です。
カスタム
タイプ「カスタム」は、記事作成者が装飾ボックスにユニークな名称を設定することで、オリジナルのボックス要素を設置することが可能です。
※ 事前にCSSでレイアウトを設定しておく必要があります。
弊社が運営する『dino network』では、この「カスタム」を活用し、記事作成者の要素を設置しています。
![画像: 弊社小川の記事に設置している、記事作成者のプロフィールボックス dino.network](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/26/eeb9f4cb391563c66de21ab27464fd093c1e8f91.png)
弊社小川の記事に設置している、記事作成者のプロフィールボックス
dino.networkdino.networkでは、カスタム「prof」と入力することで、上下に罫線を自動で付与し、写真が丸型になるCSSを設定しています。
![画像: dino.networkでのプロフィール要素入力例](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2019/09/26/57b37efdc899d5388b43b06db78bdc61e5f71cd6.png)
dino.networkでのプロフィール要素入力例
実際に設置されている要素は、こちらでご確認ください。