カスタムユニットでネガティブマージンを設定する方法

bingo!CMS1.7の「カスタムユニット」でネガティブマージンを活用したレイアウトを紹介します。
※ 今回は「bingo!CMS 1.7」のコンテナ、ユニットを使用しています。

完成画面

カスタムユニットでネガティブマージンを設定する方法 - 完成画面のサンプル

ユニットを配置する

bingo!CMS 1.7のマルチコンテナをドラッグ&ドロップで配置します。
お好みの列数を選択してください。

配置したコンテナにカスタムユニットをドラッグ&ドロップで配置します。

配置ができたらユニット編集画面に入りましょう。

ユニットを編集する

カスタムユニット編集画面です。
最初に要素を選択します。
今回は、

  • 画像1
  • 画像2
  • タイトル1
  • テキスト1

の順にドラッグ&ドロップで配置します。

画像1の設定

画像1で使用したい画像をアップロードします。

画像のアップロード方法については、素材ファイルを追加する(素材管理)をご参照ください。

画像2の設定

  1. 画像2で使用したい画像をアップロードします。
  2. 画像が円になるように設定します。
    画像のサイズや円の形はお好みで変更してください。
    ※ 画像サイズの半分の数値をラウンドに入力してください。
  3. ネガティブマージンで画像2を画像1の上に引き上げます。
    ※ 画像のサイズによって微調整が必要になります。
    ※ ネガティブマージン=マージンにマイナスの数値を入れること

タイトル1の設定

  1. タイトルを入力します。
  2. フォントの種類、サイズを選びます。
  3. 余白を調節します。

テキスト1の設定

  1. テキストを入力します。
  2. フォントの種類、サイズを選びます。
  3. 余白を調節します。

完成

ネガティブマージンを活用したレイアウトの完成です。
複製機能を使えば、画像やテキストを変更するだけで同じレイアウトがいくつも作成できます。

その他のTips

ページトップ