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