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

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

bingo!CMSはページごとにCSSやJavaScriptを記述することができます。
今回は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」と入力します。
     
  2. 保存ボタンをクリックします。
     

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

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

※保存後、何も反映されない場合やグラデーションが動かない場合は記述が間違っている可能性があります。
記述内容をご確認ください。

bingo!CMS1.7.2のカスタムCSS編集

bingo!CMS1.7.2より「カスタムCSS編集」が実装されました。
「カスタムCSS編集」画面に記述されたCSSは、サイト全体に適用されます。
 
  1. 「カスタムCSS編集」画面を開き、CSSを記述して保存します。
     
  2. 任意のページ編集画面に入り、コンテナやユニットに任意のclass名を設定して保存します。
     
  3. CSSが適用されたか確認しましょう。
     
複数のページに同じCSSを適用させたい場合などは「カスタムCSS編集」に記述すると便利です。

ページトップ