コンテナにネガティブマージンのcssを記述する方法

bingo!CMS1.7に搭載のCSS/JS編集機能を使用して、コンテナにネガティブマージンを設定しコンテナ同士を重ねる方法を紹介します。
※bingo!CMS1.7.xをご利用の場合のみ設定できます。
※スキンはV17のものをご使用ください。

ネガティブマージンの設定例

あらかじめページ編集画面にコンテナを2つ設置し、それぞれコンテンツを作成してください。
その後、下段のコンテナにマイナスの値のマージンを付与して上段のコンテナに重ねます。
コンテンツの作成方法はこのTipsでは割愛します。

Before

bingo!CMS - コンテナにネガティブマージンのcssを記述する方法 - 設定前

After

bingo!CMS - コンテナにネガティブマージンのcssを記述する方法 - 設定後

コンテナにネガティブマージンを使う

  1. まず、CSS/JS設定画面にスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  1. CSS/JS設定画面の「styleタグを追加」をクリックします。
    style開始タグと閉じタグが自動的に追加されました。
  2. 開始タグと閉じタグの間にCSSを挿入します。
    コンテナを100px分重ねる場合 
    .negative{margin-top:-100px;}

    ※コンテナを重ねる幅はお好みで変更してください。
  1. 次に、ページ編集画面をコンテナモードに切り替え、CSSを適用したいコンテナのコンテナ編集画面を開きます。
  1. コンテナ編集画面上のclass入力欄に「negative」と入力します。
    ※「.negative」と入力しないようご注意ください。"."（ドット）は不要です。
  2. 「保存」ボタンをクリックしたらネガティブマージンの設定は完了です。

その他の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では、アニメーションを設定する方法をご紹介します。ご利用のバージョンによって設定方法が異なりますのでご注意ください。

ページトップ