bingo!CMS v1.7 マニュアルサイト

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用とスマホ用で別々に記述できるようになりました。

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

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

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

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

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

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

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

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