4月12日 bingo!CMS 勉強会 開催しました

in 東京

今回はbingo!CMS1.7より搭載した、「マルチコンテナ」の基本機能や応用操作の解説を行いました。
コンテナはユニットの配置の為にあると思われがちですが、実は様々なデザインが表現できるんです。
今回の勉強会では、意外と知らない便利な設定を色々とご紹介させていただきました。
単なる操作の説明だけではなく、時にはホワイトボードに書き込んでお伝えするなど、弊社社長の「bingo!CMSってこんなに面白いんだよ!」という、熱意と愛情が溢れた勉強会となりました。
ご参加くださった皆さま、ありがとうございました。


中でも好評だった、コンテナだけでできる設定をふたつご紹介いたします!

1.背景画像にパララックスを設定する

左の動画のコスモスの画像のように、背景の画像と手前のコンテンツが違うスピードでスクロールされるWEBページを見たことはありませんか?


これは「パララックス」という視差効果を使った表現です。
WEBページに一味違ったアクセントをつけることができますよね。
bingo!CMSではこの一見難しそうな設定が、なんとほぼ1分で設定できてしまいます。


それでは、この超お手軽な設定方法をご紹介します。

任意のコンテナの編集画面に入ります。


パディングAに背景画像を設定します。


パララックスを「する」に設定します。
 ※スクロールスピードは任意で変更できます。


以上です。とっても簡単ですね!


※画像クリックで拡大します。

2.パディングAとBを使い分ける

普段利用しているWEBページで、テキストなどに左図のような白い半透明の背景がついているデザインを見かけませんか?
bingo!CMSではコンテナの設定だけでこの表現ができるんです!


今回の勉強会でお伝えしたところ、「知らなかった…!」と参加者さまにも大変好評でした。


操作はとっても簡単ですので、ぜひデザインにお役立てください。

任意のコンテナの編集画面に入ります。


パディングAに背景画像を設定します。


Aのパディングを入力します。
 ※数値を入力すると背景画像の表示される範囲が広がります。


パディングBに背景色を設定します。
 ・カラー選択の画面でパレットから白を選択します。
 ・不透明度を50%に設定します。


Bのパディングを入力します。
 ※数値を入力すると背景色の表示される範囲が広がります。


以上です。いろんなデザインで応用できそうですよね。


※画像クリックで拡大します。

今後のセミナー情報

  • 5月…「カスタムユニット」の基本機能や応用操作の解説
  • 6月…「グリッドユニット」の基本機能や応用操作の解説


お申し込みはセミナーページより承ります。
たくさんのご参加、お待ちしております!

ページトップ