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

※サンプル※
CSSを記述してコンテナに
変化するグラデーションをつけています。

bingo!CMSは、ページごとにCSSやJavaScriptを記述できます。
このTipsでは、CSSを記述し、特定のコンテナの背景に変化するグラデーションをつける方法をご紹介します。
グラデーションの色数を増やす、色が入る角度を変えるなど、適宜調整のうえご利用ください。

※上の表示サンプルは、幅100%のコンテナにCSSを適用し、文章はテキストユニットを配置しています。

CSSを記述します

  1. bingo!CMS管理画面にログインし、任意のページ編集画面を開きます。
  2. 画面上部のツールバーの中から、「このページ用のcssとjavascriptの設定」ボタンをクリックし、「CSS・JS設定画面」を開きます。
  1. 以下を参考にCSSを記述します。
    
    <style type="text/css">
    	.gradation .bcontainer-inner{
    	    background: linear-gradient(-45deg, #F7FF00, #DB36A4 );
    	    background-size: 400% 400%;
    	    animation: Gradient 15s ease infinite;
    	}
    
    	@keyframes Gradient {
    	    0% {background-position: 0% 50%}
    	    50% {background-position: 100% 50%}
    	    100% {background-position: 0% 50%}
    	}
    </style>
    
  2. 保存ボタンをクリックし、「CSS・JS設定」画面を閉じます。

※サンプル画像はbingo!CMS1.7.2のものです。
※bingo!CMS1.7.2より、CSS/JSはPC用とスマホ用で別々に記述できるようになりました。

コンテナに任意のclass名を設定します

  1. 「コンテナモード」に移動します。
  2. グラデーションをつけたいコンテナのコンテナ編集画面に入ります。

※サンプル画像のコンテナはページ幅が1200pxに設定されています。
ページ幅はデザインに合わせて変更してください。

  1. 「コンテナ設定」画面の「class」欄に「gradation」と入力します。
    ※「.gradation」と入力しないようご注意ください。"."(ドット)は不要です。
  2. 保存ボタンをクリックします。

正しく記述できたか確認します

  1. コンテナにCSSの記述が反映され、変化するグラデーションがつきました。
    あとは、適宜ユニットを設置してコンテンツを作成してください。

※設定を保存しても何も反映されない場合は、ブラウザを再読み込みしてください。再読み込み後もグラデーションが動かない場合は、記述が間違っている可能性があります。記述内容に問題が無いかご確認ください。

複数のコンテナやユニットに同じCSSを適用させる(カスタムCSS編集)

bingo!CMS1.7.2より「カスタムCSS編集」が実装されました。
「カスタムCSS編集」に記述されたCSSは、サイト全体に適用されるため、別途classを設定することで、複数のコンテナやユニットに同じCSSを適用できます。 

  1. bingo!CMS管理画面 > デザイン管理 >「カスタムCSS編集」を開き、CSSを記述して保存します。
    ※classを指定してください。
  2. 任意のページ編集画面に入り、任意のコンテナやユニットに手順1で指定したclass名を設定して保存します。
  3. プレビューでCSSが適用されたか確認し、問題なければページを公開してください。

本機能に関する詳細はカスタムCSS編集のマニュアルをご覧ください。

その他のTips

ページトップ