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

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

  • 動画の設定まとめ

    2018年10月10日

    動画の設定まとめ

    動画の設定方法をまとめました。 目的別に、カスタムユニットやグリッドユニット、コンテナなどを使った設定方法をご紹介します。

  • 変化するグラデーションを作る方法:HTMLユニット編

    2018年06月27日

    変化するグラデーションを作る方法:HTMLユニット編

    ページにHTMLニットを配置し、HTMLやCSS、JSを自由に記述することができます。 このtipsではHTMLユニットを使用し、色が変化するグラデーションを付ける方法をご紹介します。

  • 変化するグラデーションを作る方法:コンテナ編

    2018年06月27日

    変化するグラデーションを作る方法:コンテナ編

    ページごとにCSSやJSの設定ができます。 このtipsではCSSを記述し、コンテナの背景に色が変化するグラデーションを付ける方法をご紹介します。

  • アニメーションの設定まとめ

    2017年10月23日

    アニメーションの設定まとめ

    このtipsでは、アニメーションを設定する方法をご紹介します。ご利用のバージョンによって設定方法が異なりますのでご注意ください。

ページトップ