コンテナにネガティブマージンの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

ページトップ