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

in 東京

今回の勉強会では、bingo!CMS1.7より搭載した「マルチコンテナ」の基本機能や応用操作の解説を行いました。

コンテナはユニットの配置のためだけにあると思われがちですが、実はコンテナの機能だけでも様々なデザインが表現できるんです。
口頭による操作説明だけではなく、時にはホワイトボードに書き込んでお伝えするなど、弊社社長の「bingo!CMSってこんなに面白いんだよ!」という、熱意と愛情が溢れた勉強会となりました。
ご参加くださった皆さま、ありがとうございました。

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

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

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

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

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

任意のコンテナの編集画面に入り、以下の操作を行います。

  1. 「コンテナ設定」のタブでパディングAに背景画像を設定する
  2. パララックスを「する」に設定する
    ※スクロールスピードは任意に変更してください。

保存して操作完了です。とっても簡単ですね!
※画像クリックで拡大します。

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

日ごろ利用しているWebページで、テキストなどにサンプルのような白い半透明の背景がついているデザインを見かけませんか?
bingo!CMSならコンテナの設定だけでこの表現ができるんです!

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

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

任意のコンテナの編集画面に入り、以下の操作を行います。

  1. 「コンテナ設定」のタブでパディングAに背景画像を設定する
  2. Aのパディングを入力する
    ※数値を入力すると背景画像の表示される範囲が広がります。
  3. パディングBに背景色を設定する
    • カラー選択の画面でパレットから白(#ffffff)を選択する
    • 不透明度を50%に設定する
  4. Bのパディングを入力する
    ※数値を入力すると背景色の表示される範囲が広がります。

保存して操作完了です。いろんなデザインで応用できそうですよね。
※画像クリックで拡大します。

今後のセミナー情報

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

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

ページトップ