装飾ボックスは基本的なブロック(テキスト、画像、リンク、リスト、テーブル)をグルーピングし、罫線、背景などの装飾を施すことができる要素です。また、2カラム構成、吹き出し、画像回り込みグループも指定できます。

装飾ボックスの特徴

このボックスの特徴は、簡単な罫線、背景が設定できるほかに、「2カラム」「回り込み」「吹き出し」「カスタム」を設定できる点です、

それぞれの特徴をご紹介していきます。

画像: 装飾ボックスの特徴

ボックス

この要素が、デフォルトのタイプ「ボックス」で作成された要素です。標準的な罫線で囲われた要素を作成することが可能です。

今表示しているこの要素のように、背景色や罫線を設定することが可能です。

2カラム

「2カラム」では、左右それぞれにテキスト要素、画像を要素を設置することが可能です。

両方に画像を設置することで、2カラム構成で画像を設置することもできます。

画像1: 装飾ボックス

回り込み

画像2: 装飾ボックス

回り込みは、左右の要素でボリュームに差があるときに有効なタイプです。

2カラム構成で画像の高さよりテキストのボリュームが多い場合、そのままだと画像の下に大きな余白が生じ、見た目のバランスがよくありません。このような場合に「回り込み」を選択することで、画像の下にテキストが回り込み、余分な余白が生じずにすみます。

特に小さいサムネイルや、人物の写真を小さく扱いたいときなどに有効です。

吹き出し

画像3: 装飾ボックス

このような吹き出しを設置することが可能です。

画像4: 装飾ボックス

もちろん左右に振り分けることもできるので、対談形式のコンテンツに最適です。

吹き出しは背景色や罫線の色を選択することが可能です。

カスタム

タイプ「カスタム」は、記事作成者が装飾ボックスにユニークな名称を設定することで、オリジナルのボックス要素を設置することが可能です。

※ 事前にCSSでレイアウトを設定しておく必要があります。

弊社が運営する『dino network』では、この「カスタム」を活用し、記事作成者の要素を設置しています。

画像: 弊社小川の記事に設置している、記事作成者のプロフィールボックス dino.network

弊社小川の記事に設置している、記事作成者のプロフィールボックス

dino.network

dino.networkでは、カスタム「prof」と入力することで、上下に罫線を自動で付与し、写真が丸型になるCSSを設定しています。

画像: dino.networkでのプロフィール要素入力例

dino.networkでのプロフィール要素入力例

実際に設置されている要素は、こちらでご確認ください。

コメントを読む・書く

This article is a sponsored article by
''.